✨Chrome DevTools 使用指☞北 - 来源面板之浏览文件树 🔔

浏览文件树 🌈

文件树中由群组创作和部署的文件 🐾

• 启用分组功能，请启用 三点菜单栏中的 按已编写/已部署分组 选项

  使用框架（例如 React 或 Angular）开发 Web 应用时，由于构建工具（例如 webpack 或 Vite）生成的文件较小，因此很难浏览源代码。

  为帮助您浏览来源，您可在以下位置找到来源 > Page 窗格可以将文件分为两类：

  • 已编写：与您在 IDE 中查看的源文件类似。DevTools 会根据构建工具提供的源映射生成这些文件。
  • 已部署：浏览器读取的实际文件。这些文件通常会缩减大小。

  

在文件树中隐藏已列入忽略列表的来源 🐾

• 勾选 隐藏已列入忽略列表的来源，可以将设置中忽略列表所配置的内容进行隐藏

  

  

调试原始代码 🐾

• 在设置中勾选 启用 Javascript 源代码映射 和 启用 CSS 源代码映射

  

• 在此演示页面上进行测试

  编辑器会在底部的状态栏中放置一个指向已部署文件的链接

  

  Call Stack 窗格显示原始文件的名称，而不是已部署文件的名称

  

  在编辑器底部的状态栏中，点击指向已部署文件的链接。Sources 面板会将您转到相应的文件。

  

  Editor 会自动为部署的文件整齐显示。实际上，除了 //# sourceMappingURL 注释外，它的所有代码都在一行中。