这是我参与「第四届青训营 」笔记创作活动的第8天
Chrome Devtools
动态修改元素和样式
点击.cls 开启动态修改元素的 class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则
Console
console.table
具像化的展示 JSON 和数组数据
console.dir
通过类似文件树的方式展示对象的属性
占位符
给日志添加样式，可以突出重要的信息
％s：字符串占位符；％o：对象占位符；%c：样式占位符；%d：数字占位符；
Sorce Tab
区域1：页面资源文件目录树
区域2：代码预览区域
区域3： Debug 工具栏
区域4：断点调试器
Break Point与Watch
使用关键字 debugger 或 代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标 hover 变量可以查看变量的值
在调试器 Watch 右侧点击可以添加对变量的监控，查看该变量的值
Network
区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4： Request Table 面板
区域5：总结面板
区域6：请求详情面板
移动端H5调试
真机调试
iOS
1.使用 Lightning 数据线将 iPhone 与 Mac 相连
2.iPhone 开启 Web 检查器（设置-＞Safari-＞高级-＞开启 Web 检查器）
3.iPhone 使用 Safari 浏览器打开要调试的页面
4.Mac 打开 Safari 浏览器调试（菜单栏-＞开发-＞iPhone 设备名-＞选择调试页面)
5.在弹出的 Safari Developer Tools 中调试
Android
1.使用 USB 数据线将手机与电脑相连
2.手机进入开发者模式，勾选 USB 调试，并允许调试
3.电脑打开 Chrome 浏览器，在地址栏输入：chrome:/inspect/#devices 并勾选 Discover USB devices选项）
4.手机允许远程调试，并访问调试页面
5.电脑点击 inspect 按钮
6.进入面试界面
VConsole
日志(Logs):console.log|info|errorl.
网络(Network): XMLHttpRequest,Fetch, sendBeacon
节点(Element)：HTML节点树
存储(Storage)： Cookies,LocalStorage, SessionStorage
手动执行 JS命令行
自定义插件
线上即时修改Overrides
1.打开 Sources 面板下的的Overrides
2.点击 Select folders forOverrides。选择一个本地的空文件夹目录
3.允许授权
4.在page 中修改代码，修改完成后command +s 保存
5.打开 devTools，点击右上角的三个小点 ->More tools->Changes，就能看到所有修改了
使用代理工具Mock数据
1.右键选中要mock 数据的接口，选择save response，保存文件到本地。
2.本地打开保存的文件，编辑想mock 的数据并保存。
3.右键选中第一步的接口，选择Map Local, Local Path 选择第二步的文件。
