阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Chrome 开发者工具 快捷键

    快捷键

    DevTools 有许多内置快捷键,开发人员可以在他们的日常工作中使用快捷键来节省时间,提高开发效率。下面列出的每个快捷方式和其在 Windows/Linux 和 Mac 相应键位。一些快捷键可用在所有 DevTools,其它的只能用在指定单面板,或者被使用的时候是被打乱的。

    打开 DevTools

    要访问 DevTools,在谷歌 Chrome 浏览器里的任何网页或应用程序,你可以使用这些选项之一:

    • 打开 Chrome 菜单chrome-menu.png,在浏览器窗口的右上角,然后选择工具 > 开发工具
    • 在任何页面元素右键单击并选择检查元素
    Windows Linux Mac
    打开开发者工具 F12, Ctrl + Shift + I Cmd + Opt + I
    切换审查元素模式与浏览器窗口模式 Ctrl + Shift + C Cmd + Shift + C
    打开 DevTools 将面板放到控制台 Ctrl + Shift + J Cmd + Opt + J
    检查(取消停靠第一个,然后按) 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

    Element 面板

    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);
    • 在元素上设置断点:(修改子元素,修改属性,删除节点)
    • 清空控制台

    侧边栏样式

    Windows Linux Mac
    打开直尺 单击 单击
    插入新的属性 在空白空间单击 在空白空间单击
    转至样式规则属性声明中源行 Ctrl + 点击属性 Cmd + 点击属性
    转制属性值声明源行 Ctrl + 点击属性值 Cmd + 点击属性值
    获取颜色定义值 Shift + 点击拾色器对话框 Shift + 点击拾色器对话框
    编辑前一个 / 后一个 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
    • 模拟元素的伪状态(:active, :hover, :focus, :visited)
    • 添加新的样式选择

    Source 面板

    Windows Linux Mac
    暂停 / 恢复脚本执行 F8 , Ctrl + \ F8 , Cmd + \
    跳过下一个函数的调用 F10 , Ctrl +' F10 , Cmd + '
    进入下一个函数的调用 F11 , Ctrl +; F11 , Cmd + ;
    跳出当前函数 Shift + F11 , Ctrl + Shift + ; Shift + F11 ,Cmd + Shift + ;
    选择下一个调用框架 Ctrl + . Opt + .
    选择之前的调用框架 Ctrl + , Opt + ,
    切换断点条件 点击行号 , Ctrl +B 点击行号 , Cmd + B
    编辑断点条件 右击行号 击行号
    删除单组单词 Alt + Delete Opt + Delete
    注释一行或注释选定文本 trl + / Cmd + /
    保存本地修改 Ctrl + S Cmd + S
    跳转到行 Ctrl +G Ctrl + G
    以文件名搜索 Ctrl +O Cmd + O
    跳转至行号 Ctrl +P + 行号 Cmd + P + 行号
    跳转至列 Ctrl + O + 数字 + 数字 Cmd + O + 数字 + 数字
    进入成员 Ctrl + Shift + O Cmd + Shift +O
    关闭活动的标签 Alt + W Opt + W
    运行代码片段 Ctrl + Enter Cmd + Enter

    pause-gray.png 不能暂停异常

    pause-blue.png 暂停所有异常(包括那些被捕获 try / catch 块内)

    pause-purple.png 暂停未捕获的异常(通常是你想要的那个)

    代码编辑器快捷键

    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
    保存时间线数据 Ctrl +S Cmd + S
    载入时间线数据 Ctrl +O Cmd + O

    Profiles 面板

    Windows Linux Mac
    开始 / 停止记录 Ctrl + E Cmd + E

    Console(控制台)

    Windows Linux Mac
    接受提示命令 键盘右 键盘右
    前一条命令行 键盘上 键盘上
    下一条命令行 键盘下 键盘下
    聚焦控制台 Ctrl + | Ctrl +
    清除控制台 Ctrl + L Cmd + K , Opt + L
    多行输入 Shift + Enter Ctrl +Return
    执行 Enter Return

    控制台右击:

    • XMLHttpRequest logging: 打开查看 XHR 日志
    • Preserve log 在导航栏上
    • Filter: 隐藏或显示脚本文件的消息
    • Clear console: 清除控制台

    截屏

    Windows Linux Mac
    放大缩小 Alt + Scroll ,Ctrl +Click and drag with two fingers Opt + Scroll ,Cmd + Click and drag with two fingers
    检查元素的工具 Ctrl + Shift + C Cmd + Shift + C

    调试

    Console(控制台)

    Windows Linux Mac
    放大缩小 Shift + Scroll Shift + Scroll

    Chrome 的其他快捷键

    这里有一些其他的 Chrome 快捷键,这些都浏览器通用的快捷键,并不是 DevTools 内的特有的。查看适用于Windows,Mac 和 Linux的Chrome 的所有快捷键

    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
    在地址栏添加一个 ? 号来执行用默认搜索引擎的关键字搜索 Ctrl + K , Ctrl + E Cmd + K , Cmd + E
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录