Chrome开发者工具

• 官网：https://developer.chrome.com/

简介

• Chrome 开发者工具 (Chrome DevTools) 是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。

• Chrome DevTools 是辅助开发者进行 Web 开发的重要调试工具，DevTools 是 Chromium 的一部分，可以作为独立项目被 Electron 等容器集成。DevTools 主要分为四部分

  • Frontend：调试器前端，默认由 Chromium 内核层集成
  • Backend：调试器后端，Chromium、V8 或 Node.js
  • Protocol：调试协议
  • Message Channels：消息通道，包括：Embedder Channel、WebSocket Channel、Chrome Extensions Channel、USB/ADB Channel

主要功能

面板	作用
元素面板element	使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面
控制台面板console	在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互
源代码面板source	在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器
网络面板network	使用网络面板了解请求和下载的资源文件并优化网页加载性能
性能面板performance	使用性能面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能
内存面板memory	如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏
应用面板application	使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表
安全面板security	使用安全面板调试混合内容问题，证书问题等等
LightHouse面板	网站性能测评工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。

• 除了这些主要的面板，还有几个功能
  • 设备切换：使用设备模式可以模拟移动设备视口、限制网络流量、限制 CPU 占用率、模拟地理定位、设置屏幕方向
  • 元素检查：定位到元素，显示其css表达式及样式
  • 设置：通过?打开

快捷键 shortcut

个人觉得最重要的是

快捷键	作用
CTRL+SHIFT+I	打开开发者工具
ALT+R	重载工具
?	打开设置
CTRL+SHIFT+P	运行命令
CTRL+F5	去缓存刷新
esc	打开控制台

命令行 command line

• ctrl+shift+p 快捷打开

• 出现run >才可以输入命令

• 如果是删除了>就会出现open，那可以手工补>

• 所有命令都可以认为是替代操作的方式而已，换言之就是所有的操作都可以用命令来替代

• 很多show命令用了之后就会对应出现一个hide的命令

• 很多命令都很长，只需输入关键字即可

常用命令

• 截图

  • capture area screenshot：区域截图
  • capture full size screenshot：长截图
  • capture node screenshot：节点截图
  • capture screenshot：当前页截图

• 工具打开视图：当你在某个视图的时候对应命令无法显示

  • dock to bottom
  • dock to left
  • dock to right
  • undock into separate window

Panel

命令	含义
show application	显示应用
show css overview	显示css概览
show console	显示控制台
show elements	显示元素面板
show javascript profiler	显示javascript性能剖析器
show layers	显示图层
show lighthouse	显示lighthouse
show media	显示媒体
show memory	显示内存
show network	显示网络
show performance	显示性能
show security	显示安全
show sources	显示来源

Drawer

命令	含义
focus debuggee	焦点调试对象
show animations	显示动画
show changes	显示改变
show console	显示控制台
show coverage	显示覆盖范围
show developer resources	显示开发者资源
show issues	显示问题
show memory inspector	显示内存检查器
show network conditions	显示网络状况
show network request blocking	显示网络请求屏蔽
show performance monitor	显示性能监视器
show rendering	显示渲染
show search	显示搜索
show sensors	显示传感器工具
show webaudio	显示webautdio
show webauthn	显示webauthn
show what’s new	显示chrome最新改变
toggle drawer	开关抽屉栏

Appearance

• 关注中英文切换即可
• 中文下输入english
• 英文下输入中文即可

console控制台

