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

https://www.cnblogs.com/davidwang456/p/6932452.html

常用

文件内搜索 ctrl+f

使用快捷键 ctrl+shift+f, 就会进入到全局搜索模式

打开文件:ctrl+o

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

打开DevTools

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

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

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

 添加新的样式选择器

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 + :<number> Cmd + P + :<number>
Jump to column Ctrl + O + :<number> + :<number> Cmd + O + :<number> + :<number>
Go to member Ctrl + Shift + O Cmd + Shift + O
Close active tab Alt + W Opt + W
Run snippet Ctrl + Enter Cmd + 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 / Linux Mac
跳转到匹配位置 Ctrl + M
跳转到指定行 Ctrl + P + :<number> Cmd + P + :<number>
跳转到指定列 Ctrl + O + :<number> + :<number> Cmd + O + :<number> + :<number>
切换注释 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
地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎) Ctrl + K, Ctrl + E Cmd + K, Cmd + E

Chrome (开发者工具)快捷键的更多相关文章

  1. 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  2. 神器——Chrome开发者工具(一)

    这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...

  3. 前端开发必备之Chrome开发者工具(一)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  4. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  5. Chrome 开发者工具中的命令菜单

    单 大家对命令菜单(Command Menu)应该都不陌生.目前主流的编辑器中都内置了对该功能的支持.在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ct ...

  6. 前端开发必备之Chrome开发者工具(上篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  7. (转)Chrome开发者工具不完全指南(一、基础功能篇)

    本篇转载自卖烧烤夫斯基,并做了小部分的修改. 原文地址:Chrome开发者工具不完全指南(一.基础功能篇) 原作者:卖烧烤夫斯基 就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生 ...

  8. Chrome开发者工具 debug 调试

    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...

  9. Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理)

    Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理) 前言 Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每 ...

  10. [转帖]CHROME开发者工具的小技巧

    CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论  64,08 ...

随机推荐

  1. 尚学堂java答案解析 第三章

    本答案为本人个人编辑,仅供参考,如果读者发现,请私信本人或在下方评论,提醒本人修改 一.选择题 1.A 2.BD 解析:switch的的判断表达式的数据类型:byte  short   int  ch ...

  2. Vue + Element UI 实现权限管理系统(第三方图标库)

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  3. [HDU3436]Queue-jumpers

    Problem 有一个数列,从1排列到n,然后有Q个操作 Top x:将第x个数放到序列的最前面 Query x:询问x这个数在第几位 Rank x:询问第x位数是什么 Solution n非常的大, ...

  4. 7.4 C++标准模板库(STL)的概念

    参考:http://www.weixueyuan.net/view/6401.html 总结:  标准模板库为C++提供了完善的数据结构及算法. 标准模板库包括三部分:容器.算法和迭代器. 容器是对象 ...

  5. MyEclipse教程:使用UML创建模块库——第二部分(一)

    MyEclipse 在线订购年终抄底促销!火爆开抢>> [MyEclipse最新版下载] UML2建模文件存储在建模存储库中,建模可用于生成Java代码,或者可以从代码生成模型. 本教程介 ...

  6. 用MFC库函数AfxBeginThread()来创建线程

    在进行多线程程序设计的时候,我们经常用到AfxBeginThread函数来启动一条线程该函数使用起来非常的简单方便,其定义如下: 1.函数原型 CWinThread* AfxBeginThread( ...

  7. python 字典,列表,集合,字符串,基础进阶

    python列表基础 首先当然是要说基础啦 列表list 1.L.append(object) -> None 在列表末尾添加单个元素,任何类型都可以,包括列表或元组等 2.L.extend(i ...

  8. python pygame实现简单的网游

    此示例为简单的实现游戏服务器端和客户端的消息同步,使用自定定义协议,引入了twisted网络框架,还有诸多不足(其实就是半成品). 资源下载地址: http://download.csdn.net/d ...

  9. PAP认证(单向、双向)

    实验要求:掌握PAP单向.双向认证 拓扑如下: 单向验证 R1(认证方)enable 进入特权模式configure terminal 进入全局模式hostname R1 设置主机名interface ...

  10. 【转载】 Caffe BN+Scale层和Pytorch BN层的对比

    原文地址: https://blog.csdn.net/elysion122/article/details/79628587 ------------------------------------ ...