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

Question

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

我可以看到sources文件夹中列出的本地文件夹和文件。另外，请参阅源代码不显示原始JS文件。但是我在本地文件的sources选项卡中看到了这条消息。

工作区映射不匹配

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

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

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

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

Answer 1

  

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

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

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

修改：From the workspace documentation:

  

您可以将从本地Web服务器提供的资源映射到磁盘上的文件，因此当您更改并保存这些文件时，您可以将它们视为正在提供服务。

我认为这里的关键是本地网络服务器。我做了一些挖掘并发现了this dev tools docs issues，并且有效地评论说你不会支持你做的事情：

  

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

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

Answer 2

this issue要求Chromium团队使用Charles Proxy“地图本地”功能，团队拒绝继续使用。