2014-11-08 52 views
3

谷歌Chrome浏览器开发工具,所有的突然停止显示我的本地驱动器上的CSS文件名 - 见截图在链接:铬不显示的CSS源文件名的样式

Link to CSS Dev tools no file names

然而,当我转到WWW它工作得很好 - 在那里我可以看到CSS文件名?

有人可以请帮忙 - 我不认为这是我,因为我一直使用他们多年,它已经工作得很好。

见网站截屏:

Web Site link dev tools with file names

我只注意到今天这个

谢谢。

回答

1

我不知道它是否是开发人员工具中使用工作区的症状。你有没有在本地设置工作区和映射网络资源?我没有使用太多,但我搞砸了,看看我能否复制你的问题。

我没有看到你在这里看到的确切内容,但是当我设置工作区时,CSS文件名消失了,只剩下localhost/

没有工作区:

Without workspace: full file name is visible

随着工作区:

With workspace: file name is not fully visible

+0

如何将localhost放入我的工作区 - 我将整个网络路径放到我的文件中无效,而且之前没有使用工作区名称 - 这是一个奇怪的现象,但我确信它正在设置某处 - 我只是不知道在哪里,因为你可以看到如果屏幕截图localhost甚至没有显示(虽然我没有它我的工作区) – 2014-11-08 22:09:34

+0

我认为你是对的,这并不能解决你的问题 - 这只是一个刺黑暗。我认为我在今天编辑我的一些CSS时看到类似于您所谈论的内容,但我不知道如何一致地重新创建它。问题从此消失了。 – 2014-11-08 23:54:41

0

请尝试以下方法:

  1. 打开DevTools
  2. 单击右上角的设置齿轮。
  3. 滚动到常规选项卡的底部并单击“恢复默认值并重新加载”。
+0

试过 - 它没有工作 – 2014-11-08 21:53:10

+0

电脑重启? – 2014-11-08 21:58:13

+0

做到了也:( – 2014-11-08 22:08:45

0

工作区引用从它的根sourcemaps

我只是通过生成我sourcemaps让他们从我的工作区的根引用(在我的情况较少)相对其源文件修复了这个问题。当不使用开发工具工作区时,它可以工作,因为它们能够找到与源图所在的目录相关的源文件。当不从工作空间引用时,由于Chrome看起来是从工作空间根目录引用的,因此这会中断。对于JS源地图也一样。

MyWorkspace (node project root) 
    > bower_components 
    > node_modules 
    > routes 
    > wwwroot (public static root) 
    > app (AngularJS client) 
    > assets 
     > css 
      > app.css 
     > maps 
      > app.css.map 
     > less 
      > bootstrap (less source) 
      > app.less 
    > app.js 
    > package.json 

所以对我来说,sourcemap “来源”:数组必须引用我少的源文件,像这样:

app.css。地图

{ "version":3, 
    "sources": [ 
     "/wwwroot/assets/less/app.less", 
     "/wwwroot/assets/less/....".... 

除了这个,我不得不设置节点,以便当它在开发模式下运行时,它暴露了更多的路线/wwwroot文件/以及/node_modules/,以便它可以链接正确地路由到我的工作区。

我使用一饮而尽,不太sourcemaps打造CSS sourcemaps和我少构建步骤看起来像(万一有人与一饮而尽挣扎) - 如果你改变的路径

.pipe(less({ sourceMap: { sourceMapRootpath: '/wwwroot/assets/less' }}))

-1

您Chrome当前正在映射Chrome时,它可能会映射无效的文件夹路径。

我的解决办法是:

  1. 打开DevTools

  2. 转到设置

  3. 进入工作区菜单

  4. 删除无效的文件夹