如何在 Chrome DevTools 工作区中组织本地文件夹？

Question

我正在使用 Google Chrome DevTools，我必须支持多个项目。我经常直接在 DevTools 中编辑我的源文件，所以我将本地源文件夹添加到 DevTools 工作区。困扰我的是：似乎只有一个工作区，而 DevTools 只显示我添加的文件夹的名称——大多数时候它们只是“src”或“scss”。因此，对于每个新项目，当我想打开文件时选择正确的文件夹变得越来越困难。

有什么方法可以在 DevTools 中组织本地文件夹，以便我可以看到它们属于哪个项目？诸如多个工作区、虚拟文件夹或添加文件夹的符号名称之类的东西会有所帮助，但我在 DevTools 或 Chrome 扩展程序库中找不到类似的东西。

Answer 1

您可以拥有任意数量的工作区。你只需要添加每个项目目录。

1. 在 Chrome 中导航到项目目录的根目录。这将是您的工作区。
2. 在 DevTools 的 Sources 面板中，右键单击路径并单击“将文件夹添加到工作区”。
3. 对第二个项目目录重复步骤 1 和 2

示例

该示例使用本地系统文件，但它与本地 Web 服务器的工作方式大致相同，例如使用 python -m SimpleHTTPServer 8000 设置的服务器。

如您所见，我现在有两个单独的目录，因此应用程序之间不会混淆。

您可以在“源”选项卡或 DevTools 设置的“工作区”面板中添加网络映射。我推荐后者，因为它更清晰。