One silent , but very handy feature when it comes to debugging is the source mapping.
We write a pre-processing language- scss, but thats alien to browsers. It understands only css stylesheets. Our compiler converts the scss into css.
But what about debugging?
When we take our browser debugging tools, it points to our css file only right? But then with pre-processors, we are not touching css at all. So there is no point in knowing the line corresponding to css, but would have been awesome it pointed out to "this particular line in this partial." . That is what source maps does for us.
The command line based options, or a pre-processing complier, all provides the corresponding css source maps when the scss file is compiled. Usually both will be in the same folder, same name, but with a .map extension.
We get a css file, along with its map file when we compile the scss. ( Here, i have used the "Prepros" tool which compiled my scss to create the map as well as css stylesheet )
See the difference in the below figure.
With the source map, it pointed out the exact line number along with the corresponding partial name. (header.scss ) instead of the app.css which we see without sourcemap.
We write a pre-processing language- scss, but thats alien to browsers. It understands only css stylesheets. Our compiler converts the scss into css.
But what about debugging?
When we take our browser debugging tools, it points to our css file only right? But then with pre-processors, we are not touching css at all. So there is no point in knowing the line corresponding to css, but would have been awesome it pointed out to "this particular line in this partial." . That is what source maps does for us.
The command line based options, or a pre-processing complier, all provides the corresponding css source maps when the scss file is compiled. Usually both will be in the same folder, same name, but with a .map extension.
We get a css file, along with its map file when we compile the scss. ( Here, i have used the "Prepros" tool which compiled my scss to create the map as well as css stylesheet )
See the difference in the below figure.
With the source map, it pointed out the exact line number along with the corresponding partial name. (header.scss ) instead of the app.css which we see without sourcemap.
No comments:
Post a Comment