Developer Tools Copy

Introduction

Developer tools are tools that help developers to do their work faster and in a more productive way. These tools are also referred to as the web inspector. All modern web browsers include these tools, which among other things, allow you to inspect the HTML, CSS and JavaScript of a website.

Usefulness of developer tools

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!

Learning Objectives

  • Open the developer tools in your browser.
  • Select a specific HTML element on your page with your browser’s developer tools.
  • Use developer tools to experiment with the CSS on specific elements of a web page.

Study

  1. Some tips and tricks by Halim Boussaada

  1. Watch the next video that goes over the most useful features of the Chrome DevTools in some detail.

Duration: 11 minutes

  1. Watch the next awesome tutorial from LearnCode.academy on how to use developer tools effectively when working with your CSS. As you will see it talks a bit about Bootstrap. Don’t worry if you don’t know about it yet. Just check out the stuff he’s doing to CSS in the DevTools. In particular, editing CSS in the browser in real time is a serious productivity booster compared to using your text editor and continuously refreshing to see the changes.

Duration: 12 minutes

Take a 10 to 15 minutes break and then complete the following interactive tutorials:

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

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

  3. Learn about the Chrome Code Coverage Tool and how to spot and remove unused CSS and JavaScript code.

Here’s video showing how you can use the Code Coverage and spot unused CSS:

Duration: 5 minutes

Tips

While making changes to CSS and JavaScript files that are loaded via the link and script tags, it is advised to do a Hard-Reload (or Hard-Refresh as it is sometimes called) in order for the updated resources to load. If you are not seeing the expected results on your browser, even though you’ve update your CSS styling or JavaScript code, it might be that you haven’t saved the changes or that the cached versions of the CSS and JS files are still loaded in the browser.

There’s a nice setting in the Developer Tools (Chrome/Brave) that disables caching while the DevTools are open.

Disable Cache

Additional Resources

Back to Lesson