使用“Memory Inspector”面板检查 ArrayBuffer、TypedArray、DataView 或 Wasm 内存
使用“Network conditions”（广告联盟条件）面板替换用户代理字符串
使用“请求条件”面板有选择地屏蔽或限制资源
使用“性能监控”面板实时分析运行时性能
通过协议监控面板查看和发送 CDP 请求
查看源文件，同时借助“快速来源”面板访问其他工具
远程调试 Android 设备
通过端口转发访问本地服务器和 Chrome 实例
远程调试 WebView
功能参考资料
对比度和可读性
跟踪元素焦点
利用辅助技术浏览开发者工具
或者，在右上角，依次选择
more_vert
更多选项
>
更多工具
>
“图层”面板
。
此外，您还可以通过
效果
面板在
图层
标签页中查看录制的每个帧的图层。如需了解详情，请参阅
查看图层信息
。
查看文档层
Layers
面板最左侧的部分会以可展开的树形方式列出文档的所有已渲染图层。此树状结构会随着您浏览页面而更新。图层通过 CSS 选择器或数字（后跟图层的像素尺寸）进行标识。
将鼠标悬停在某个图层上，即可在网页和图表中将其突出显示。页面上会显示一条提示，其中包含以下信息：
图层的选择器。
图层的尺寸（以像素为单位）。
表示 CSS 网格或 flex 的图标（如果适用）。
使用 WASD 键移动图表。按
W
向上平移，按
A
向左平移，按
S
向下平移，按
D
向右平移。
点击“平移模式”图标
drag_pan
或按
X
键并拖动，即可沿 X 轴和 Y 轴移动。
点击“旋转模式”图标
360
或按
V
键并拖动，以沿 Z 轴旋转。
点击“重置转换”图标
zoom_in_map
或按
0
将图表重置为原始位置。
按
Shift
+
+
或向上滚动鼠标滚轮即可放大。
按
Shift
+
-
或向下滚动鼠标滚轮即可缩小。
如需在
“元素”面板
中查看某个图层的相应 DOM 元素，请在图表或图层树中右键点击相应图层，然后点击
在“元素”面板中显示
。
此外，
层
面板会隐藏不托管或绘制内容的某些层。如需显示这些图层，请右键点击图层树，然后选择
显示内部图层
。
设置 DOM 更改断点
在
Layers
（图层）面板中，您可以设置 DOM 更改断点。
如需设置 DOM 更改断点，请按以下步骤操作：
在图层树中右键点击某个图层。
将鼠标悬停在
断点
上，然后选择
子树修改
、
属性修改
或
节点移除
。
如需查找 DOM 更改断点的列表，请参阅以下内容：
元素
>
DOM 断点
标签页。
来源
>
DOM 断点
可收起部分。
如未另行说明，那么本页面中的内容已根据
知识共享署名 4.0 许可
获得了许可，并且代码示例已根据
Apache 2.0 许可
获得了许可。有关详情，请参阅
Google 开发者网站政策
。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2024-09-25。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC)：2024-09-25。"],[],[]]
