Chrome开发者工具（DevTools）为前端调试工作提供了诸多的工具可供使用，相对于“alert”、“console.log”大大提高了前端调试的效率。
这些工具可以实现例如：DOM结构分析、CSS动态变更、断点调试、watch变量、检测网络请求和响应、移动端调试等。
点击Ctrl+Shift+I或F12打开DevTools，讲解基本使用界面：
- 右上角可选择Dock side；
- Ctrl+[和Ctrl+]切换页签，Ctrl+Shift+P命令快捷键
- Elements、Console、Sources、Network、Application页签简单介绍
- 左上角可切换移动端调试
Console页签
- 中间的控制台可以实时验证JavaScript代码，可以实时控制页面（document.querySelector('button').style.fontSize='2em'）
- 代码出现Error会在Console页面提示，点进去可以看到对应的代码位置
- 左侧console侧边栏、清屏；右侧设置记录AJAX请求，可直接导航到对应代码的位置
- Console.error, Console.table([{},{},{}]), console.clear, ctrl+L
- 提前提一下Sources里的Snippets
Elements页签
HTML
- 鼠标定位DOM，可动态修改DOM元素
- $0 获取选中DOM元素，在控制台进行操作
- 选中DOM元素，Copy样式和JS路径
- Event Listeners查看DOM元素绑定事件关联的代码
CSS
- 右侧查看样式
- 可动态增加内联样式，例如背景色、字体大小，上下键调增调减
- :cls :hov 增删类、伪状态；+增加新规则
- Computed查看盒模型参数：border、padding、margin信息，可编辑
Sources页签
- JavaScript代码调试工作大部分在这个页签下进行。左侧是文件导航面板，中间是代码编辑面板，右侧是JavaScript代码调试面板。
- 演示：
- Call Stack、Scope、Breakpoints、Watch、{}美化代码、保存临时测试代码修改效果（随下面讲）
- 指定断点位置
- Step over
- Step into
- Step out
- Resume
- Call stack restart frame（断点回跳）
- Scope可编辑变量
- 将指定脚本置于黑盒（在编辑页面、call stack栏、settings里面的blackboxing）
- 条件断点
- 事件监听断点
- DOM断点（停在改变DOM节点或其子孙节点的代码位置）
- Subtree modifications: 当前选中的DOM元素的子节点删除或增加，或子孙节点内容改变。子节点属性变化，当前选中节点属性变化不触发断点。
- Attribute modifications: 选中DOM元素的属性增加、删除、值发生变化（不包含input value）。
- Node removal: 选中DOM元素被移除
- XHR/Fetch断点（停在XHR调用send()的代码位置）
- 文件导航面板Code Snippets的使用（Esc调出console，短代码调试，注意变量域的控制）
- HTML和JavaScript混在一个页面怎么办？
- 静态加载的情况
- 动态加载的情况（debugger、事件监听）
- //# sourceURL=resources/common/js/majorPublish.js (针对动态加载的页面section引用独立的js文件)
Network页签
- 请求的网络资源的列表
- Status、Type、Initiator、Size、Time、Waterfall
- Title栏右键可增加类型
- 长按地址栏左侧刷新图标
- Block掉指定资源（调出命令窗口，show request blocking）
pplication页签
Cookie、LocalStorage、SessionStorage