This course has already ended.
  1. COMP.CS.200
  2. 1. HTML: basics
  3. 1.4 Browser developer tools

Browser developer tools

For this course we’ll be using Google Chrome. Of course other browsers also have developer tools and you’re free to use them.

For web developers Chrome offers (at least at the moment) the best developer tools. Running audits in Chrome offers lots of information about SEO, Accessibility, performance, PWA practices etc etc. For this reason our examples are going to feature Chrome. At least on Edge, Firefox and Chrome pressing F12 opens up the developer tools.

../../_images/jwt_dt_1.png

Chrome with developer tools open.

../../_images/jwt_dt_2.png

You can also select any element by right clicking and selecting Inspect.

../../_images/jwt_dt_3.png

Hovering over an element in developer tools highlights it on the page.

../../_images/jwt_dt_4.png

Elements can be modified at will.

../../_images/jwt_dt_5.png

A link text is changed

../../_images/jwt_dt_6.png

Elements can also be deleted if needed

../../_images/jwt_dt_7.png

Only navigation links and footer remain after deleting content from the page

Open this page and once you’re on the site open browser developer tools. Follow the instructions in each question and select the correct answer.

By expanding <body> you’ll find tags for questions 2-5. For example for question 2 expand tag <buttons> and for question 3 expand tag <content> etc etc.

Select correct page title

How many buttons can be found from the HTML?

Remove attribute hidden from <content>. How many Hellos do you see?

What does the comment inside <comment> say?

What happens when you remove attribute open from <dialog>?

Posting submission...