您的位置:首页 > 其它

Chrome 开发者工具(DevTools)中所有快捷方式列表

2017-12-03 15:18 323 查看
【转自:https://9iphp.com/web/javascript/chrome-devtools-shortcuts.html 】

Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间。下面列出了每个快捷键在Windows/Linux及Mac中的对应键。其中一些快捷键对于DevTools全局可用,而另一些则只能在单个面板中使用。


打开DevTools

你可以通过以下任何一种方式来访问DevTools:
打开浏览器右上角的Chrome菜单 

,然后选择“更多工具”–“开发者工具”。
在页面任何元素处点击右键,然后选择“审查元素”。
 Windows / LinuxMac
打开开发者工具F12 , Ctrl + Shift + ICmd + Opt + I
切换审查元素模式与浏览器窗口模式Ctrl + Shift + CCmd + Shift+ C
打开开发者工具并定位到控制台Ctrl + Shift + JCmd + Opt + J
Inspect the Inspector (undock first one and press)Ctrl + Shift + ICmd + Opt + I


所有面板

 Windows / LinuxMac
显示设置对话框? , F1?
下一个面板Ctrl + ]Cmd + ]
上一个面板Ctrl + [Cmd + [
最后一个面板Ctrl + Alt + [Cmd + Opt + [
第一个面板Ctrl + Alt + ]Cmd + Opt + ]
更改停靠位置(测试发现与添加书签冲突)Ctrl + Shift + DCmd + Shift + D
打开设备(Device)模式Ctrl + Shift + MCmd + Shift + M
切换控制台 / 关闭设置对话框EscEsc
刷新页面F5 , Ctrl + RCmd + R
刷新页面(忽略缓存内容)Ctrl + F5 , Ctrl + Shift + RCmd + Shift + R
当前文件或面板查找Ctrl + FCmd + F
所有资源中进行查找Ctrl + Shift + FCmd + Opt + F
按文件名查找 (排除Timeline面板)Ctrl + O, Ctrl + OCmd + O, Cmd + O
放大 (当DevTools获得焦点时)Ctrl + +Shift + +
缩小Ctrl + -Shift + -
恢复默认文字大小Ctrl + 0Shift + 0


Elements面板

 Windows / LinuxMac
撤销更改Ctrl + ZCmd + Z
重做Ctrl + YCmd + Y , Cmd + Shift + Z
导航Up , DownUp , Down
展开/折叠节点Right , LeftRight , Left
展开节点Single-click on arrowSingle-click on arrow
展开/折叠节点及其子元素Ctrl + Alt + Click
on arrow icon
Opt + Click
on arrow icon
编辑属性Enter , Double-click
on attribute
Enter , Double-click
on attribute
隐藏元素HH
切换编辑HTMLF2 
右键点击元素你可以:
更改元素状态(
:active
:hover
:focus
:visited
);
元素上设置断点(更改子元素、更改属性及删除节点);
清空控制台


样式侧边栏(Style Sidebar)

 Windows / LinuxMac
编辑规则Single-clickSingle-click
插入新属性Single-click on whitespaceSingle-click on whitespace
定位到样式属性定义处Ctrl + Click
on property
Cmd + Click
on property
定位到属性值定义处Ctrl + Click
on property value
Cmd + Click
on property value
循环颜色值(rgba,hsl等)Shift + Click
on color picker box
Shift + Click
on color picker box
编辑上/下一个属性Tab, Shift + TabTab, Shift + Tab
增加/减小值Up, DownUp, Down
每次以10增加/减小值Shift + Up, Shift + DownShift + Up, Shift + Down
每次以10增加/减小值PgUp, PgDownPgUp, PgDown
每次以100增加/减小值Shift + PgUp, Shift + PgDownShift + PgUp, Shift + PgDown
每次以0.1增加/减小值Alt + Up, Alt + DownOpt + Up, Opt + Down

 模仿元素伪状态(
:active
:hover
:focus
:visited
)


 添加新的样式选择器


Sources 面板

 Windows / LinuxMac
暂停/恢复脚本运行F8, Ctrl + \F8, Cmd + \
Step over next function callF10, Ctrl + 'F10, Cmd + '
Step into next function callF11, Ctrl + ;F11, Cmd + ;
Step out of current functionShift + F11, Ctrl + Shift + ;Shift + F11, Cmd + Shift + ;
Select next call frameCtrl + .Opt + .
Select previous call frameCtrl + ,Opt + ,
Toggle breakpoint conditionClick on line number, Ctrl+ BClick on line number, Cmd + B
Edit breakpoint conditionRight-click on line numberRight-click on line number
Delete individual wordsAlt + DeleteOpt + Delete
Comment a line or selected textCtrl + /Cmd + /
Save changes to local modificationsCtrl + SCmd + S
Save all changesCtrl + Alt + SCmd + Opt + S
Go to lineCtrl + GCtrl + G
Search by filenameCtrl + OCmd + O
Jump to line numberCtrl + P + :<number>Cmd + P + :<number>
Jump to columnCtrl + O + :<number> + :<number>Cmd + O + :<number> + :<number>
Go to memberCtrl + Shift + OCmd + Shift + O
Close active tabAlt + WOpt + W
Run snippetCtrl + EnterCmd + Enter

 Don’t pause on exceptions


 Pause on All exceptions (including those caught within
try/catch blocks)


 Pause on uncaught exceptions (usually the one you
want)


代码编辑快捷键

 Windows / LinuxMac
跳转到匹配位置Ctrl + M
跳转到指定行Ctrl + P + :<number>Cmd + P + :<number>
跳转到指定列Ctrl + O + :<number> + :<number>Cmd + O + :<number> + :<number>
切换注释Ctrl + /Cmd + /
选择下一个出现位置Ctrl + DCmd + D
撤销上一次操作Ctrl + UCmd + U


TimeLine 面板

 Windows / LinuxMac
启动/停止记录Ctrl + ECmd + E
保存timeline数据Ctrl + SCmd + S
加载timeline数据Ctrl + OCmd + O


Profiles 面板

 Windows / LinuxMac
启动/停止记录Ctrl + ECmd + E


Console 控制台

 Windows / LinuxMac
Accept suggestionRightRight
上一个命令/行UpUp
下一条命令/行DownDown
控制台获取焦点Ctrl + `Ctrl + `
清空控制台Ctrl + LCmd + K, Opt + L
多行输入Shift + EnterCtrl + Return
执行EnterReturn
右键点击控制台:
XMLHttpRequest记录:打开查看XHR的日志
导航处切换保存日志
过滤:隐藏与显示脚本文件的信息
清空控制台:清空控制台所有信息


Screencasting

 Windows / LinuxMac
Pinch zoom in and outAlt + Scroll,Ctrl + Click
and drag with two fingers
Opt + Scroll, Cmd + Click
and drag with two fingers
Inspect element toolCtrl + Shift + CCmd + Shift + C


Emulation

 Windows / LinuxMac
Pinch zoom in and outShift + ScrollShift + Scroll


其他Chrome快捷方式

下面是一些浏览器中非常有用的额外的快捷方式(附:所有Windows/Linux/Mac快捷方式)
 Windows / LinuxMac
查找下一个Ctrl + GCmd + G
查找上一个Ctrl + Shift + GCmd + Shift + G
打开一个隐身模式的新窗口Ctrl + Shift + NCmd + Shift + N
切换是否显示书签栏Ctrl + Shift + BCmd + Shift + B
打开历史记录页面Ctrl + HCmd + Y
打开下载记录页面Ctrl + JCmd + Shift + J
打开浏览器任务管理器Shift + ESCShift + ESC
标签页历史下一页Alt + RightOpt + Right
标签页历史上一页Backspace, Alt + LeftBackspace, Opt + Left
选中地址栏F6, Ctrl + L, Alt + DCmd + L, Opt + D
地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎)Ctrl + K, Ctrl + ECmd + K, Cmd + E
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: