这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
Chrome DevTools
动态修改元素和样式
点击 .cls 开启动态修改元素的 class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值 (字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则
可以用以下 2 种方式强制激活伪类
选中具有伪类的元素，点击 :hov
DOM 树右键菜单，选择 Force State
Console
console.log
console.warn
console.error
console.debug
console.info
console.table
具像化的展示JSON 和 数组数据
console.dir
通过类似文件树的方式展示对象的属性
占位符
给日志添加样式，可以突出重要的信息%s: 字符串占位符，%o: 对象占位符， %c: 样式占位符，%d: 数字占位符
Sorce Tab
Break Point 与 Watch
使用关键字 debugger 或 代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标 hover 变量可以查看变量的值
在调试器 Watch 石侧点击 + 以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
展开 Scope 可以查看作用域列表 (包含闭包)
展开 Call Stack 可以查看当前javaScript 代码的调用栈
压缩后的代码如何调试?
前端代码天生具有“开源"属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用“a'、"b" 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
Source Map
mappings 字段存储了源文件和Source Map 的映射
英文，表示源码及压缩代码的位置关联逗号，分隔一行代码中的内容。
分号，代表换行。
NetWork
Application
Application 面板展示与本地存储相关的信息
Local StorageSession
StorageIndexedDB
Web SQL
Cookie
Performance
总结： web调试技术需要我们每一个程序员去掌握
