Developer Tools (v1)

Introduction

All of the most popular modern web browsers include a suite of tools designed to help with the development of websites. They are sometimes referred to as the web inspector. These tools allow you to inspect the HTML, CSS, JavaScript and much more on websites you visit and build.

Why do you need to know how to use developer tools?

Knowing how to use your browser’s developer tools is an indispensable skill for a web developer. They allow you to easily and quickly track down the cause of issues and bugs, like problems with layout or other CSS hiccups. What might have taken an hour or even a few hours to track down and fix without the use of these tools often takes a matter of minutes or even seconds with the help of developer tools.

As you will come to see in the assignments, much, much more can be done with developer tools other than debugging CSS issues. They provide you with an incredibly powerful assortment of useful tools that will save you a lot of frustration and time as you develop your own websites.

Although they offer you so many useful capabilities, learning how to use the developer tools isn’t that difficult. It can feel clunky the first few times you use them, but with a little practice, you will soon find yourself comfortably using them to experiment and fix bugs with ease on your web pages.

Learning Objectives

Make sure you can do each of the following once you have finished the assignments:

  • You can open the developer tools in your browser.
  • You can select a specific HTML element on your page with your browser’s developer tools.
  • You can use developer tools to experiment with the CSS on specific elements of a web page.

Assignment

  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. It talks a bit about Bootstrap, which you may not know about yet. Don’t worry about it at this point; 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

UPDATED: 19.01.2021

Contributors:

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.