💡 Would you like more free lessons? Please subscribe on YouTube to show your support.
To make changes to front-end code using new DevTools features.
Changes you make via DevTools are often lost with no way to recover such changes after a page reload. It is usual to copy your changes from DevTools and paste them into your codebase through a code editor. This workflow can be improved.
If you are following along, here are the experiments you need to enable in Chrome Canary.
Don't forget to:
To follow along, run generator-webapp with Yeoman.
You can use the built-in (and experimental) DevTools terminal to run the gulp serve
command. Full instructions to running the terminal are here: umaar.com/dev-tips/139-devtools-terminal-linting/.
Navigate to the Filesystem pane in the Sources panel.
When you add the webapp you created with generator-webapp, find main.scss
.
The green icon indicates a mapping has been made with source maps. Try to make a change in the main.scss
file and hit Cmd + S / Ctrl + S, notice changes are reflected instantly thanks to browsersync.
As you make changes in the Sources panel, the line gutter highlights to indicate a change has been made. The colour also hints at whether the change was a deletion, modification or addition.
You can open up the Changes panel from the drawer. Notice it displays all your changes in a git-style diff.
Alt tabbing between various windows to make minor changes to your CSS (and even JavaScript) can sometimes be overkill. Incorporating the features covered in this lesson into your authoring workflow can help make this process smoother.