Chrome开发工具 - 将网络资源映射到本地文件不起作用

Question

本地文件映射开发工具是firefox中查找器代理的替代工具吗？ 我试图将远程服务器资源映射到本地文件，但它似乎没有工作。 当我重新加载页面时，似乎没有应用JS文件中的控制台语句和更改。

我可以看到sources文件夹中列出的本地文件夹和文件。 另外，请注意源不显示原始JS文件。 但我在本地文件的sources选项卡中看到此消息。

工作区映射不匹配

其余警告表明本地文件夹中的文件与远程加载的文件不同。 为什么这是一个问题，不会总是这样，因为你想在本地编辑文件？

我错过了什么？ 有什么指向修复这个？ 我的假设是错误的，Chrome开发工具中的这个功能可以允许在本地加载资源，就好像它是从原始位置加载的一样？

我用一个简单的html页面再次测试了这个页面，其中一个js文件有一个简单的控制台日志语句 - “加载远程文件......”。 此文件映射到具有不同日志语句“加载本地文件...”的本地js但是，我仍然看到来自远程文件的日志消息。

从开发工具源选项卡添加了快照以获取更多上下文 “源”选项卡正确显示本地文件夹和文件，但显示映射警告。 另请注意，源代码不再具有remote.js文件。

Answer 1

我的假设是错误的，Chrome开发工具中的这个功能可以允许在本地加载资源，就好像它是从原始位置加载的一样？

我不认为这是准确的。 将服务器上的文件映射到本地工作空间时，Chrome会充当本地文件的编辑器。 您可以通过Chrome和Command + S编辑文件以保存本地文件。 但是服务器上没有任何变化。 它不会更新服务器上的文件，也不会告诉Chrome“使用我的本地文件而不是服务器上的文件”。

许多人所做的是自动化部署过程，以便在更新本地文件时（通过Chrome +工作区映射或只是在编辑器中进行编辑），您的工作副本将被部署。 这样，下次重新加载浏览器时，您会看到自己的编辑内容。

编辑： 从工作区文档：

并且您可以将从本地Web服务器提供的资源映射到磁盘上的文件，因此当您更改并保存这些文件时，您可以像查看它们一样查看它们。

我认为这里的关键是本地Web服务器 。 我做了一些挖掘，发现了这个开发工具文档问题 ，有效评论说你不想支持你想要做的事情：

DevTools目前不进行资源替换。 它可以简单地将远程文件映射到本地副本，因此如果事情保持同步（例如在系统上使用本地服务器），则刷新修改时可以保持不变。

看起来您需要一种在进行更改后部署的方法，或者让您的devtools工作区指向服务器docroot。

Answer 2

在本期中 ，Chromium团队要求查尔斯代理“地图本地”功能，团队拒绝继续追究。