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

原文:https://9iphp.com/web/javascript/chrome-devtools-shortcuts.html

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

 

打开DevTools

你可以通过以下任何一种方式来访问DevTools:

  • 打开浏览器右上角的Chrome菜单 Chrome Menu,然后选择“更多工具”–“开发者工具”。
  • 在页面任何元素处点击右键,然后选择“审查元素”。
 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 iconOpt+Click on arrow icon
编辑属性Enter,Double-click on attributeEnter,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 propertyCmd+Click on property
定位到属性值定义处Ctrl+Click on property valueCmd+Click on property value
循环颜色值(rgba,hsl等)Shift+Click on color picker boxShift+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

attributes-icon 模仿元素伪状态(:active,:hover,:focus,:visited)

plus 添加新的样式选择器

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

pause-gray Don’t pause on exceptions

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

pause-purple 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 fingersOpt+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,C

个人补充:这么多快捷键是很难记住的,window下可用F12打开devtools,然后F1打开相应的Settings面板后选择Shortcuts即可查看所有的快捷键。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值