Elements

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

windows: ctrl + shift + i
mac: cmd + opt + i

DOM

修改 html & 属性

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

添加属性(enter)
修改 html(F2)
删除元素(delete)

除了右键, 还可以:

h toggle 元素的 visibility 属性
拖拽节点, 调整顺序
拖拽节点到编辑器
ctrl + z 撤销修改

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

默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
Selected Node Only 只会列出当前节点上绑定的事件
每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
- handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
- isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
- useCapture 是 addEventListener 的第三个参数, 说明事件是以冒泡还是捕获顺序执行

Styles

修改样式

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

断点

代码断点

设置断点
- 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.
- 断点后可以查看堆栈, 变量信息:
在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用.
断点后的变量保存到全局
- 选中变量, 右键 Evalute in console
- 在 console 中选中输出的内容, 右键 store as global variable

事件断点

元素上事件断点

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

dom mutation 断点(推荐)

dom mutation event 是 DOM3 添加的新的事件, 一般是 dom 结构改变时触发. devtools 可以对 DOMSubtreeModified DOMAttrModified 和 DOMNodeRemoved 时断点. 对上面元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图这种情况使用全局搜索(ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以.

全局事件断点

devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟元素上事件断点不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.

下面这个图是 resize 时中断, 因为库都代理了, 还需要在断点处一步一步跟下去才能走到业务代码中.

几个常用的断点快捷键:

F8: 继续执行
F10: step over, 单步执行, 不进入函数
F11: step into, 单步执行, 进入函数
shift + F11: step out, 跳出函数
ctrl + o: 打开文件
ctrl + shit + o: 跳到函数定义位置
ctrl + shift + f: 所有脚本中搜索

Console

元素选择

$(selector)

即使当前页面没有加载jQuery，你也依然可以使用$和$$函数来选取元素，实际上，这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装，$用于选取单个元素，$$则用于选取多个：

使用 $_ 来引用最近的一个表达式

$0 - $4

除了$_，你还可以使用$0,$1,$2,$3,$4这5个变量来引用最近选取过的5个DOM元素。 $0 为Elements HTML 面板中选中的元素。 $1 为上一次在 HTML 面板中选中的元素。 $2、$3、$4 同样的。不过只能到$4

copy

复制到剪切板，copy之后，直接ctrl+v

信息输出

在js代码中打点console.log() 类似debugger

文章来源 → http://www.html-js.com/article/2327

chrome调试工具常用功能整理相关推荐

guns常用功能整理
guns常用功能整理 guns常用功能整理一.ajax接口请求(常用) 1.1:引入插件库 1.2:调用即可二.es6模块调用 2.1:当前文件下使用 2.2:封装的代码暴露出去三.创建temp ...
[原]ASP.Net常用功能整理--生成图片的缩略图
这二天想了想决定把自己先前做的项目中的小的功能,整理一下,奉献大家!经大家提议,我决定加上源代码,但是源代码不一定都是我写的,有的来自书上,有的来自网上,有的来自开源项目,与我自己的代码有不相符的,那 ...
2022无线WIFI路由器的不常用功能整理（带USB接口，可插手机卡）适合短期出差、拉有线网络不方便等。
WiFi路由器已经是一种普通得不能再普通的家庭必备品,但也有不少人对无线路由器的了解不是很多,路由器是什么?有什么作用呢? 路由器是什么路由器是连接两个或多个网络的硬件设备,在网络间起网关的作用,是 ...
pandas常用功能整理
1.读写读指定格式txt: train = pd.read_table('/home/hadoop/jzzz/train/subsidy_train.txt',sep=',',header=-1) ...
Wordpress模板主题中functions.php常用功能代码与常用插件[ 后台篇]（持续收集整理）
用Wordpress建站的初学者一定会需要用到的Wordpress模板主题中functions.php常用功能代码与常用插件.慢慢持续收集整理....... 目录一.Wordpress模板主题中fu ...
微信小程序开发编辑器功能常用快捷键整理
微信小程序开发编辑器功能常用快捷键整理常用快捷键 Ctrl + L(选中当前行) Ctrl + Shift + L(选中所有匹配) Ctrl + D(选中匹配,按一次多选一个) Ctrl + U(回 ...
不常见但很有用的chrome调试工具使用方法
前面的话对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...
chrome调试工具高级不完整使用指南（基础篇）
一.前言本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作二. ...
iOS开发：对于Xcode的Open Developer Tool中常用功能使用的总结
整理一下Xcode菜单栏里面Open Developer Tool里面的功能,这里只介绍常用的几个功能的使用,剩余没有介绍到的功能模块请自行脑补... 根据Open Developer Tool菜单栏 ...

chrome调试工具常用功能整理