chrome not showing the css source file name for the style

问题

Google Chrome dev tools all of sudden stopped showing the CSS file names on my local drive - see screen shot at link:

Link to CSS Dev tools no file names

However when I goto the WWW it works just fine - there I can see the CSS file names?

Can someone please help - I don't think it was me as I have been using them for years and it has worked just fine.

See Web screen shot:

Web Site link dev tools with file names

I just noticed this today

Thank you.

回答1:

I wonder if it is a symptom of using Workspaces in developer tools. Have you setup workspaces and mapped network resources locally? I haven't used them much, but I messed around to see if I could replicate your problem.

I didn't see exactly what you are seeing here, but the CSS file name went away when I setup a workspace, leaving only localhost/ .

Without workspace:

With workspace:

回答2:

Please try the following:

1. Open DevTools
2. Click the settings cog in the upper right.
3. Scrolling to the bottom of the general tab and clicking "Restore defaults and reload."

回答3:

Workspace references sourcemaps from its root

I just fixed this issue by generating my sourcemaps so that they reference their source files (less in my case) relative from the root of my workspace. When not using dev tools workspace, it works because they are able to find the source files relative to the directory that the sourcemap is in. When not referencing from a workspace, this breaks since Chrome appears to reference from the workspace root. Ran into the same issue for JS source maps as well.

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

So for me, the sourcemap "sources": array must reference my less source files like so:

app.css.map

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

In addition to this I had to setup node so that when it runs in dev mode it exposes additional routes for /wwwroot/ as well as /node_modules/ so that it could link the routes correctly to my workspace.

I'm using gulp-less-sourcemaps to build the CSS sourcemaps and my less build step looks like (in case anyone's struggling with gulp) -

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

回答4:

If you change the path of your CSS when Chrome is currently mapping, it may map the invalid folder path.

My solution it is:

1. Open DevTools

2. Go to settings

3. Go to workspace menu

4. Delete invalid folder

来源：https://stackoverflow.com/questions/26820529/chrome-not-showing-the-css-source-file-name-for-the-style