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

PC端调试-element

在element Tab页里

• 点击 .cls 开启动态修改元素的class
• 输入字符串可以动态地给元素添加类名
• 勾选/取消类名可以动态地查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板里的css规则。
• 查看伪类元素效果时可以选中具有伪类的元素点击 :hov ,在DOM树右键菜单中选择Force State

PC端调试-Console

• console.log(): 普通的输出
• console.warn(): 带警告的黄色输出
• console.error(): 带错误的红色输出
• console.debug(): 蓝色输出
• `console.info(): 蓝色输出
• console.table(arr): 将数组/JSON对象输出为表格
• console.dir(obj): 将对象树状输出(对比console.log(body))
• console.log('占位符', 对象1, 对象2, ...): %s: 字符串占位符 %o: 对象占位符 %c: CSS占位符 %d: 数字占位符 例如: console.log('%s %o, %c%s', 'hi', {name: 'tom', age: 18}, 'color: green', 'hello')

PC端调试-Sources

Debug工具栏

• Watch: 变量监视
• Breakpoints: 管理断点
• Scope: 查看包含闭包的作用域列表
• Call stack: 调用栈
• XHR/fetch breakpoints: 可以选择在有请求发生的时候设置断点
• DOM breakpoint: 在Element中设置, 达到条件后断开

压缩后的代码调试

前端代码在上线之后会将代码压缩，防止代码被恶意攻击者阅读，但压缩后的代码无法调试，使用Source Map文件的匹配模式即可成功解决问题。
Source Map文件的匹配模式: 在压缩后的文件末尾有//# sourceMappingUrl = demo.js.map

移动端调试-使用代理工具

• charles: 查看控制网络请求(例如将上线网站的某个远程JS代理为本地JS, 将SourcesMap代理到本地)
• fiddler
• spy-debugger
• whistle: 基于Node的跨平台代理调试工具