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

Question

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

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

Answer 1

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

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

实施例

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



正如您所看到的，我现在有两个单独的目录，因此应用程序之间没有混淆。



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