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.

我想进行资产替换以避免在SharePoint中工作时过多的脚本文件提交,并且对于学习Chrome没有此功能感到失望.我最终使用了Charles Web(http://www.charlesproxy.com/documentation/tools/map-local/),效果很好. (5认同)
感谢您指向正确的资源.似乎不支持我想要的东西. (3认同)
Fiddler的AutoResponder功能也是Charles Proxy的一个很好的免费替代品.http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder (3认同)