chrome devtools
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
时才会断电, 在循环中需要断点时比较有用. - 断点后可以查看 堆栈, 变量 信息:
- 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键
- 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键
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
- windows:
chrome devtools的更多相关文章
- Chrome DevTools – 键盘和UI快捷键参考
Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...
- Chrome Devtools简介
Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以 ...
- Chrome DevTools good good study day day up
Chrome DevTools 官方页面 https://developer.chrome.com/devtools
- 使用Chrome DevTools的Timeline分析页面性能
随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...
- Chrome DevTools学习笔记
---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...
- 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
来源: http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应 ...
- Chrome DevTools 调研笔记
1 说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2 Elements 2.1 功能 检查和实时更新页面的HTML与C ...
- Chrome DevTools: Export your raw Code Coverage Data
The Code Coverage tool visually shows you which lines of code in your CSS and JavaScript are used an ...
- Chrome DevTools: Color tricks in the Elements Panel
shift + click to change the color format Tip one The Colour Platters are customeised for you .they s ...
随机推荐
- BOOST中read_some和 boost::asio::error::eof(2)错误
当socket读写完成调用回调函数时候一定要检查 是不是有EOF错误,如果有那么好了,另一方已经断开连接了别无选择,你也断开把. for (;;) { boost::array < char ...
- hdu 1542 Atlantis(求矩形面积并)
分别记录x坐标和y坐标,将其分别按照从左到有的方向排序.然后对于一个输入的矩形的x,y坐标范围内的下标进行标记.以两个相邻的坐标为最小单位分割图形,最后求总面积. #include<stdio. ...
- Acoustic Echo Cancellation (AEC) 回音消除技术探索
回声产生的原因: 本地产生的音频信息通过网络传输到远端, 远端音频信号通过反射再由远端麦克采集到远端系统,再通过IP网络传输本地,本地播放后,在由本地麦克采集到,这就构成了类似闭环正反 ...
- 行业介绍:车载DVD MID 导航用料一般包含国腾LVDS芯片GM8284C/GM8283
车载DVD MID 导航用料一般包含国腾LVDS芯片 GM8284C/GM8283/替代SN75LVDS83,THC63LVDM83C , 音频ES7144/CS4344, 龙讯MHL HDMI芯片 ...
- 解决gsoap中文乱码的问题
解决方法一: 在main函数里初始化soap结构体后加入 soap_set_mode(&soap,SOAP_C_UTFSTRING); 这样所有的C都是utf-8的格式,只要你的win ...
- 菜单工具栏wxPython菜单与工具栏基础示例
这两天一直在学习菜单工具栏之类的问题,上午正好有机会和大家讨论一下. 1.基本的api介绍 Package wx :: Class Menu Type Menu Method Summary Menu ...
- .Net程序员学用Oracle系列(5):三大数据类型
<.Net程序员学用Oracle系列:导航目录> 本文大纲 1.Oracle 数据类型概述 2.字符类型 2.1.字符集 & NLS 2.2.常见的两种字符串 2.3.NCHAR ...
- [原译]在mongoose中对Array Schema进行增删改
原文地址: http://tech-blog.maddyzone.com/node/add-update-delete-object-array-schema-mongoosemongodb 本文为上 ...
- Asp.Net 网站访问人数及在线人数
利用Application对象和Session对象可以统计历史访问人数和当前在线人数. 在会话开始和结束时,一定要进行加锁和解锁操作.由于多个用户可以共享Application对象,因此加锁是必要的, ...
- C语言之算数运算符
一 什么是算数运算符 算术运算符: +: 就是把两个数据相加,得到和 -: 就是把两个数据相减,得到差 *: 就是把两个数据相乘,得到积 /: 就是把两个数据相除,得到商 %: 就是把两个数 ...