javascript Chrome Dev Tools - 将网络资源映射到本地文件不起作用

Chrome Dev Tools - Mapping network resource to local file not working

提问by 3coins

Is Local file mapping dev tools alternative to Charles proxy in firefox? I am trying to map a remoteserver resource to a local file, but it doesn't seem to be working. The console statements and changes in the JS file doesn't seem to be applied when I reload the page.

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

I can see the local folder and file listed in the sources folder. Also, see that the sources doesn't show the original JS file. But I see this message in the sources tab for the local file.

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

Workspace mapping mismatch

工作区映射不匹配

Rest of the warning states that the file in local folder is different from the remote loaded file. Why is that a problem, wouldn't that be always the case, since you want to edit the file locally?

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

What am I missing? Any pointers to fixing this? 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 开发工具中的此功能可以允许在本地加载资源，就好像它是从原始位置加载的一样？

I tested this again with a simple html page with a single js file having a simple console log statement - "loading remote file ...". This file is mapped to a local js with a different log statement "loading local file.." However, I still see the log message from the remote file.

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

Added snapshot from dev tools sources tab for more context. Sources tab shows the local folder and file correctly, but shows the mapping warning. Also notice that sources doesn't have the remote.js file anymore.

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

采纳答案by dontGoPlastic

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 开发工具中的此功能可以允许在本地加载资源，就好像它是从原始位置加载的一样？

I don't think this is accurate. When you map a file on a server to your local workingspace, Chrome acts as a sort of editor for your local files. You can edit the files through Chrome and Command+S to save your localfiles. But nothing has changed on the server. It doesn't update the files on the server, and it doesn't tell Chrome to "Use my local files instead of what's on the server".

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

What many people do is automate the deployment process so that when a local file is updated (either through Chrome + Workspace Mapping or just simply by editing in your editor), your working copy gets deployed. That way, next time you reload the browser, you'll see your edits.

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

Edit: 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.

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

I think the key here is local web server. I did a bit more digging and found this dev tools docs issues, with a comment effectively saying that what you're trying to do isn't supported:

我认为这里的关键是本地网络服务器。我做了更多的挖掘，发现这个开发工具文档问题，有一条评论有效地表明不支持你正在尝试做的事情：

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 目前不做资源替换。它可以简单地将远程文件映射到您的本地副本，因此如果事情保持同步（例如使用系统上的本地服务器），那么在刷新时您的修改可以持续存在。

Looks like you'll need a way to deploy after making changes or have your devtools workspace point to the server docroot.

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

回答by Ben Creasy

The Charles Proxy "map local" feature was requested of the Chromium team in this issueand the team declined to pursue it.

在此问题中，Chromium 团队要求使用 Charles Proxy“地图本地”功能，但该团队拒绝继续使用。