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

Question

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

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

工作区映射不匹配

警告的其余部分指出本地文件夹中的文件与远程加载的文件不同。为什么这是个问题，不是总是这样吗，因为您想在本地编辑文件？

我错过了什么？任何解决这个问题的指示？我的假设是否错误，Chrome 开发工具中的此功能可以允许在本地加载资源，就好像它是从原始位置加载的一样？

我用一个简单的 html 页面再次对此进行了测试，该页面包含一个带有简单控制台日志语句的 js 文件——“正在加载远程文件...”。此文件映射到具有不同日志语句“正在加载本地文件..”的本地 js。但是，我仍然看到来自远程文件的日志消息。

添加来自开发工具源选项卡的快照以获得更多上下文。源选项卡正确显示本地文件夹和文件，但显示映射警告。另请注意，sources 不再有 remote.js 文件。

Answer 1

Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?

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

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

编辑:From the workspace documentation:

And you can map resources served from a local web server to files on disk, so when you change and save those files, you can view them as if they were being served.

我认为这里的关键是本地网络服务器。我做了更多的挖掘，发现 this dev tools docs issues , 并附上一条评论，有效地说明不支持您尝试执行的操作:

The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.

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