Beginners sometimes have an impression of coding as someone with encyclopedic knowledge, and incredible math skills, opening up a text editor and furiously typing away in a plain looking text editor. While that may make a good movie character, no real life engineers work that way.
Every good engineer, like every good craftsman relies on tools. One of the fundamental tools for JavaScript developers are the browser's developer tools.
In this lesson, you'll learn how to access the developer tools and one of the most common developer tools, the console.
Web Browser: Chrome
Part of the beauty of JavaScript is that it's not like most programming languages which require you to install interpreters or compilers. Almost every computer in the world is able to use JavaScript, and its right there under most people's noses, a web browser!
Most browsers have identical functionality, but for simplicity's sake, this course uses Chrome since it's currently the most popular web browser in the world.
So without much further ado, let's get to coding!
Access The Developer Tools
Here is how you can access the developer tools:
- Open Chrome.
- Navigate to a website, any page will do.
- Right-click anywhere in the browser window, select Inspect, and navigate to the console tab:
Here's a link to the documentation if you want to learn more about all the ways DevTools can help your development process. These tools are invaluable debugging tools for any JavaScript, HTML or CSS developer. Front-end developers rely on all three languages.
Write Some JavaScript in the Console
Type the following code into the console:
setTimeout( () => alert('Time is up!'), 1500)
This function will now wait 1500 milliseconds (1.5 seconds), and then an alert will pop up on the page telling you 'Time is up!'
Feel free to manipulate this code and satisfy your curiosity. If you want 10 minutes before the alert box pops up, just replace 1500 with 600000 milliseconds:
setTimeout( () => alert('Time is up!'), 600000)
You can also set up small sequences to make it easier to calculate time:
setTimeout( () => alert('Time is up!'), 1000 * 60 * 5)
This does 1000 milliseconds, which is 1 second, times 60 seconds, which is one minute, times 5. So the time-out happens after 5 minutes.
If you want to see a different message, just change any of the text between the two single quotes:
setTimeout( () => alert('Remember to take the pizza out the oven!'), 600000)
Now you can easily set a timer with a custom message right from the heart of the browser.
You learned about the developer tools in your browser, that consists of a JavaScript console and some other tools that can help you with monitoring and debugging. The developer tools will become a trusted companion on your JavaScript journey. You started experimenting with the JavaScript console, by typing in commands and observing the output.
Summary: Use Developer Tools to Build a Simple Timer
- All web browsers are able to execute JavaScript
- Developer tools are essential for effective coding
- You can execute JavaScript interactively in the Console tab in the Developer tools