命令	含义	快捷键
preserve log upon navigation	在浏览时保留日志
only show messages from the current context(top,iframe,worker,ext)	仅显示来自上下文(top/iframe/worker/扩展程序)的消息
hide network messages	隐藏网络消息
do not treat evaluation as user activation	请勿将评估视为用户激活行为
do not show CORS errors in console	不要在控制台中显式CORS错误
do not group similar messages in console	不要对控制台中的类似消息分组
do not eagerly evaluate console prompt text	不及时评估控制台提示文字
do not autocomplete from history	不根据历史记录自动补全
create live expression	创建实时表达式
clear console history	清除控制台历史
show console	显示控制台	CTRL+`
show timestamps	显示时间戳

debugger调试程序

命令	含义
disable javascript	停用JavaScript
do not capture async stack traces	不捕获异步堆栈轨迹
pause on exceptions	在遇到异常时暂停

elements

命令	含义
disable dom word wrap	停用dom自动换行
hide html comments	隐藏HTML注释
select an element in the page to inspect it	检查网页中的元素	CTRL+SHIFT+C
show accessibility	显示无障碍功能
show DOM breakpoints	显示DOM断点
show event listeners	显示事件监听器
show layout	显示布局工具
show properties	显示属性工具

global

命令	含义	快捷键
auto-open devtools for popups	为弹出式窗口自动打开DEVTOOLS
cancel search	取消搜索	ESC
dock to bottom	停靠在底部
dock to left	停靠在左侧
dock to right	停靠在右侧
find next result	查找下一个结果	CTRL+G
find previous result	查找上一个结果	CTRL+SHIFT+G
next panel	下一个面板	CTRL+[
open file	打开文件	CTRL+P
previous panel	上一个面板	CTRL+[
reload devtools	重载devtools	ALT+R
reset zoom level	重置缩放级别	CTRL+0
restore last dock position	恢复上一个停靠位置	CTRL+SHIFT+D
run command	荤腥命令	CTRL+SHIFT+P
search in panel	在面板中搜索	CTRL+F
zoom in	缩小	CTRL++
zoom out	放大	CTRL±

grid

命令	含义
do not extend grid lines	不延长网格线
do not show grid named areas	不要显式网格命名区域
do not show grid track sizes	不显示网格轨迹大小
hide line labels	隐藏网格线标签
show line names	显式网格线名称

help

命令	含义
release notes	版本发布说明
report a devtools issue	报告devtools的问题
report a translation issue	报告翻译问题

mobile

命令	含义	快捷键
show device frame	显示设备边框
show media queries	显示媒体查询
show rulers	显示标尺
toggle device toolbar	显示/隐藏设备工具栏	CTRL+SHITF+M

navigation

命令	含义	快捷键
hard reload page	强制重载网页	CTRL+SHIFT+R
reload page	重载网页	CTRL+R

network

命令	含义	快捷键
go offline	转为离线模式
go online	转为在线模式
group network log items by frame	按框架对网络日志内容进行分组
hide request details	隐藏请求详情	ESC
preserve log on page reload/navigation	重载/浏览网页时保留日志
search	搜索	CTRL+F
show search	显示搜索工具
block ads on this site	屏蔽此网站上的广告
color code by resource type	按资源类型划分的颜色代码
disable cache(while devtools is open)	停用缓存（当开发者工具打开时）
enable fast 3G throttling	启用快速3G节流
enable network request blocking	启用网络请求屏蔽功能
enable slow 3G throttling	启用低速3G节流
stop recording network log	停止录制网络日志	CTRL+E

performance

命令	含义
collect garbage	回收垃圾
instrument coverage	插桩覆盖范围
scroll	滚动
start instrumenting coverage and reload page	开始检测覆盖率并重载网页

resources

命令	含义
enable override network requests
clear site data	清除网站数据
clear site data (including third-party cookies)	清除网站数据（包括第三方cookie）

持久性

命令	含义
enable override network requests	启用覆盖网络请求

rendering渲染

命令	含义
disable AVIF format	停用AVIF格式
disable JPEG XL format	停用JPEG XL格式
disable WebP format	停用WebP格式
disable local fonts	停用本地自提
Emulate CSS prefers-color-scheme: dark	模拟CSSprefers-color-scheme: dark
Emulate CSS prefers-color-scheme: light	模拟CSSprefers-color-scheme: light
Emulate CSS prefers-reduced-motion: reduce	模拟CSSprefers-reduced-motion: reduce
Emulate CSS print media type	模拟CSS打印媒体类型
Emulate CSS screen media type	模拟CSS屏幕媒体类型
Emulate a focused page	模拟所聚焦的网页
Emulate achromatopsia	模拟全色盲
Emulate auto dark mode	模拟自动深色模式
Emulate blurred vision	模拟视力模糊
Emulate deuteranopia	模拟绿色盲
Emulate protanopia	模拟红色盲
Emulate tritanopia	模拟蓝色盲
Highlight ad frames	突出显示广告框架
show core web vitals overlay	显示核心网页指标叠加层
show frames per second(FPS) meter	显示每帧FPS计量器
show hit-test borders	显示命中测试边界
show layer borders	显示图层边框
show layout shift regions	显示布局偏移区域
show paint flashing rectangles	显示突出显示的矩形绘制区域
show scroll performance bottlenecks	显示滚动性能瓶颈

screenshot

命令	含义
capture area screenshot	区域截图
capture full size screenshot	长截图
capture node screenshot	节点截图
capture screenshot	当前屏幕截图

sensors

命令	含义
sensors	传感器

settings

命令	含义	快捷键
documentation	文档
settings	设置	F1
shortcuts	快捷键
show devices	显示设备
show experiments	显示实验
show ignore list	显示忽略列表
show locations	显示位置
show preferences	显示偏好设置
show shortcuts	显示快捷键
show throttling	显示节流
show workspace	显示工作区

sources来源

命令	含义	快捷键
add folder to workspace	向工作区添加文件夹
automatically reveal files in sidebar	自动在边栏中显示文件
close all	全部关闭
create new snippet	创建新代码段
disable css source maps	停用css源代码映射
disable javascript source maps	停用JavaScript源代码映射
disable autocompletion	停用自动补全功能
disable bracket matching	停用括号匹配
disallow scrolling past end of file	不允许滚动范围超出文件
do not detect indentation	不检测缩进
do not display variable values inline while debugging	调试时不以内嵌方式显示变量值
do not focus source panel when triggering a breakpoint	触发断点后不聚集于来源面板
do not show whitespace characters	不显示空格字符串
enable code folding	启用代码折叠功能
enable tab moves focus	启用通过tab键移动焦点功能
search	搜索	CTRL+SHIFT+F
search in anonymous and content scripts	在匿名和内容脚本中搜索
set indentation to 2 spaces	将缩进设为2个空格
set indentation to 8 spaces	将缩进设为8个空格
set indentation to tab spaces	将缩进设为tab键（制表符）
show csp violation breakpoints	显示csp违规断点
show content scripts	显示内容脚本
show dom breakpoints	显示dom断点
show event listener breakpoint	显示事件监听器断点
show filesystem	显示文件系统工具
show global listeners	显示全局监听器
show overrides	显示覆盖？
show page	显示网页标签页
show snippets	显示代码段工具
show XHR/fetch breakpoints	显示XHR/提取断点
show all whitespace characters	显示所有空格字符
show trailing whitespace characters	显示尾随空格字符

切换设备

• 切换设备
• 实时响应
• 分辨率调整
• 限速
• 旋转设备

元素面板 element

• 探针

控制台面板console

菜单栏

• 点击菜单栏的按钮
  ，或者ctrl+l可以清空console界面显示的内容（但你仍然可以找到历史记录）

  • 还可以执行clear()、console.clear()来清空

• 可以发现当前页有哪些frame
  

• 
  创建一个实时的表达式

• 
  ，过滤日志用

• 显示的日志级别

调试js

• 支持任何js代码，回车执行，tab自动补齐，通过↑↓箭头来翻阅历史命令

console.log()

• console还支持error，warn，

inspect

• 在 Console 中输入 inspect() 参数是 DOM 元素或者 JS 引用，可以跳转到 Elements 面板并且定位到你选择的那个 DOM 节点那。

dir

• 得到对象的所有方法（及值）
• 如dir(document)
• 如dir(window)

document

• document.designMode = ‘on’ 或者document.body.contentEditable=“true” 可以让你实时的编辑网页

特殊符号

• $(selector)：document.querySelector()的简写
  • 实测：论坛输入KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲ls_username')无法…$()跟css selecotr的语法是符合的
• $$(selectors)：document.querySelectorAll()的简写
• $x(xpath-expression)：通过 XPath 的方式查看元素
• $0是最近一次访问的DOM或堆对象
  • 先在elements面板中定位一个元素
  • 再到console中输入$0就能得到这个对象
• $_是你上个表达式的结果
  • 先输入2+2得到4
  • $_就是4

网络面板 network

过滤

• -表达式，意思是去除，比如-png就是不显示png文件
• 如果要去掉多种，就加空格，-png -gif
• 常见的表达式（可以通过-来得到），支持自动补齐
  • domain:仅显示来自指定域的资源。您可以使用通配符字符（*）纳入多个域
  • has-response-header：显示包含指定HTTP响应标头的资源
  • response-header-set-cookie：
  • is：
    • 如 is:running 可以查找 WebSocket 资源
    • 如is:from-cache 可查找缓存读出的资源
  • Larget-than：显示大于指定大小的资源（以字节为单位）。将值设为1000等同于设置为1k
  • method：显示通过指定 HTTP 方法类型检索的资源
    • 如method:GET
  • mime-type：显示指定 MIME 类型的资源
  • mixed-content：
    • 显示所有混合内容资源（mixed-content:all）,
    • 显示当前显示的资源（mixed-content:displayed）
  • scheme：
    • 显示通过未保护HTTP（scheme:http）
    • 受保护 HTTPS（scheme:https）检索的资源。
  • set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
  • set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
  • set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
  • resource-type：
  • cookie-domain：
  • cookie-name：
  • cooKie-path：
  • cookie-value：
  • status-code：仅显示 HTTP 状态代码与指定代码匹配的资源
  • url：

附录1：名词解释

名词	全称	解释
CORS	Cross-origin resource sharing	是一个W3C标准，全称是"跨域资源共享"。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
Chromium		chrome是闭源的，Chromium是开源的，Chromium可以免安装，更新频繁，新功能层出，国内很多浏览器基于chromium开发
XHR	XMLHttpRequest	用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX编程中被大量使用
PWA	ProgressiveWebApp	渐进式网页应用，可以离线使用，可以变成独立应用安装到系统中。它非常的轻量化，在多平台上面拥有一致的界面。

• 同源

  https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
  浏览器安全的基石是"同源政策"（same-origin policy）
  同源是指：
      协议相同
      域名相同
      端口相同
  示例:
      http://www.example.com/dir2/other.html：同源
      http://example.com/dir/other.html：不同源（域名不同）
      http://v2.www.example.com/dir/other.html：不同源（域名不同）
      http://www.example.com:81/dir/other.html：不同源（端口不同）
  限制范围:
      （1） Cookie、LocalStorage 和 IndexDB 无法读取。
      （2） DOM 无法获得。
      （3） AJAX 请求不能发送
  

附录2：快捷键

常规

	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 + :	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

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 + :	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
地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎)	Ctrl + K, Ctrl + E	Cmd + K, Cmd + E