The Javascript console and Developer Tools in Chrome

Owned by Eliot Muir
Last updated: Dec 16, 2021
2 min read

I think this is best way I know of teaching people how to use and master web technology. Start with Javascript and learn about the Javascript console in your browser. Through this you can also start to get familiar with CSS and HTML.

This is how we make our sandbox to play.

So make sure you are using the Chrome browser on a desktop computer. Don’t try to do this on your mobile device and if you are using another browser please install Chrome and use that browser. Here’s a rough video of me working with the marketing team showing then how to do use it:

These are some of steps we follow in the video.

Open another browser tab, let’s start on a website - say my companies one:

https://www.interfaceware.com/

Step 1 - Right click on some part of your browser and click “Inspect”

Then at the console we’re going to put in a couple of Javascript statements which will clear out the content of whatever website you are on:

document.body = document.createElement('body');

This will clear the screen of the browser. How has it done it?

Basically a webpage is structured into a body tag which has the content of the page. This creates a new body object and replaces the old body with it.

The next line will populate the page with some trivial content:

document.body.innerHTML = '<h1>A heading</h1><div class="BLOCKone">Block</div>';

We have populated the page with a heading and a trivial block called a ‘div’ tag with the word Block. Now the text might be formatted with some styling like a non default font or color. This is because most likely the website has some CSS styling rules.

How do we clear those out?

We can do it by clearing the inner HTML of the head tag using this line:

document.head.innerHTML = ''

Now let’s play around with some styling properties. We’ll change the font family to Arial, the background color to green and the foreground color to white:

What we are doing here is altering the “Cascading Style Sheet” rules on the fly with Javascript. These are various properties we can alter.

Now let’s change the content of the block:

Okay - well done - you have officially crossed the boundary and become a Javascript web programmer!

Some of useful concepts to cross reference in the video: