这是我参与「第四届青训营 」笔记创作活动的的第12天

前端debug的特点

• 多平台
• 多环境
• 多工具
• 多技巧

Chrome Devtools(Chrome自带的调试工具)

Elements面板

• 通过点击.cls来显示元素样式，以及动态添加或删除类名
• 可以在styles栏中实时修改样式，当页面很复杂时可以通过Computed搜索想要调试的样式

注意:伪类并不能实时显示

• 如何调试伪类:通过点击：hov或者Forcestate->选中:hover

Console面板

控制台输出日志

• 普通打印： console.log(); console.debug(); console.info();
• 警告打印：console.warn();
• 错误打印：console.error();
• console.table可以输出表格信息
• console.dir输出树形结构中结点信息

占位符 给日志添加样式，可以突出重要的信息

• %S:字符串占位符
• %O:对象占位符
• %C: 样式占位符
• %d:数字占位符

Source面板

区域1:页面资源文件目录树

区域2:代码预览区域

区域3: Debug工具栏 从左到右依次为

暂停(继续)、单步跳过、进入函数、跳出函数、单步执行、澈活(关闭)所有断点、代码执行异常处自动

区域4:断点调试器

• 使用关键字debugger或代码预览区域的行号可以设置断点，执行到断点处时代码暂停执行
• 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标hover变量可以查看变量的值
• 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
• 展开Scope可以查看作用域列表(包含闭包)
• 展开Call Stack可以查看当前javaScript代码的调用栈

Performance面板

详情可以看 t.csdn.cn/lH0ZV

Network面板

区域1：控制面板

区域2：过滤面板

区域3：概览面板

区域4：Request Table面板

区域5：总结面板

区域6：请求详情面板

Application面板

Application面板展示与本地存储相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

点击左侧Application下的Stroage面板中的Clear Site Data可以清楚网页的本地存储数据

总结

• Elements:查看dom结点，样式，调整样式。
• console:输出不同类型的日志，结合代码，解决不同的问题
• source:查看网页内容，通过debugger调试，查看变量值，帮助我们更好的定位问题
• Network:请求相关
• performance:性能相关
• Application:本地存储相关