如何在Chrome DevTools工作区中组织本地文件夹? [英] How to organize local folders in Chrome DevTools workspace?
问题描述
我正在使用Google Chrome DevTools，并且我必须支持多个项目.我经常直接在DevTools中编辑源文件，因此我将本地源文件夹添加到DevTools工作区中.困扰我的是:似乎只有一个工作区，DevTools仅显示我添加的文件夹的名称-大多数情况下它们只是"src"或"scss".因此，对于每个新项目，当我要打开文件时，选择正确的文件夹变得越来越困难.
I am using Google Chrome DevTools, and I have to support several projects. I am often editing my source files directly in DevTools, so I added my local source folders to the DevTools workspace. What is bothering me: there seems to be only one workspace, and DevTools only shows the names of the folders I added - which are just 'src' or 'scss' most of the times. So with every new project it becomes increasingly difficult to pick the right folder when I want to open a file.
是否可以在DevTools中组织本地文件夹，以便查看它们属于哪个项目?诸如多个工作区，虚拟文件夹或添加的文件夹的符号名称之类的东西会有所帮助，但我在DevTools或Chrome扩展程序存储库中找不到类似的内容.
Is there any way to organize the local folders in DevTools so that I can see to which project they belong? Something like multiple workspaces, virtual folders or symbolic names for the added folders would help, but I couldn't find anything like that in DevTools or in the Chrome extension repos.
推荐答案
您可以根据需要拥有任意数量的工作区.您只需要添加每个项目目录.
You can have as many workspaces as you like. You just need to add each project directory.
- 导航到Chrome中项目目录的根目录.这将是您的工作空间.
- 在DevTools的源"面板中，右键单击路径，然后单击将文件夹添加到工作区".
- 对第二个项目目录重复步骤1和2
示例
该示例是针对本地系统文件的，但与本地Web服务器的工作原理几乎相同，例如使用python -m SimpleHTTPServer 8000进行设置的服务器.
Example
The example is with local system files but it will work much the same with a local web server, such as one set up using python -m SimpleHTTPServer 8000.
如您所见，我现在有两个单独的目录，因此应用程序之间没有混淆.
As you can see, I now have two separate directories so there's no confusion between the apps.
您可以在源"选项卡或DevTools设置的工作区"面板中添加网络映射.我建议使用后者，因为它更清楚.
You can add your network mappings either in the Sources tab, or in the Workspaces panel in DevTools settings. I recommend the latter, as it is clearer.
这篇关于如何在Chrome DevTools工作区中组织本地文件夹?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
