chrome没有显示样式的css源文件名

Question

Google Chrome开发工具突然停止在我的本地硬盘上显示CSS文件名 - 请参阅链接屏幕截图：

Link to CSS Dev tools no file names

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

有人可以帮忙 - 我不认为这是我，因为我多年来一直使用它们并且工作得很好。

参见网页截图：

Web Site link dev tools with file names

我今天才注意到这一点

谢谢。

Answer 1

我想知道这是否是在开发人员工具中使用Workspaces的症状。您是否在本地设置工作空间和映射的网络资源？我没有太多使用它们，但我搞砸了，看看我是否可以复制你的问题。

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

没有工作区：

使用工作区：

Answer 2

请尝试以下方法：

1. 打开DevTools
2. 点击右上角的设置cog。
3. 滚动到常规标签的底部，然后点击＆＃34;恢复默认值并重新加载。＆＃34;

Answer 3

工作区从其根

引用源图

我刚刚通过生成源代码来修复此问题，以便它们从我的工作区的根目录引用它们的源文件（在我的情况下较少）。不使用开发工具工作区时，它可以工作，因为它们能够找到相对于源映射所在目录的源文件。当不从工作区引用时，由于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＆＃34; sources＆＃34;：数组必须像我这样引用我较少的源文件：

<强> app.css.map

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

除此之外，我还必须设置节点，以便在开发模式下运行时，它会为 / wwwroot / 以及 / node_modules / 提供其他路由，以便它可以将路线正确地链接到我的工作区。

我使用gulp-less-sourcemaps来构建CSS源图，我的构建步骤看起来很少（如果有人在与gulp挣扎） -

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

Answer 4

如果您在Chrome当前映射时更改了CSS的路径，则可能会映射无效的文件夹路径。

我的解决方案是：

1. 打开DevTools

2. 转到设置

3. 转到工作区菜单

4. 删除无效的文件夹