Chrome devtools not showing less files

2019-09-15 07:32发布

问题:

I'm so close to being able to actually start actually using less, but for one final roadblock: I can't get the less files to show up in Chrome Developer Tools. I gotta have my developer tools.

I'm using Codekit to compile the less to CSS and to generate the source map, both of which CK seems to be doing. Chrome is even auto-refreshing when I save less changes. But there is only one css file referenced in the inspector, and that is the master, compiled bootstrap.css file.

At one point I saw the less files in the inspector, but no longer. I have no idea when they stopped showing or why, but I can't seem to get them back. I tried turning on Experimental developer features in Chrome, no dice. I made sure Codekit was generating a source map file in the CSS folder, yes. I even opened the map file, but immediately closed it again. Basically a massive, single line of text that I can't make heads or tails of. No help there.

I saw there was a way of adding the less folder to the Chrome workspace, but from what I can tell this will require me to change my entire folder structure, moving the less folder into the root folder of the site, which will have the cascading effect of me having to remap the file source and destinations in Codekit (for starters), which I'd like to avoid (especially if it doesn't work).

I realize there is little in the way of specific info here, but I'm not sure what else I can provide. I'm hoping there is a key step I'm missing, but two hours of googling keep turning up the same results. Anyone have any suggestions?

回答1:

Well, looks like I've solved the problem, but still no idea what caused it to begin with.

When Codekit generates the source map, it's also supposed to append a line at the bottom of the target CSS file:

/*# sourceMappingURL=bootstrap.css.map */

I found this missing line in a file I believe I'd mistakenly targeted earlier in this confusing process. I copied and pasted it to the bottom of bootstrap.css (where for some reason, it was not present), and bingo, less files in the dev tools. Now if only I knew what I did to make it go away in the first place... you know, so I don't do it again. Here's hopin'. If you or someone you know sees the error of my ways, I'd be very grateful for any edification on the subject.