谷歌浏览器调试（前端）：Chrome F12

Chrome开发者工具（DevTools）为前端调试工作提供了诸多的工具可供使用，相对于“alert”、“console.log”大大提高了前端调试的效率。

这些工具可以实现例如：DOM结构分析、CSS动态变更、断点调试、watch变量、检测网络请求和响应、移动端调试等。

 

点击Ctrl+Shift+I或F12打开DevTools，讲解基本使用界面：

1. 右上角可选择Dock side；
2. Ctrl+[和Ctrl+]切换页签，Ctrl+Shift+P命令快捷键
3. Elements、Console、Sources、Network、Application页签简单介绍
4. 左上角可切换移动端调试

 

Console页签

1. 中间的控制台可以实时验证JavaScript代码，可以实时控制页面（document.querySelector('button').style.fontSize='2em'）
2. 代码出现Error会在Console页面提示，点进去可以看到对应的代码位置
3. 左侧console侧边栏、清屏；右侧设置记录AJAX请求，可直接导航到对应代码的位置
4. Console.error, Console.table([{},{},{}]), console.clear, ctrl+L
5. 提前提一下Sources里的Snippets

 

Elements页签

HTML

1. 鼠标定位DOM，可动态修改DOM元素
2. $0 获取选中DOM元素，在控制台进行操作
3. 选中DOM元素，Copy样式和JS路径
4. Event Listeners查看DOM元素绑定事件关联的代码

CSS

1. 右侧查看样式
   1. 可动态增加内联样式，例如背景色、字体大小，上下键调增调减
   2. :cls :hov 增删类、伪状态；+增加新规则
2. Computed查看盒模型参数：border、padding、margin信息，可编辑

 

Sources页签

1. JavaScript代码调试工作大部分在这个页签下进行。左侧是文件导航面板，中间是代码编辑面板，右侧是JavaScript代码调试面板。
2. 演示：
   1. Call Stack、Scope、Breakpoints、Watch、{}美化代码、保存临时测试代码修改效果（随下面讲）
   2. 指定断点位置
      1. Step over
      2. Step into
      3. Step out
      4. Resume
      5. Call stack restart frame（断点回跳）
      6. Scope可编辑变量
      7. 将指定脚本置于黑盒（在编辑页面、call stack栏、settings里面的blackboxing）
   3. 条件断点
   4. 事件监听断点
   5. DOM断点（停在改变DOM节点或其子孙节点的代码位置）
      1. Subtree modifications: 当前选中的DOM元素的子节点删除或增加，或子孙节点内容改变。子节点属性变化，当前选中节点属性变化不触发断点。
      2. Attribute modifications: 选中DOM元素的属性增加、删除、值发生变化（不包含input value）。
      3. Node removal: 选中DOM元素被移除
   6. XHR/Fetch断点（停在XHR调用send()的代码位置）
   7. 文件导航面板Code Snippets的使用（Esc调出console，短代码调试，注意变量域的控制）
3. HTML和JavaScript混在一个页面怎么办？
   1. 静态加载的情况
   2. 动态加载的情况（debugger、事件监听）
   3. //# sourceURL=resources/common/js/majorPublish.js (针对动态加载的页面section引用独立的js文件)

 

Network页签

1. 请求的网络资源的列表
   1. Status、Type、Initiator、Size、Time、Waterfall
   2. Title栏右键可增加类型
2. 长按地址栏左侧刷新图标
3. Block掉指定资源（调出命令窗口，show request blocking）

 

pplication页签

Cookie、LocalStorage、SessionStorage