IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    轩枫发表于 2015-06-03 13:12:34
    love 0

    前言

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

    具体介绍

    打开DevTools

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

    • 打开浏览器右上角的Chrome菜单chrome-menu,然后选择“更多工具”–“开发者工具”。
    • 在页面任何元素处点击右键,然后选择“审查元素”。

    Windows / Linux Mac
    打开开发者工具 F12,Ctrl+Shift+I Cmd+Opt+I
    切换审查元素模式与浏览器窗口模式 Ctrl+Shift+C Cmd+Shift+C
    打开开发者工具并定位到控制台 Ctrl+Shift+J Cmd+Opt+J
    Inspect the Inspector (undock first one and press) Ctrl+Shift+I Cmd+Opt+I

    所有面板

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

    Elements面板

    Windows / Linux Mac
    撤销更改 Ctrl+Z Cmd+Z
    重做 Ctrl+Y Cmd+Y,Cmd+Shift+Z
    导航 Up,Down Up,Down
    展开/折叠节点 Right,Left Right,Left
    展开节点 Single-click on arrow Single-click on arrow
    展开/折叠节点及其子元素 Ctrl+Alt+Click on arrow icon Opt+Click on arrow icon
    编辑属性 Enter,Double-click on attribute Enter,Double-click on attribute
    隐藏元素 H H
    切换编辑HTML F2

    右键点击元素你可以:

    • 更改元素状态(:active,:hover,:focus,:visited);
    • 元素上设置断点(更改子元素、更改属性及删除节点);
    • 清空控制台

    样式侧边栏(Style Sidebar)

    Windows / Linux Mac
    编辑规则 Single-click Single-click
    插入新属性 Single-click on whitespace Single-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+Tab Tab,Shift+Tab
    增加/减小值 Up,Down Up,Down
    每次以10增加/减小值 Shift+Up,Shift+Down Shift+Up,Shift+Down
    每次以10增加/减小值 PgUp,PgDown PgUp,PgDown
    每次以100增加/减小值 Shift+PgUp,Shift+PgDown Shift+PgUp,Shift+PgDown
    每次以0.1增加/减小值 Alt+Up,Alt+Down Opt+Up,Opt+Down

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

    plus添加新的样式选择器

    Sources 面板

    Windows / Linux Mac
    暂停/恢复脚本运行 F8,Ctrl+ F8,Cmd+
    Step over next function call F10,Ctrl+' F10,Cmd+'
    Step into next function call F11,Ctrl+; F11,Cmd+;
    Step out of current function Shift+F11,Ctrl+Shift+; Shift+F11,Cmd+Shift+;
    Select next call frame Ctrl+. Opt+.
    Select previous call frame Ctrl+, Opt+,
    Toggle breakpoint condition Click on line number,Ctrl+B Click on line number,Cmd+B
    Edit breakpoint condition Right-click on line number Right-click on line number
    Delete individual words Alt+Delete Opt+Delete
    Comment a line or selected text Ctrl+/ Cmd+/
    Save changes to local modifications Ctrl+S Cmd+S
    Save all changes Ctrl+Alt+S Cmd+Opt+S
    Go to line Ctrl+G Ctrl+G
    Search by filename Ctrl+O Cmd+O
    Jump to line number Ctrl+P+: Cmd+P+:
    Jump to column Ctrl+O+:+: Cmd+O+:+:
    Go to member Ctrl+Shift+O Cmd+Shift+O
    Close active tab Alt+W Opt+W
    Run snippet Ctrl+Enter Cmd+Enter

    pause-grayDon’t pause on exceptions

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

    pause-purplePause on uncaught exceptions (usually the one you want)

    代码编辑快捷键

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

    TimeLine 面板

    Windows / Linux Mac
    启动/停止记录 Ctrl+E Cmd+E
    保存timeline数据 Ctrl+S Cmd+S
    加载timeline数据 Ctrl+O Cmd+O

    Profiles 面板

    Windows / Linux Mac
    启动/停止记录 Ctrl+E Cmd+E

    Console 控制台

    Windows / Linux Mac
    Accept suggestion Right Right
    上一个命令/行 Up Up
    下一条命令/行 Down Down
    控制台获取焦点 Ctrl+ Ctrl+
    清空控制台 Ctrl+L Cmd+K,Opt+L
    多行输入 Shift+Enter Ctrl+Return
    执行 Enter Return

    右键点击控制台:

    • XMLHttpRequest记录:打开查看XHR的日志
    • 导航处切换保存日志
    • 过滤:隐藏与显示脚本文件的信息
    • 清空控制台:清空控制台所有信息

    Screencasting

    Windows / Linux Mac
    Pinch zoom in and out Alt+Scroll,Ctrl+Click and drag with two fingers Opt+Scroll,Cmd+Click and drag with two fingers
    Inspect element tool Ctrl+Shift+C Cmd+Shift+C

    Emulation

    Windows / Linux Mac
    Pinch zoom in and out Shift+Scroll Shift+Scroll

    其他Chrome快捷方式

    下面是一些浏览器中非常有用的额外的快捷方式(附:所有Windows/Linux/Mac快捷方式)

    Windows / Linux Mac
    查找下一个 Ctrl+G Cmd+G
    查找上一个 Ctrl+Shift+G Cmd+Shift+G
    打开一个隐身模式的新窗口 Ctrl+Shift+N Cmd+Shift+N
    切换是否显示书签栏 Ctrl+Shift+B Cmd+Shift+B
    打开历史记录页面 Ctrl+H Cmd+Y
    打开下载记录页面 Ctrl+J Cmd+Shift+J
    打开浏览器任务管理器 Shift+ESC Shift+ESC
    标签页历史下一页 Alt+Right Opt+Right
    标签页历史上一页 Backspace,Alt+Left Backspace,Opt+Left
    选中地址栏 F6,Ctrl+L,Alt+D Cmd+L,Opt+D
    地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎)

    参考自:Specs' Blog-9IPHP,就爱PHP



沪ICP备19023445号-2号
友情链接