Chrome 到文件系统资源的映射在更新后不起作用答案

【问题标题】：Chrome's map to file system resource not working after updateChrome 到文件系统资源的映射在更新后不起作用
【发布时间】：2017-12-30 08:28:42
【问题描述】：

我可以向工作区添加一个文件夹（据我所知，它似乎没有做任何事情），但“映射到文件系统资源”选项似乎已被删除，我不能再实时编辑 css 文件。

这是一个错误，还是更改了映射 css 文件的过程？

这个演讲 (https://developers.google.com/web/updates/2017/10/devtools-release-notes) 说新版本使用“魔法”将远程文件映射到本地文件，但我似乎根本无法让它工作。

作为参考，我正在尝试将一个 reddit css 文件映射到我自己计算机上的一个文件。它在以前版本的 Chrome 上运行良好（基本上我添加了文件夹，并在其中映射了 css 文件，该文件已重命名为与远程版本相同的名称），但在新版本（Chrome 63）上却没有。 p>

【问题讨论】：

标签： google-chrome google-chrome-devtools

【解决方案1】：

我打开 devtools 设置后，文件映射开始可靠地工作 -- 单击右上角的齿轮图标并选中 Preferences > Network > "Disable cache (while DevTools is open)"

【讨论】：

【解决方案2】：

由于新的 Workspaces 2.0，Chrome 删除了手动映射到文件系统资源（请参阅：https://developers.google.com/web/updates/2017/10/devtools-release-notes）。

您应该能够将您的文件夹拖放到源选项卡中，它会自动链接文件。

然而automatic mapping doesn't work in many situations and there is a Chrome bug to re-add manual mapping

【讨论】：

如果“魔术”拖放不起作用，基本上没有关于如何让它工作的文档。我的本地目录是远程目录的直接副本。我已经通过拖放添加了它，但它只是变灰并且没有给我任何复选标记。以前，我们至少可以手动排列单个文件。现在，如果“魔法”失败，我们甚至无法做到这一点。
暂时无法手动添加。这就是为什么如果拖放不起作用，则没有文档可以使它起作用的原因。您似乎遇到了一个现有的错误：bugs.chromium.org/p/chromium/issues/…。

【解决方案3】：

我刚刚解决了一个问题，只有一些文件被映射到我的本地工作区。

原来谷歌浏览器也会检查和比较您文件的最后修改日期。
如果服务器上的文件比您的本地副本更新日期，则不会映射此文件。

我删除了服务器端的 Bootstrap 文件并上传了我的本地副本，该副本具有较旧的上次修改日期。谷歌浏览器立即将文件映射到我的本地工作区。
出于好奇，我在服务器上运行touch bootstrap.min.js 将上次修改日期设置为今天。这再次破坏了我的文件映射。

【讨论】：

这是一个巨大的帮助。
这很好，除了我正在使用的服务器的时间配置错误或时区有问题。

【解决方案4】：

对我来说，问题出在文件标题中存在版权符号 ©（这几乎影响了每个文件）。使用文件中的这个字符，devtool 拒绝映射文件，但删除它后，文件映射正常。

【讨论】：

我在使用特殊字符时遇到了同样的问题！（对我来说，这是一个重音“é”）。谢谢！
文件中的任何 unicode 字符似乎都会发生这种情况。这个正则表达式可以方便地找到它不喜欢的字符：[^\x00-\x7f]
针对此问题的票已开放一年多：bugs.chromium.org/p/chromium/issues/detail?id=972427。似乎不是一个高优先级。

【解决方案5】：

我也在使用 Chrome 63.0.3239.132 (Official Build) (64-bit)，因为我想使用 DevTools Live-edit 来编辑一些 js 文件，所以我看到“映射到文件系统资源”选项是不见了。

经过一些研究，我发现 Live-edit 在版本 63 中完美运行，您只需：

转到源，然后转到文件系统
将包含您的代码的文件夹添加到工作区

之后，文件附近会显示一个小绿点（表示同步已准备就绪），通过 DevTools 所做的更改可以保存在本地：

【讨论】：

我所有的文件夹都是灰色的，我的所有文件都没有绿点，并且与浏览器中出现的 CSS 零同步。我该怎么办？此外，您的网络选项卡在该脚本中是什么样的？ “scripts”是根目录下的文件夹吗？

【解决方案6】：

“映射到文件系统资源...”菜单项丢失。似乎没有办法映射文件。据我所知，它已经完全坏掉了。

【讨论】：

该死的Chrome，不问就破坏了重要功能。

【解决方案7】：

我清除了缓存，它现在可以工作了。

以前，我从我的 FTP 客户端打开我的 CSS 文件，然后我将包含文件夹拖到 Sources 选项卡 > Filesystem 选项卡中（不关心任何文件夹名称或结构，我只是将包含文件夹的 FTP 客户端拖到其中）。

持久映射立即生效，来自 Chrome 开发工具的编辑保存在服务器上。经过 30 分钟的摆弄和玩耍，它刚刚停止工作，CSS 资源变灰了。带有绿点的文件图标不再出现。

不管我做什么，它都不起作用，但是当我清除缓存时，它又开始起作用了。

【讨论】：

【解决方案8】：

感谢此线程中的其他人说 chrome 正在检查修改日期。

将此添加到 .htaccess 为我解决了这个问题

IndexOptions SuppressLastModified

当然，您不希望它进入您的生产代码，因为它可能会阻止浏览器缓存工作。

【讨论】：

【解决方案9】：

截至今天，Chrome 版本 63.0.3239.108（官方版本）（64 位）：

该功能似乎仍然被破坏，不能“自动”工作，也不能与之前的行为一致。

但是，添加一个反映资源 URL 的文件夹（如“网络”选项卡中所示）可以使其再次工作。因此，例如，在 Network Navigator 选项卡中，您有：

http://mylocal.site/wp-content/themes/mytheme/assets/sass/partials/_header.scss

您只需将整个 wp-content/ 文件夹添加到“文件系统”选项卡即可使该功能再次按预期工作。

【讨论】：

如果资源位于完全不同的站点上怎么办？例如，正在加载http://mylocal.site.com 并且我要映射的css 文件位于http://mylocalstaticfiles.site/xxxxxx.css 上？这是我目前正在尝试使用的用例，将位于 b.thumbs.redditmedia.com/xxx.css（无子目录）的 css 文件映射到位于 reddit.com/r/xxx 上的站点
Chrome Canary 尽管版本为 65.0.3311.0 ，但显示相同的错误。所以我想你目前唯一的选择是尝试在本地重新创建与远程站点上相同的文件夹结构/文件命名。
这种方法在我的情况下不起作用。我有mysite.com/themes/{themename}/。在我的本地系统上，我有/home/user/themes/{themename}/。无论我添加 {themename} 文件夹还是整个主题文件夹，资源都拒绝映射。即使使用@Physikbuddha 提到的touch file.css 方法也无济于事。

【解决方案10】：

我遇到了同样的问题，所以我降级到 Chrome 62（保留了首选项、历史记录、扩展等）。

从
https://www.slimjet.com/chrome/google-chrome-old-version.php 下载 Chrome 62。
在 OS X 垃圾箱 /Applications/Google Chrome 上。
通过设置“默认写入 com.google.Keystone.Agent alwaysPromptForUpdates 1”关闭自动更新。默认值为 0。
可能您也必须设置“默认写入 com.google.Keystone.Agent checkInterval 0”。默认值为 18000。
照常安装 Chrome 62。

启动 Chrome 62 后，打开“关于 Google Chrome”。 Chrome 正在检查更新，但会提示您确认。

【讨论】：

那么这个网站 slimjet dot com 是什么，我为什么要相信从那里下载的东西？
我不能给出任何安全保证。 Google for slimjet。
第2、3步怎么设置？
打开应用程序/实用程序/Terminal.app。将“defaults write com.google.Keystone.Agent alwaysPromptForUpdates 1”（仅限双引号内的内容）粘贴到窗口中，然后按 Enter。

【解决方案11】：

遇到了同样的问题，但是当我的源映射包含 sourcesContent 时，文件映射是自动生成的，我可以实时编辑我的 scss。显然 chrome 使用内容来找到正确的文件。

node-sass --source-map-contents

【讨论】：