这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前端Debug的特点
多平台、多环境、多工具、多技巧
动态修改元素和样式
点击.cls开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
强制激活伪类
选中具有伪类的元素，点击:hov
DOM树右键菜单，选择Force State
Console
console.log, console.warn, console.error, console.debug, console.info
console.table:具像化的展示JSON和数组数据
console.dir:通过类似文件数的方式展示对象的属性
占位符:给日志添加样式，可以突出重要的信息，%s:字符串占位符；%o:对象占位符；%c:样式占位符；%d:数字占位符
Break Point与Watch
使用关键字debugger或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对于断点
暂停状态1下，鼠标hover变量可以查看变量的值
在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Scope与Call Stack
展开Scope可以查看作用域列表
展开Call Stack可以查看当前JavaScript代码的调用栈
Source Map
mappings字段存储了源文件和Source Map的映射
英文，表示源码及压缩代码的位置关联；逗号，分隔一行代码中的内容；分号，代表换行。
使用代理工具调试
原理:电脑作为代理服务器；手机通过HTTP代理连接到电脑；手机上的请求都经过代理服务器
