May 26, 2021 Chrome A guide to developing tools
Many developers use CSS preprocessors to produce CSS style sheets, such as Sass, Less, or Stylus. Because CSS files are generated, it is useless to modify CSS files directly.
For preprocessors that support CSS source mapping, DevTools allows you to edit preprocessor source files in real time in the source panel without leaving DevTools or refreshing the page to see the results.
When you review the style elements provided by the generated CSS file, the element panel displays a link to the source file instead of
.css
file.
If you want to jump to the source file:
Control
on the CSS property name or property
Command
can open the source file and jump to the appropriate line by clicking the left mouse button (or using the Command plus left mouse button on the Mac).
When you save changes to the CSS preprocessor through DevTools, the CSS preprocessor rebuilds the CSS file. DevTools then reloads the newly generated CSS file.
Changes made in the external editor are not detected by DevTools unless the relevant source files contained in the Source tab regain focus. Also, manual editing of CSS files generated by Sass/LESS/other compilers will break the association of the source map until the page is reloaded.
If you're using Workspaces, you need to verify that the resulting files are mapped to Workspace. You can view and validate CSS originating locally in the tree to the right of the source panel.
There are a number of requirements to meet when using CSS preprocessors:
Python SimpleHTTPServer
provides this header by default.
You can start a web service like this to service the current directory:
python -m SimpleHTTPServer
By default, CSS source mapping is enabled. You can choose whether you want to enable automatic reloading of the generated CSS file mode.
If you want to enable CSS source mapping and overload CSS files, refer to the following steps:
To edit Sass files in real time in Chrome, you need Sass over 3.3, because that's the only way to support source mapping.
gem install sass
When Sass is installed, turn on the Sass compiler to monitor changes to your Sass source files and create source mapping files for each resulting CSS file, such as:
sass --watch --sourcemap sass/styles.scss:styles.css
DevTools supports Source Map Revision 3 Proposal. This protocol is implemented in several CSS precompilers (updated in August 2014):
For each generated CSS file, the preprocessor also generates a source mapping file (.map) for the compiled CSS. T he source map is a JSON-formatted file that defines each generated CSS declaration and the corresponding line map in the original file. The last line of each CSS file contains a special comment that describes the path to its source file.
/*# sourceMappingURL=<url> */
For example, given a CSS file .css styles:
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
font-size: $textSize;
color: $fontColor;
background: $bgColor;
}
Sass generates a .css file and adds a comment on the source file path map later:
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */
Here's an example of a source mapping file:
{
"version": "3",
"mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
"sources": ["sass/styles.scss"],
"file": "styles.css"
}
Many developers form their own workflows as they use CSS preprocessors. For tutorials and alternate workflows, refer to the following article:
Note: External resources may not be material about the latest version of Chrome.
The above applies to CC-By 3.0 license