Chrome (开发者工具)快捷键
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 (开发者工具)快捷键的更多相关文章
- 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...
- 神器——Chrome开发者工具(一)
这里我假设你用的是Chrome浏览器,如果恰好你做web开发,或者是比较好奇网页中的一些渲染效果并且喜欢折腾,那么你一定知道Chrome的开发者工具了.其实其他浏览器也有类似工具,比如Firefox下 ...
- 前端开发必备之Chrome开发者工具(一)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...
- 使用chrome开发者工具中的network面板测量网站网络性能
前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...
- Chrome 开发者工具中的命令菜单
单 大家对命令菜单(Command Menu)应该都不陌生.目前主流的编辑器中都内置了对该功能的支持.在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ct ...
- 前端开发必备之Chrome开发者工具(上篇)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...
- (转)Chrome开发者工具不完全指南(一、基础功能篇)
本篇转载自卖烧烤夫斯基,并做了小部分的修改. 原文地址:Chrome开发者工具不完全指南(一.基础功能篇) 原作者:卖烧烤夫斯基 就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生 ...
- Chrome开发者工具 debug 调试
Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...
- Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理)
Chrome 开发者工具(DevTools)中所有快捷方式列表(已整理) 前言 Chrome DevTools提供了一些内置的快捷键,开发者利用这些快捷键可以节省常工作中很多日的开发时间.下面列出了每 ...
- [转帖]CHROME开发者工具的小技巧
CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论 64,08 ...
随机推荐
- python logging模块,升级print调试到logging。
简介: 我们在写python程序的时候,很多时候都有bug,都是自己写的,自己造的孽,又的时候报错又是一堆,不知道是那部分出错了. 我这初学者水平,就是打print,看哪部分执行了,哪部分没执行,由此 ...
- RabbitMQ 设置消息的优先级
在RabbitMQ中,可以设置消息的优先级,也就相当于在队列中置顶某条消息,让某个消息优先得到处理的功能. 既然是设置消息的优先级,那么就是针对生产者,也就是消息发布端. 设置消息的优先级一共有2个步 ...
- 三:使用docker-machine安装虚拟机上的docker
1.docker安装之后自带docker-machine:(需要win10专业版或mac) 2.如何远程管理一个docker-machine?(以下是Mac环境) 关闭本地的docker应用.运行do ...
- selenium登录界面,创建表单并填写提交
#! python3 # -*- coding:utf8 -*- # https://selenium-python.readthedocs.io/api.html#selenium.webdrive ...
- Sql Server 中 根据列名查询表名
已知列名 ELEMENT_ID ,查询所属表名称 Select O.name objectName, C.name ColumnName from sys.columns C inner join s ...
- memset详解 设置无穷大INF
memest原型 (please type "man memset" in your shell) void *memset(void *s, int c, size_t n); ...
- tf.nn.conv2d
tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) input: 指需要做卷积的输入图像,它 ...
- 百度地图API示例:鼠标绘制点线面 控件修改
需求 :在使用地图API时,绘制工具栏控件想自己选择哪些要,哪些不要. 可以查看相应的类:官网地址: http://api.map.baidu.com/library/DrawingManager/1 ...
- <Spark><Programming><Key/Value Pairs><RDD>
Working with key/value Pairs Motivation Pair RDDs are a useful building block in many programs, as t ...
- Nodejs安装express提示不是内部或外部命令
安装nodejs安装包后,通过npm安装express后,运行express提示" express"不是内部或外部命令. c:\express -t ejs web 原因是版本问题 ...