本文采用意译,这是原文
1.元素拖拽
在Elements
面板,你可以对元素进行任意拖拽操作
2.获取当前选中元素
在Elements
面板选中一个元素之后,在Console
中输入$0
可以获取到选中元素的引用
如果你使用jQuery
,那么输入$($0)
,可以获取当前元素的jQuery
对象并使用相关API
3.在Console
面板中使用最近一次操作值
在Console
面板中,使用$_
变量引用上一次操作返回值
4.添加样式和改变状态
在Elemetns
面板的Styles
面板中,有两个很有用的按钮
第一个,你可以为你选择的元素添加新样式
第二个,如果选择元素样式有伪类,你可以任意触发它的伪类样式
5.改变样式并保存
在Elemetns
面板的Styles
面板中,你可以对选择的元素样式进行修改,然后点击文件名,进行保存
操作
这个技巧不适用于使用了+
选择器和element.style
样式内容
6.为选中的元素截图
在Elements
标签中,选择一个元素,按下cmd-shift-p
(windows
则为ctrl-shift-p
)组合键,搜索并选择Capture node screenshot
进行保存操作
7.使用CSS选择器查找元素
在Elements
面板中,按下cmd-f
(windows
则为ctrl-p
)组合键,显示查询框
你可以输入字符串
去在整个页面查找,或者输入css
选择器去查找
8.Console
的代码换行
在Console
面板中调试多行代码时,使用shift-enter
组合键进行换行,enter
键将直接执行代码
9.定位
在调试器面板中:
cmd-o
(windows
则为ctrl-o
)组合键,会列出当前页面加载的资源,选择即定位该资源cmd-shift-o
(windows
则为ctrl-shift-o
)组合键,会列出当前选中文件的符号列表(属性,方法,类等等)ctrl-g
对当前选中文件代码行进行定位
10.监听表达式
把需要监听的变量添加至监听表达式列表中
,避免在程序中反复的console.log
同一个变量进行debug
11.XRH/Fetch
调试
找到并打开XHR/Fetch Breakpoints
面板,添加需要拦截的请求url
12DOM
调试
在Elements
面板中,对选中的元素右键
,启用Break on -> subtree modifications
,任何改变该元素子节点内容的js
操作将会被拦截