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

时间:2017-12-30 08:28:43

标签: google-chrome google-chrome-devtools

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

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

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

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

11 个答案:

答案 0 :(得分:11)

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

enter image description here

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

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

答案 1 :(得分:4)

我遇到了同样的问题,因此我降级为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。
  6. 启动Chrome 62后,打开“关于Google Chrome”。 Chrome正在检查更新,但会提示您确认。

    enter image description here

答案 2 :(得分:3)

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

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

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

IndexOptions SuppressLastModified

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

答案 5 :(得分:0)

截至今天,使用Chrome版本63.0.3239.108(官方版本)(64位):

此功能似乎仍然存在,无法自动运行'也不符合以前的行为。

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

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

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

答案 6 :(得分:0)

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

node-sass --source-map-contents

答案 7 :(得分:0)

我也使用Chrome 63.0.3239.132(官方版本)(64位),因为我想使用DevTools Live-edit编辑一些js文件,我看到了选项" Map to文件系统资源"不见了。

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

  1. 转到Sources然后转到FileSystem
  2. 将包含您代码的文件夹添加到工作区
  3. 之后,文件附近会显示一个小的绿点(表示同步已准备就绪),并且可以在本地保存通过DevTools进行的更改:

    Live-edit

答案 8 :(得分:0)

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

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

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

not working

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

enter image description here persistent mapping

答案 9 :(得分:0)

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

答案 10 :(得分:0)

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