Chrome Devtools工作区映射不再起作用。

Question

这曾经是非常有效的，我过去已经使用相同的硬件/软件设置了大约十几次，但现在它失败了：

必要的编辑权限已经到位，因为我可以在Devtools中直接从本地工作区打开文件并进行编辑和保存，但这当然不比使用其他IDE更好，因为我不能像以前那样立即看到并持久化我的更改。

这里没有使用LESS/SASS/Taskrunner，只有普通的CSS文件。

我查看了Sawbuck、Devtools on Devtools，没有发现错误。

我已经完全禁用了防火墙。

我使用的是Windows 7，Chrome 56（也尝试了Canary 58），服务器的文件系统被挂载为网络驱动器，位于Z:上。

唯一稍微奇怪的是，工作区映射在建立资源链接后似乎将文件视为目录，无论是右键单击远程资源并选择“映射到文件系统资源...”还是本地资源并选择“映射到网络资源...”，但这可能一直都是这样，而我从未注意到——无论如何，我也手动添加了父目录和站点根目录的映射，但结果仍然相同；没有持久的编辑。

我通常很自豪，不愿意问关于这样的问题，而是花费很长时间自己去解决它，但现在感觉一直碰壁。如果您有类似的经历，能提供任何指导，我将非常感激。

- J Griffiths

---

可能是一个错误，在最新的 Chrome Canary 中已经修复了几个小时前。 - wOxxOm

很遗憾，那与源映射有关，这里没有做任何那样的事情！不过还是谢谢你！源映射可能确实是解决这个问题的答案... - J Griffiths

Answer 1

似乎是由WordPress添加的缓存破解查询字符串导致的-

您可以在我的屏幕截图中看到：?ver=4.7.2

显然我之前只在集成到WordPress之前使用了此DevTools Workspace功能。这里有一个相关的Chromium错误报告。

目前，将以下内容添加到WordPress的functions.php中以删除缓存破解后缀，允许我重新启用持久编辑：

function fj_remove_version( $url ) {
    return remove_query_arg( 'ver', $url );
}

add_filter( 'style_loader_src', 'fj_remove_version' );

在未来，看起来推荐在错误报告末尾的 Persistence 2.0 会成为解决方案。现在它可以作为 Chrome DevTool 实验 启用。

- J Griffiths

---

我遇到了同样的问题，但是对服务器端没有控制权。有人知道这个问题是否有解决方案吗？ - tobi-or-not

我发现Chrome自动映射到工作区时会考虑以下三个因素：（1）文件名，（2）文件内容，（3）最后修改日期（头部字段“Last-Modified”）。请确保所有这些与提供给网站的资源同步。 - mihca

@mihca 你的评论对我有帮助，我已经为此苦恼了半天。 - Roger Dahl

Answer 2

Chrome看到远程和本地文件在同一个文件夹中，名称相同、大小相同，最重要的是修改日期值相同非常重要。

如果web服务器/网站在css和其他文件旁边放置“?ver=xyz”，那么没关系，这不重要。

如果您使用FTP（也可以在IDE内部）上传文件，则会更改日期修改值，因此这将无法正常工作。为解决此问题，请使用WinSCP的“保持远程目录同步”功能以二进制模式上传文件。

如果仍然无法正常工作，请在Chrome中检查从Web服务器检索到的文件和从本地系统打开的文件的“日期修改”标头。这些应该匹配。

如果您的Web服务器不断更改“日期修改”标头以当前日期时间为准，则表示服务器上的修改值在未来，可能是由于夏令时和错误的服务器或winscp （或其他同步应用程序）配置，并且Apache可能无法在未来提供“修改日期”标头。您可以通过在WinSCP下设置正确的高级会话设置来解决此问题。

- Aambro