前端调试

打开Dev Tool

F12

打开命令菜单

ctrl+shift+p

devtool的黑色主题 dark theme 更改为 light theme
screenshot 截屏
dock 更改调试窗位置 undock-取消固定

CSS调试

检查元素：点击页面检查部分右击检查跳转到对应代码

蓝色——主体

绿色——内边距padding

橙色——外边距margin

查询DOM树
- ctrl+f
- 查询方式
  - 文本查询
  - css查询
  - Xpath

编辑样式

复制别人网页上的样式到自己上面

在控制台 shift+回车换行

JS调试

在代码添加debugger调试

添加监视某一个变量

Network

点击这个按钮刷新仍保留历史请求（页面跳转）

传输流量限制，模仿用户网速

Debug时可以ctrl+P输入文件名快速找到要打断点的文件，找不到是因为打包工具诸如webpack、rollup的sourcemap设置有问题。也可以ctrl+shift+F输入变量名、方法名来搜索

__EOF__

本文作者：衣囧~
本文链接：https://www.cnblogs.com/user-yi/p/17625835.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！