WEB调试技术|青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第8天，关于WEB调试技术的知识点总结，包括：前端Debug的特点和Chrome DevTools。

———Zy_Thomas

前端Debug的特点

• 多平台：浏览器、Hybrid、小程序、桌面应用等
• 多环境：本地开发环境、线上环境
• 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
• 多技巧：Console、BreakPoint、sourceMap、代理等

Chrome DevTools

1.动态修改元素和样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值，可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的css规则

2.Console

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table：具象化的展示JSON和数组数据
• console.dir:通过类似文件树的方式展示对象的属性
• 占位符：给日志添加样式，可以突出重要的信息

%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符

3.Sorce Tab

1. 页面资源文件目录树
2. 代码预览区域
3. Debug工具栏
4. 断点调试器：①代码中对应位置加入debugger②点击代码行号，生成断点

• watch：查看变量的值
• BreakPoint：断电
• Scope：展开Scope可以查看作用域列表
• Call Stack：可以查看当前JavaScript代码的调用栈
• XHR/fetch breakpoint
• DOM breakpoint

压缩后的代码如何调试

出于安全考虑，JavaScript代码常被压缩到一行，变量也用'a''b'替换。 用source map映射。

NetWork

可以模拟弱网环境。

Performance