前端调试技巧

前端入门必会的初级调试技巧 - 知乎 (zhihu.com)

【浏览器调试工具精讲】Chrome Dev Tools精讲，前端必看！_哔哩哔哩_bilibili

前端调试

打开Dev Tool

F12

打开命令菜单

ctrl+shift+p

• devtool的黑色主题 dark theme 更改为 light theme

• screenshot 截屏

• dock 更改调试窗位置 undock-取消固定

CSS调试

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

蓝色——主体

绿色——内边距padding

橙色——外边距margin

 

2. 查询DOM树

   • ctrl+f

   • 查询方式

     • 文本查询

     • css查询

     • Xpath

编辑样式

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

在控制台 shift+回车 换行

JS调试

在代码添加debugger调试

添加监视某一个变量

Network

 

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

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

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