Chrome DevTools_--auto-open-devtools-for-tabs

概述

打开开发工具

• 当您想使用 DOM 或 CSS 时，右键单击页面上的元素并选择 Inspect 以跳转到 Elements 面板。或按 Command+Option+C (Mac) 或 Control+Shift+C（Windows、Linux、ChromeOS）。
• 如果您想查看记录的消息或运行 JavaScript，请按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、ChromeOS）直接跳转到控制台面板。
• 打开你打开的最后一个面板，按 Command+ Option+ I(Mac) 或 Control+ Shift+ I
• 从 Chrome 主菜单打开 DevTools，单击自定义和控制 Google Chrome 自定义和控制谷歌 Chrome 浏览器，然后选择更多工具>开发人员工具。
• 在每个新选项开上自动打开 DevTools，从命令行打开 Chrome 并传递 --auto-open-devtools-for-tabs 标志。

苹果电脑

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --auto-open-devtools-for-tabs
1

这仅在 Chrome 实例尚未运行时才有效。从那时起，每个新标签页都会自动打开 DevTools，直到用户完全退出 Chrome。

命令和快捷方式

命令菜单提供了一种快速浏览 Chrome DevTools UI 和完成常见任务的方法，例如禁用 JavaScript。您可能熟悉 Visual Studio Code 中称为 Command Palette 的类似功能，它是 Command Menu 的最初灵感来源。

打开命令菜单：

• 按 Control+ Shift+ P(Windows / Linux) 或 Command+ Shift+ P(Mac)。
• 单击自定义和控制 DevTools。 自定义和控制 DevTools，然后选择运行命令。

打开文件：

如果您使用打开命令菜单中概述的工作流程，命令菜单将打开，并 Run >在文本框中添加前缀。

要改为打开文件，请删除该>字符并开始键入文件名。Run 变为 Open, DevTools 取而代之的是搜索相关文件。

或者，您可以通过以下方式之一直接进入“打开文件”菜单：

• 按 Control+ P(Windows / Linux) 或 Command+ P(Mac)。
• 单击自定义和控制 DevTools。 然后选择打开文件。

打开被忽略的文件

这是实验性的。Chrome 版本 106 中可用的预览功能。

默认情况下，DevTools 会隐藏已知第三方的文件。要从菜单中打开此类文件，请禁用 Sources 面板中的‘隐藏已忽略列表的来源’选项。

查看其他可用操作

要查看命令菜单中可用的其他操作，请删除 > 字符并键入 ?

禁用 JavaScript

要查看禁用 JavaScript 时网页的外观和行为:

• 打开 Chrome 开发者工具
• 按 Control+Shift+P 或 Command+Shift+P (Mac) 打开 Command Menu。
• 键入 javascript 选择 Disable JavaScript，然后按 Enter 运行命令。Sources 旁边的黄色警告图标提醒您 JavaScript 已禁用。

要重新启用 JavaScript：

• 再次打开命令菜单并运行启用 JavaScript 命令。
• 关闭开发工具。

键盘快捷键

打开 DevTools 的键盘快捷键

要打开 DevTools，请在光标位于浏览器视口上时按以下键盘快捷键：

全局键盘快捷键

以下键盘快捷键在大多数（如果不是全部）DevTools 面板中可用。

元素面板键盘快捷键

样式面板键盘快捷键

来源面板键盘快捷键

代码编辑器键盘快捷键

网络面板键盘快捷键

性能面板键盘快捷键

内存面板键盘快捷键

控制台面板键盘快捷键

搜索选项卡键盘快捷键

开始使用

• 查看和更改 DOM
• 查看和更改页面样式
• 调试 JavaScript
• 在控制台产看消息并运行 JavaScript
• 优化网站速度
• 检查网络活动

发现 DevTools

在 DevTools 文档中，顶级选项卡称为面板。

设备模式

模拟移动设备。

• 设备模式
• 测试响应和特定于设备的视口
• 模拟传感器：地理位置和加速度计

元素面板（Elements）

查看和更改 DOM 和 CSS

• 开始查看和更改 DOM
• 开始查看和更改 CSS
• 检查和调整您的页面
• 编辑样式
• 编辑 DOM
• 检查动画
• 查找未使用的 CSS

控制台面板（Console）

从控制台查看消息并运行 JavaScript

• 开始使用控制台
• 使用控制台
• 从命令行交互
• 控制台 API 参考

来源面板（Sources）

调试 JavaScript，在页面重新加载时保留在 DevTools 中所做的更改，保存和运行 JavaScript 片段，以及将您在 DevTools 中所做的更改保存到磁盘。

• 开始调试 JavaScript
• 用断点暂停你的代码
• 使用工作区将更改保存到磁盘
• 从任何页面运行代码片段
• JavaScript 调试参考
• 使用本地覆盖在页面重新加载时保持更改
• 查找未使用的 JavaScript

网络面板（Network）

查看和调试网络活动

• 开始使用
• 网络问题指南
• 网络面板参考
• 检查资源

性能面板（Performance）

寻找提高负载和运行时性能的方法

• 优化网站速度
• 开始分析运行时性能
• 性能分析参考
• 分析运行时性能
• 诊断强制同步布局

内存面板（Memory）

• 修复内存问题
• JavaScript CPU 分析器

应用面板（Application）

检查所有加载的资源，包括 IndexedDB 或 Web SQL 数据库、本地和会话存储、cookie、应用程序缓存、图像、字体和样式表。

• 调试渐进式 Web 应用程序
• 检查和管理存储、数据库和缓存
• 检查和删除 Cookie

安全面板（Security）

调试混合内容问题、证书问题等

• 了解安全问题