💡 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
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.