Javascript inspecting

The JavaScript inspector is a useful part of web development and just screwing with sites in general, you can inject any of your own code, modify elements in the document itself and monitor the network (not covering this here). Additionally most of what's done with chrome extensions can be manually achieved with the inspector (if you have enough patience).

All major browsers have inspectors but I will focus on the developer tool suite that comes with chrome as it's by far the most popular browser and in my opinion the inspector is also the easiest to use.

Skip to the interesting stuff!

Inspecting elements

Even if you have absolutely no experience coding you've probably still seen how to do this already - or even done it by accident once or twice yourself. But this is the most important part so I'll cover it again anyway - everything else relies on this so remember to pay attention!

It's quite simple: right-click anywhere on a website and press inspect!

Image showing inspecting of element

Once you've done this a load colorful of HTML should appear, don't be afraid you don't need to understand it all, I'll walk through the important parts.

To follow along go to example.com and open the inspector. It should look like this:

Inspecting example.com

The purple highlighted text represents the HTML tags, these code the layout of the website and we will not be changing them in this tutorial. The right pointing triangles to the left of these tags show that the inspector has collapsed extra code. Click on them to expand the code.

To edit a specific piece of text on the site first find the right element in the inspector by clicking around until you've highlighted the right piece of text on the website (try it, it's easier than it sounds) or let the computer do it for you; right-click on the text you want to edit and choose inspect - the inspector should automatically focus on the right element.

In the inspector double-click on the text you want to change it should then allow you to edit it by typing what every you want. Go wild! This process will work on any site on the internet, just beware it can be confusing on more complex sites, just experiment. Once you are done, refresh to undo your changes.

Inspecting example.com header

Javascript console

The JavaScript console allows you to interact with the page's code and execute your own commands - much like chrome extensions do, with the console you can automate tasks, loop through items and react to events with custom code.

To enter the console, open the inspect window (as before) by right clicking on the page and choosing inspect. Once in this window opens you can navigate to the "Console" tab at the top of the panel by clicking on it. It should look like this:

You can now test some JavaScript! Type the following to the console and press enter:

> Alert("Hello World")

If everything has worked properly and you haven't made any typos (don't type the '>') an alert box should appear. Congratulations you have made your first bit of JavaScript! Now onto the interesting stuff...

Custom behaviors

Up to this point we've only done some very basic work with the inspector and JavaScript, it's not very useful yet. However, of course you can combine both of these tools to make some crazy custom behaviors - like a kahoot that plays itself for example! Lets get started, as an example I'll show how to create a speed clicker script - try to follow along with what I do.

For the purposes of this tutorial I have created a small speed clicker contest webapp, this is what I am going to be using to demonstrate the custom behaviors, however this process will work with any similar website.

Try it here

To begin with we need to understand what the site does; in this case it's very simple (you press the button and the page records it) but in more complex websites it can be more difficult, just play around until you see a pattern.

So, now that you know what the site does, its time to explore it using the inspector, because we know we want the script to click the button we need to find it in the inspector. Just as we did before right-click on the button itself and press inspect, the inspector should focus on the correct element as shown below.

This time we're not interested in the button's text though, we're interested in its id, you can find the id inside the first button tag and is contained in quotation marks. In this case we can see the text id="ClickMe" so that means the id is: ClickMe (note case is important "hello" is diffrent to "Hello"). Using this id we can begin to automate the clicking of the button using JavaScript.

Lets now open the JavaScript console by pressing the "Console" tab in the inspect window and write our first bit of 'useful' code:

> $("#ClickMe").click()

It's that easy! After running this code you should see the score counter increase by one point, this is the first step to true automation!

The first character is a dollar sign this shows the computer that you want to choose one specific element on the page. After this, there are brackets and quotation marks with the item id inside them. The quotation marks show that there is human readable text between them (in this case the id) and the brackets show we are doing an action (selecting the element). Before the element id there is also a '#', this just shows the computer its an id (not a class etc.).

The final part of the command is the .click(), this (as the name suggests) tells JavaScript we want to click the element between the brackets. After we hit enter the computer reads all this and clicks the button.

Well, that was fun and everything but that's not a speed clicker, it only ran once! Lets fix that right away and get a high score. Copy and paste the following code to the Console and press enter... You should see what the results are immediately (remember the remove the ">").

> setInterval( function(){ $("#ClickMe").click() } )

The code sure is fast! But how does it work?

As you can see, most of it's just the same code as before: the code is still calling $("#ClickMe").click() just like in the first place, the only difference is "setInterval" and "function" (and some funky brackets). But what are these doing?

The setInterval function's job is to run the code inside of itself over and over with a delay between each loop, because we have not given it a delay it just runs the code as fast as it can (which is exactly what we want, because the code clicks the button).

Because setInterval want to run a function but $("#ClickMe").click() (which we want to run) isnt a function, we need to make it a function. We will do this with the function keyword (belive it or not). As far as we're concerned this just ensures that setInterval run the right code. The curly brackets around the $("#ClickMe").click() show that everything between the brackets is a function and should be run when the function is called.

Remember: this concept can be applied to any website and can be used to automate any task; you can enter text to input boxes, press buttons in specific orders and even follow links programmatically with very few changes - it is possible to program anything you could do yourself.

Further reading:


Contact me

Privacy Policy

Home