15133

Chrome devtools not showing less files

Question:

I'm so close to being able to actually start actually <em>using</em> 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 <em>saw</em> 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?

Answer1:

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.

Recommend

  • Microsoft Graph API - Read Office 365 SharePoint List and Pull Data (Images)
  • ServiceNow: How to create a workflow that runs on incident update?
  • Setting up cakephp 2.0 on bluehost
  • Colour Saturation/Desat in jQuery
  • Error java.util.zip.ZipException: invalid entry size while copying image (.png) from 1 zip file to a
  • CSS method instead of display:run-in; to position a block inline?
  • Google Chrome Plugin development - Monitor network requests?
  • DataTables+RequireJS: Cannot read property 'defaults' of undefined
  • Simple Angular 2 app gives “Potentially unhandled rejection” error
  • Cross compiling Qt 5
  • Creating a layer of gradient within an SVG path dynamically
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • css font-size and line-height not matching the baseline
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • Skip Characters in Oracle TO_DATE function
  • Certain Arabic text gets incorrectly shown while other Arabic text gets showed normally?
  • Should I use composite primary keys in Grails?
  • Efficient & Pythonic way of finding all possible sublists of a list in given range and the minim
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • How to implement Deep Linking in Roku SG application?
  • Better Indy for Dephi 2007
  • Defining enums in Cython code that will be used in the C part of code
  • Compare struct to a constant in C
  • Activation Function choice for Neural network
  • Why does java tzupdater add leap seconds?
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Do I need to seed any random number generator before using EVP_PKEY_keygen of OpenSSL?
  • Does Mobilefirst provide a provision to access web services directly?
  • uniform generation of points on 3D box
  • ActiveRecord query for a count of new users by day
  • Paperclip, set path outside of rails root folder
  • Lost migrations and Azure database is now out of sync
  • Android screen density dpi vs ppi
  • How would I use PHP exceptions to define a redirect?
  • How to extract text from Word files using C#?
  • bootstrap to use multiple ng-app
  • Proper folder structure for lots of source files
  • Load html files in TinyMce
  • need help with bizarre java.net.HttpURLConnection behavior
  • Append folder name and increment by 1 using batch script