Chrome doesn't show css source file name for style

Question

Google Chrome dev all tools suddenly stopped showing CSS file names on my local drive - see screenshot below:

CSS Dev Link Contains No Files

However, when I go to WWW, it works fine - can I see CSS file names there?

Maybe someone can help - I don’t think it was me, since I used them for many years and it worked perfectly.

See web screenshot:

Website Linking Tools with File Names

I just noticed it today

Thanks.

Answer 1

I wonder if this is a symptom of using Workspaces in developer tools. Do you install workspaces and associated network resources locally? I did not use them much, but I mixed up to see if I can reproduce your problem.

I did not see exactly what you see here, but the CSS file name went away when I set up the workspace, leaving only localhost/ .

Without workspace:

With workspace:

Answer 2

Try the following:

• Open DevTools
• Click the cog button in the upper right corner.
• Scroll to the bottom of the general tab and click "Restore defaults and reload".

Answer 3

Links to the sourcemaps workspace from its root

I just fixed this problem by creating the source files so that they link to the source files (less in my case) relative to the root of my workspace. If you are not using the dev tools workspace, this works because they can find the source files relative to the directory where sourcemap is located. If you don’t link to the workspace, this breaks because Chrome points to the link from the root of the workspace. Fixed bug for source JS maps.

 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, sourcemap "sources": array should reference my smaller source files as follows:

app.css.map

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

In addition to this, I had to install node so that when I started in dev mode it would provide additional routes for / wwwroot / as well as / node_modules / so that it could correctly map the routes to my workspace.

I use gulp -less-sourcemaps to create CSS source codes, and my step less than assembly looks (in case someone struggles with gulp) -

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

Answer 4

If you change your CSS path when displaying Chrome at the moment, it may display the wrong folder path.

My decision:

• Open DevTools

• Go to settings

• Go to workspace menu

• Delete Invalid Folder