p1-insta485-static

Browser Developer Tools Tutorial

This tutorial will explain how to use the developer tools built in to your web browser.

Table of Contents

View source

View the HTML source of a web page.

Chrome

Firefox

Safari

Hard refresh

Portions of a page such as images and JavaScript source code are sometimes cached by the browser. If you change the source code or image, you need to tell your browser to reload it. This comic explains (credit: xkcd.com). refresh types

Developer tools

How to open the developer tools.

Chrome

Firefox

Safari

Console

Use the console to see errors generated while rendering a page. Also, anything sent to console.log() in JavaScript will appear in the console.

For example, create test.html with the following contents.

<html>
  <body>
    Hello world!
    <img src="bad.jpg">
  </body>
</html>

Open test.html in your browser. Open the developer tools. Select the Console tab.

developer tools console

Elements

Use the Elements tab to link rendered parts of a page to the underlying HTML and CSS.

Create two files for this example, index.html and style.css.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="important"><p>Hello</p></div>
    <div><p>world</p></div>
  </body>
</html>

style.css

div.important {
  font-weight: bold;
  font-size: 200%;
}

Open index.html in your browser. Open the developer tools. Select the Elements tab.

Click a line of HTML to see where it appears on the rendered page.

Use the selection tool to hover over a rendered part of the page and see the HTML behind it.

JavaScript debugger

Chrome

Get Started with Debugging JavaScript in Chrome DevTools

Firefox

Debugger

Safari

Debugging overview