Setting up Workspaces allows Chrome DevTools to write to disc. This is handy during local development - it speeds up workflow by allowing changes to LESS/CSS in the Chrome DevTools “Sources” window.

It requires compiled CSS (e.g. from LESS) to be source mapped - in our case this is usually taken care of by the Grunt grunt-contrib-less module.

Set up Workspaces

The sources tab is basically a file navigator in the Chrome Dev Tools sidebar that shows resources loaded by the web page. Set it up to write to disk:

• Open local webpage NOTE - the page must be server output for LESS source mapping to work
• Set up LESS source maps
• Open Dev Tools
• Right click in the navigation area of the “Sources” tab
• Select “Add Folder to Workspace”
• Give DevTools access - the folder will appear in the IDE-like navigation
• Right click on a file within the folder
• Select “Map to File System”
• DevTools wil recognise if the file on the filesystem has the same name as a page resource (e.g. http://localhost:9000/less/main.less and user/testsite/css/main.less)

This only needs to be done once per project.

Using the DevTools Workspace

• Right click and inspect element
• Select the LESS or CSS file associated with the rule that you want to edit
• The relevant file opens in the Sources tab
• Edit the file and click ctrl + s to write changes to disk

Set Up LESS Sourcemap

Sample Gruntfile.js less task for local WordPress installation - requires grunt-contrib-less:

less: {
      dist: {
        files: {
          'assets/css/main.min.css': [
            'assets/less/app.less'
          ]
        },
        options: {
          compress: true,
          // LESS source map
          // To enable, set sourceMap to true and update sourceMapRootpath based on your install
          sourceMap: true,
          sourceMapFilename: 'assets/css/main.min.css.map',
          sourceMapRootpath: '/useful/wp-content/themes/useful-studio/' // '/useful' necessary cos site not in root of domain
        }
      }

Sample less task from a static HTML site served by means of grunt-contrib-connect module, serving on port 9000:

less: {
      development: {
        options: {
          compress: true,
          sourceMap: true,
          sourceMapRootpath: 'http://localhost:9000/', // adds a path onto the less files in the source map
          sourceMapFilename: 'css/agency.css.map'
        },
        files: {'less/main.min.css': [
            'less/main.less']
            }
        }
    }

The sourcemap is created, providing a reference to the relevant LESS files. The sourcemap is in turn referenced in the compiled CSS, in a comment at the end of the file.