Chrome DevTools：如何将本地项目上传至Filesystem页面调试localhost项目

以下是具体操作步骤：

• 打开Chrome DevTools，切换到Sources面板，找到左侧侧边栏的Filesystem标签（如果没显示，点击侧边栏末尾的>>按钮展开更多选项）。
• 点击面板里的Add folder to workspace按钮，在弹出的系统文件选择窗口中，选中你本地项目的根目录。
• 此时Chrome会弹出权限请求弹窗，点击允许，授权DevTools访问该目录。
• 完成后就能在Filesystem面板看到完整的项目文件结构了。如果需要让调试页面的文件和本地文件关联（实现修改同步），可以在Sources > Page找到对应文件，右键选择Map to filesystem resource，然后在Filesystem面板里选中对应的本地文件即可。

额外提示：

• 确保localhost运行的项目根路径和你挂载的本地目录一致，避免路径不匹配导致关联失败。
• 如果挂载后看不到文件，检查一下目录权限，确认Chrome有权限读取该文件夹。
• 挂载后可以直接在Filesystem面板编辑文件，修改会自动保存到本地，刷新页面就能看到更新效果。

内容的提问来源于stack exchange，提问作者JaviSt