Chrome DevTools 使用指☞北

打开“网络”面板 🌈 方法一：点击顶部操作栏中的 Network 方法二：通过命令菜单打开 按如下键打开命令菜单： macOS：Command + Shift + P Windows、Linux、Ch

工作原理 🌈 当您在 DevTools 中进行更改时，DevTools 会将修改后的文件的副本保存到您指定的文件夹中。 当您重新加载页面时，DevTools 会提供经过修改的本地文件，而不是网络资源。

忽略某个脚本或脚本格式 🌈 忽略文件树中的某个脚本或目录 🐾 如需忽略单个脚本或整个目录，请运行以下命令： 在来源 > 网页中，右键点击相应目录或脚本文件。 选择将目录/脚本添加到忽略列表。 如需取消

浏览文件树 🌈 文件树中由群组创作和部署的文件 🐾 启用分组功能，请启用 三点菜单栏中的 按已编写/已部署分组 选项 使用框架（例如 React 或 Angular）开发 Web 应用时，由于构建工具

查看当前调用堆栈 🌈 在某行代码上暂停时，使用 Call Stack 窗格查看使您进入此操作的调用堆栈 点击某个条目即可跳转到调用该函数的代码行 重启调用堆栈中的函数（帧） 🐾 若要观察函数的行为并重

单步调试代码 🌈 代码暂停后，请一次一个表达式地单步调试，并在此过程中调查控制流和属性值。 跳过代码行 🐾 新建一个 代码段，将下面内容粘贴到工作区。 当在包含与当前问题无关的函数的代码行暂停时， 请

使用断点暂停代码 🌈 暂停时检查值 🐾 新建一个 代码段，将下面内容粘贴到工作区。 按下 Ctrl + S 保存代码，之后按下 Ctrl + Enter 执行代码 执行暂停时，调试程序会展示当前函数中

概览 🌈 Sources 面板包含三个部分： 包含文件树的 Page 标签页。该页面请求的每个文件都列在此处。 代码编辑器 部分。在 Page 标签页中选择文件后， 相应文件会显示在此处 Debugg

打开控制台 🌈 打开“控制台”面板 🐾 快捷键打开：按 Ctrl + Shift + J 或 Command + Option + J (Mac) 命令菜单打开：首先输入 Console，然后点击 S

CSS 网格布局 🌈 探索 CSS 网格 🐾 如果您网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid，您可以在 元素 面板中看到该元素旁边有

查看元素的 CSS 🌈 选择你想要的元素，右键点击检查。打开元素（Elements）面板，可以看到右侧的 Style 窗格。Styles 窗格会列出应用到在 DOM 树 中所选元素的 CSS 规则。

显示或隐藏徽章 🌈 右键点击 DOM 树中的某个元素，然后选择 Badge settings... 勾选徽章旁边的复选框会让相应的在 DOM 树中的标记展示，清除复选框则会消失 网格（grid） 🌈

打开“属性”窗格 🌈 在 DOM 树中，选择一个节点 打开 属性 标签页。如果您看不到该标签页，请点击 更多，然后从下拉菜单中选择该标签页 发现自身的属性 🌈 Properties 窗格会进行排序，先

打开元素（Elements）面板 🌈 默认打开开发者工具，元素面板会自动打开。还可以在页面任意位置上检查节点，让系统自动打开 Elements 面板 使用命令菜单打开 Elements 面板 查看 D

Hello，大家好呀。在当今移动互联网蓬勃发展的时代，确保网页在移动设备上的完美呈现至关重要。Chrome DevTools 中的 Device Mode（设备模式）功能，为开发者提供了一个强大且便捷

Hello，这篇文章将带你深入了解 Chrome DevTools 的命令菜单运行命令、快捷键的强大特性。你将学会如何轻松调用命令菜单，通过简洁的指令快速实现各种操作。您也会学到快捷键的使用技巧

Hello，小伙伴们，大家好呀，在这边文章中，咱们会介绍如何对 Chrome 浏览器的开发者工具（DevTools）进行外观设置，以提升用户体验和开发效率，让咱们一起开始

打开开发者工具 🌈 从 Chrome 菜单中打开开发者工具 🎈 右键点击网页上的相应元素，然后选择 检查（Inspect） DevTools 会打开 Elements 面板，并在 DOM 树中选择元素