Devtools(1)打开和快捷键

关于Chrome的开发工具的使用.

主要组成面板(panel):

• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Lighthouse
• Recorder

打开方式

1. 单击鼠标右键并点击检查.

2. Control+Shift+c打开Element面板(c - css).

3. F12.

4. Control+Shift+j打开Console面板(j - javascript).

5. 如果你之前已经打开过某个面板并将devtools关闭的话,可以通过Control+Shift+i再次打开.

6. 鼠标点击Chrome的三个点->更多工具->开发者工具.

7. 命令行通过chrome --auto-open-devtools-for-tabs命令(已经配置环境变量或者输入Chrome所在的路径)设置为每个页面自动打开开发者工具.

   上面的命令要生效的话需要当前没有打开任何Chrome的实例且这种效果会持续到退出Chrome,而且之后打开的chrome实例都会有这种效果.(chrome --incognito可打开无痕模式)

Mac的打开方式和上面一样(Control对应Command,Shift对应Option),以下的一些快捷键也是一样.

命令菜单和快捷键

打开之后应该是这样:

可输入查找命令并执行, 也可删除>并输入?查看更多选项:

快捷键(keyboard shortcuts):

• 全局快捷键(所有面板都可使用)
• 局部快捷键(针对特定面板)

全局:

作用	Mac	Windows/Linux
打开设置	? or Function+F1	?orF1
移动到下一面板	Cmd+]	Ctrl+]
移动到上一面板	Cmd+[	Ctrl+[
选择devtools的位置(docking position)	Cmd+Shift+D	Ctrl+Shift+D
调整页面模式(移动端,pc端)	Cmd+Shift+M	Ctrl+Shift+M
审查页面元素	Cmd+Shift+C	Ctrl+Shift+C
打开命令菜单	Cmd+Shift+P	Ctrl+Shift+P
打开drawer	esc	esc
正常重新加载(Normal reload,使用之前已经加载过的一些文件重新渲染,缓存)	Cmd+R	F5orCtrl+R
Hard reload(不用缓存,重新加载一切)	Cmd+Shift+R	Ctrl+F5orCtrl+Shift+R
在当前面板查找文本(Audits,Application,Security面板不适用)	Cmd+F	Ctrl+F
在Drawer中打开search标签页	Cmd+Option+F	Ctrl+Shift+F
打开Sources面板中的文件	Cmd+OorCmd+P	Ctrl+OorCtrl+O
放大(Zoom in)	Cmd+Shift++	Ctrl+Shift++
缩小(Zoom out)	Cmd+-	Ctrl+-
使面板回到原来大小	Cmd+0	Ctrl+0
运行代码片段(run snippet)	Cmd+O打开命令菜单输入!再输入脚本的名称最后按回车	同左

Elements面板快捷键:

作用	Mac	Windows
undo	Cmd+Z	Ctrl+Z
redo	Cmd+Shift+Z	Ctrl+Z
选择当前已被选择的元素的上一个或下一个元素	up arrow/down arrow	同左
展开当前选择的dom结点,如果已经展开则选择当前结点下的元素	right arr	同左
和上面的相反	left arr	同左
编辑当前结点	enter	enter
通过enter进入编辑结点后切换另一个属性的编辑	Tab/Shift+Tab	同左
隐藏当前选择的结点	h	h
编辑页面的html(enter编辑的是属性)	Function+F2	F2

Elements面板下的styles:

作用	Mac	Win/Linux
跳转到css源码某个属性对应的源码	按Cmd鼠标左击css属性	按Ctrl鼠标左击css属性
切换RGBA,HSLA,Hex形式表示的颜色值	按住Shift点击颜色所对应的方块	同左
属性值自增或自减0.1	点击对应的值并按Option+uporOpt+down	同左
属性值自增或自减1	upordown	同左
~10	Shift+uporShift+down	同左
~100	Cmd+uporCmd+down	Ctrl+uporCtrl+down
切换degrees(deg),gradians(grad),radians(rad)表示的角度值	按住Shift点击角度对应的方块	同左
角度++或–1	点击角度对应的方块按upordown	同左
角度+=或-=10	除了点击角度和上面属性值的快捷键一样	同左

Sources面板:

作用	Mac	Win/Linux
暂停脚本执行(如果正在运行)或恢复执行(如果已经暂停)	F8orCmd+\	同左
如果要执行的代码是一个函数调用就直接执行整个函数不步入(Step over)	F10orCmd+'	同左
步入函数(Step into)	F11orCmd+;	同左
步出当前函数(Step out)	Shift+F11orCmd+shift+;	同左
Continue to a certain line of code while paused	Hold Cmdand then click the line of code	同左
选择当前已选择的上一个/下一个栈帧	Control+./Control+,	Ctrl+./Ctrl+,
save changes to local modifications	Cmd+s	Ctrl+s
save all changes	Cmd+Opt+S	Ctrl+Alt+S
跳转到某一行	Control+G	Control+G
跳转到某个函数(html,js)或规则集(css)	Cmd+Shift+O然后键入要查找的关键字	同左
Close the active tab	Opt+W	Alt+W

代码编辑器快捷键:

作用	Mac	Win/Linux
在某行添加或移除断点	光标移动到要添加或删除的行按Cmd+B	同左
括号匹配	Control+M	Control+M
注释	Cmd+/	Control+/
Select/de-select the next occurence of whatever word the cursor is on. Each occurrence is highlighted simultaneously	Cmd+D/Cmd+U	同左

Performance面板:

action	Mac	Win/Linux
开始/结束记录(recording)	Cmd+E	Ctrl+E
保存记录	Cmd+S	Ctrl+S
加载记录	Cmd+O	Ctrl+O

Memory面板:

开始/结束记录:Ctrl+E.

Console面板:

Action	Mac	Win/Linux
自动补全	Taborright arr	同左
取消自动补全	esc	esc
清除控制台	Cmd+KorOpt+L	Ctrl+L
focus the console	Control+反引号	Ctrl+反引号
切换之前输入过的代码	up arr /down arr	同左
输入多行代码	Command+Reture	Shift+Enter
一个对象被输出到控制台后展开该对象的所有属性	按住Alt点击小三角形	同左也是Alt

翻译自:
https://developer.chrome.com/docs/devtools/shortcuts/