Chrome 控制台 Sources Panel 使用手册专栏【六】

2023-11-08 03:14:19

Sources Panel 是 Chrome 控制台的一个选项卡，用于记录当前页面所有引用关联的文件资源。通过 Sources Panel，可以查看文件内容、修改文件内容、进行 JavaScript 调试等。在前端开发过程中，Sources Panel 是最常用来打断点查看任务执行顺序进行调试的工具。

一、Sources Panel 的基本操作

打开 Sources Panel
Sources Panel 默认隐藏，可以通过以下方式打开：
- 在 Chrome 浏览器的菜单栏中，选择“更多工具”>“开发者工具”；
- 按键盘快捷键 Ctrl+Shift+I (Windows/Linux) 或 Cmd+Option+I (Mac)；
- 在 Chrome 浏览器的地址栏中输入 chrome://inspect/#devtools/sources。
使用 Sources Panel
Sources Panel 界面分为三个主要部分：
- 资源列表： 列出当前页面所有引用关联的文件资源，包括 JavaScript 文件、CSS 文件、HTML 文件、图片、字体等。
- 源代码编辑器： 显示选定资源的源代码。
- 调试工具： 用于对 JavaScript 代码进行调试，包括设置断点、单步执行代码、查看变量值等。

二、Sources Panel 的常见用法

调试 JavaScript 代码
Sources Panel 最常用的功能之一就是调试 JavaScript 代码。具体步骤如下：
- 在资源列表中，找到要调试的 JavaScript 文件。
- 在源代码编辑器中，找到要调试的代码行。
- 在代码行前单击，设置一个断点。
- 在浏览器中刷新页面或执行相应的操作，使代码执行到断点处。
- 单击 Sources Panel 中的“调试”按钮，进入调试模式。
- 在调试模式下，可以使用调试工具来查看变量值、单步执行代码等。
查看文件内容
Sources Panel 可以用来查看当前页面所有引用关联的文件资源的内容。具体步骤如下：
- 在资源列表中，找到要查看的文件。
- 在源代码编辑器中，即可看到该文件的内容。
修改文件内容
Sources Panel 还允许修改当前页面所有引用关联的文件资源的内容。具体步骤如下：
- 在资源列表中，找到要修改的文件。
- 在源代码编辑器中，找到要修改的内容。
- 修改内容后，单击“保存”按钮。

三、Sources Panel 的常见问题解答

为什么我在 Sources Panel 中看不到某些文件？
可能是因为这些文件没有被加载到页面中。例如，某些 JavaScript 文件可能会在页面加载后动态加载。
为什么我在 Sources Panel 中修改了文件内容，但刷新页面后修改的内容消失了？
可能是因为修改的文件是缓存文件。要使修改的内容生效，需要清除浏览器的缓存。
如何在 Sources Panel 中设置断点？
在要设置断点的代码行前单击，即可设置断点。
如何在 Sources Panel 中单步执行代码？
在调试模式下，单击“单步执行”按钮，即可单步执行代码。
如何在 Sources Panel 中查看变量值？
在调试模式下，将鼠标悬停在变量上，即可查看变量值。