首页 » Web技术 » JS/jQuery » 正文

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

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, Ctrl + ECmd + K, Cmd + E

本文共 4 个回复

  • 威客兼职 2015/03/05 14:21

    博主的博客很不错,不知道能不能交换友链呢 :arrow:

  • ian 2015/03/15 01:56

    这篇文章 要赞一下! :razz:

  • hanbing17 2015/03/17 17:27

    要赞一下 :?:

  • 美Win网 2015/06/19 18:27

    相当的实用!学习了!

发表评论