3

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.

Sir
  • 7,735
  • 12
  • 72
  • 138
Dave Nugent
  • 121
  • 4
  • 9

4 Answers4

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:

Without workspace: full file name is visible

With workspace:

With workspace: file name is not fully visible

Jordan Powell
  • 320
  • 1
  • 5
  • how do I get localhost into my workspace - I put the whole network path to my files to no avail and this was working before without workspace names - this is a strange one, but I am sure it is setting somewhere - I just do not know where and as you can see if the screen shot localhost is even not showing (although I dont have it my workspace) – Dave Nugent Nov 08 '14 at 22:09
  • I think you're right, this doesn't solve your issue—it was just a stab in the dark. I think I saw something similar to what you were talking about while I was editing some of my CSS today, but I have no idea how to recreate it consistently. The problem has since gone away. – Jordan Powell Nov 08 '14 at 23:54
0

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."
Matthew James Davis
  • 11,744
  • 6
  • 56
  • 86
0

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' }}))

cchamberlain
  • 14,693
  • 6
  • 52
  • 67
-1

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

Nesaver
  • 21
  • 2