Chrome调试工具常用功能介绍

浏览器教程 2016-07-11

Elements

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

windows: ctrl + shift + i

mac: cmd + opt + i

DOM

修改 html & 属性

节点右键, 如下图, 可以:

Chrome调试工具常用功能介绍

添加属性(enter)

修改 html(F2)

删除元素(delete)

除了右键, 还可以:

h toggle 元素的 visibility 属性

拖拽节点, 调整顺序

拖拽节点到编辑器

ctrl + z 撤销修改

查看元素上绑定了哪些事件

Chrome调试工具常用功能介绍

默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点

Selected Node Only 只会列出当前节点上绑定的事件

每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

Chrome调试工具常用功能介绍

handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler

isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的

useCapture 是 addEventListener 的第三个参数, 说明事件是以冒泡还是捕获顺序执行

Styles

修改样式

添加规则

Chrome调试工具常用功能介绍

添加、修改属性同样可以通过 ctrl + z 取消

断点

代码断点

设置断点

在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.

断点后可以查看堆栈, 变量信息:

Chrome调试工具常用功能介绍

在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用.

Chrome调试工具常用功能介绍

断点后的变量保存到全局

选中变量, 右键 Evalute in console

在 console 中选中输出的内容, 右键 store as global variable

Chrome调试工具常用功能介绍

事件断点

元素上事件断点

devtools 可以查看某一个元素上绑定了哪些事件: Elements > Event Listeners

Chrome调试工具常用功能介绍

dom mutation 断点(推荐)

dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 时断点. 对上面元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图

Chrome调试工具常用功能介绍