Developer tools are such a powerful suite of tools that knowing how to use them it is an essential skill for a web developer.
For example those tools allow you to easily track down the cause of an issue or even find bugs. Something that would have taken hours to be discovered and fixed, without using these tools, with the developer tools takes only minutes or even seconds.
A good example is fixing issues and problems with the CSS. However this is only one simple example. The developer tools have much more useful capabilities. These tools will save you a lot of frustration and time as you develop your websites.
Although they have too much to offer, it isn’t hard to learn how to use them. At first it might feel clunky but as you use them you will become more comfortable using them. All it needs is some practice and you will be ok!
Duration: 11 minutes
Duration: 12 minutes
Take a 10 to 15 minutes break and then complete the following interactive tutorials:
Complete the following interactive tutorial to learn the basics of viewing and changing a page’s DOM using Chrome DevTools: Get Started With Viewing And Changing The DOM
Complete the following interactive tutorial to learn the basics of viewing and changing a page’s CSS using Chrome DevTools: Get Started With Viewing And Changing CSS
Here’s video showing how you can use the Code Coverage and spot unused CSS:
Duration: 5 minutes
There’s a nice setting in the Developer Tools (Chrome/Brave) that disables caching while the DevTools are open.