Developer tools

Let's put some of the principles we've learned into practice.

Every modern web browser comes with a set of developer tools to make developing web pages easier.

We can use them to understand how a web page is put together, and what happens in the background as we browse around the web.

If possible, use the Chrome browser for this lesson. If you can't, Firefox, Safari or Edge will also work. If you only have access to Internet Explorer, skip this lesson.

Each browser has a slightly different way of accessing its dev tools. In Chrome, right click the web page anywhere, and click Inspect.

Instructions for other browsers:

• Firefox
• Safari
• Edge

Don't worry about damaging the website. Any changes you make in the developer tools are not saved, and will be undone once you refresh the page.

Elements

The Elements tab shows you the hypertext markup language of your webpage. Explore the HTML code and try to relate it with what you see in the finished webpage.

In most browsers, including Chrome, you can right-click particular elements on a webpage and hit inspect to jump directly to the corresponding HTML.

Console

Your browser contains an engine that interprets and runs Javascript programs.

Webpages run Javascript quietly in the background, but you can write and run your own Javascript using this tab.

Let's run a simple Javascript program now.

Depending on what website your browser is on, there may be some messages in the console already, or it may be blank.

In either case, there should be a cursor at the bottom. Type the following and hit return.

console.log('Hello world')

We instructed the console to print out the message "Hello world", which you should see appear below the line you typed.

We'll be writing much more Javascript in future modules.

Network

Whenever you download a webpage, your browser is downloading one or more files. Modern websites will often download dozens of separate files: HTML, CSS and Javascript, data files, images, videos and others.

You can use the network tab to see:

• Name - files the browser tried to download
• Status - whether any failed to download
• Size - how large each is
• Time - how long each took to download

If you go to this tab now, you might not see anything. The network tab only records what the browser is doing when it is open and on-screen.

Try refreshing the current page to fill the network tab with info.