更新后，Chrome浏览器的地图文件系统资源无效

Question

我可以在工作区中添加一个文件夹（据我所知，它似乎没有做任何事情），但是＆＃34;映射到文件系统资源＆＃34;选项似乎已被删除，我不能再生活编辑css文件。

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

此演讲（https://developers.google.com/web/updates/2017/10/devtools-release-notes）表示新版本使用＆＃34; magic＆＃34;将远程文件映射到本地文件，但我似乎无法让它工作。

作为参考，我试图将reddit css文件映射到我自己的计算机上。它在以前版本的Chrome上运行良好（基本上我添加了文件夹，并将css文件映射到其中，已重命名为与远程文件同名）但不在新版本（Chrome 63）

Answer 1

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

原来，Google Chrome还会检查并比较您文件的上次修改日期 如果服务器上的文件比本地副本更新，则不会映射此文件。

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

Answer 2

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

1. 从中下载Chrome 62 https://www.slimjet.com/chrome/google-chrome-old-version.php。
2. 在OS X垃圾箱/应用程序/谷歌浏览器上。
3. 通过设置“defaults write com.google.Keystone.Agent alwaysPromptForUpdates 1”来关闭自动更新。默认值为0.
4. 您也可以设置“默认设置写入com.google.Keystone.Agent checkInterval 0”。默认值为18000。
5. 照常安装Chrome 62。

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

Answer 3

看起来他们因为新的Workspaces 2.0而删除了它（参见：https://developers.google.com/web/updates/2017/10/devtools-release-notes）。您应该能够将文件夹拖放到“源”选项卡中，并自动链接文件。

Answer 4

缺少“映射到文件系统资源...”菜单项。似乎无法映射文件。据我所知，它完全被打破了。

Answer 5

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

将其添加到.htaccess中为我解决了

IndexOptions SuppressLastModified

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

Answer 6

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

此功能似乎仍然存在，无法自动运行＆＃39;也不符合以前的行为。

但是，添加反映网络标签中显示的资源网址的文件夹会使其再次运行。因此，例如，在“网络导航器”选项卡中，您有：

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

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

Answer 7

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

node-sass --source-map-contents

Answer 8

我也使用Chrome 63.0.3239.132（官方版本）（64位），因为我想使用DevTools Live-edit编辑一些js文件，我看到了选项＆＃34; Map to文件系统资源＆＃34;不见了。

经过一些研究后，我发现实时编辑完全适用于第63版，你只需要：

1. 转到Sources然后转到FileSystem
2. 将包含您代码的文件夹添加到工作区

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

Answer 9

我清除了缓存，现在可以使用了。

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

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

我做什么都不重要，它不会起作用，但是当我清除缓存后，它又开始起作用。

Answer 10

对我来说，问题出在文件标题中（这几乎影响了每个文件）是版权符号©的存在。在文件中带有此字符的情况下，devtool拒绝映射文件，但将其删除后，文件映射良好。

Answer 11

打开devtools设置后，文件映射对我开始可靠地工作-单击右上角的齿轮图标，然后检查“首选项”>“网络”>“禁用缓存（在打开DevTools的情况下）”