Debugging your JavaScript code
Even experienced coders make mistakes and JavaScript is no different to Python or C++ in this respect. If you are to become an established web developer you will need to use various tools like the developer console. All web browsers have this tool but access to it is slightly different for each one.
Safari browser
For Apple product users the console is reached from the Advanced toolbar option as shown below.
You should now see an additional menu item in your browser labelled Develop. We don’t recommend Safari as a browser for users just starting out with JavaScript, not least because it’s specific to Apple devices and you don’t want to restrict your web developer skills to a single supplier.
Microsoft Edge and Firefox browsers
These browsers, and others, normally use the F12 function key to access the console. Each console has minor variations but once you are familiar with one you will find switching to others a simple process. Google Chrome is a popular browser and the one we recommend you start with as you learn to code in JavaScript.
Google Chrome browser
There are two ways to access the console and it will depend if you are viewing via an app or a regular browser. App formats were traditionally available on mobile phones but they are now available for desktop PC’s as well. If you can see the “hamburger” menu icon, 3 horizontal bars, select it and then choose Tools followed by Developer Tools.
Alternatively you can right click on any webpage and select the last item in the list, shown as Inspect. You will also see the keyboard shortcode of Ctrl+Shift+I but personally we only use them if the PC doesn’t have a mouse. In our opinion, use of the keyboard shortcut is over rated. Just learn to do things in a traditional way first. Such shortcuts will eventually become habitual to you. Don't get stressed over it!
You will have more than enough to learn regarding JavaScript syntax so don’t waste your time trying to remember dozens of keyboard shortcuts!
In Chrome you will see a slightly different version of the console depending on the version number of your browser. For example this is what we see from our browser:
Once you selected Inspect or the hamburger icon your screen will be split in two with the original web page on the left and all the additional debugging options and other extras on the right. As shown in the picture above there are additional menu items such as Elements,Console, Network and Timeline etc.
For now we will concentrate on the menu item shown as Console but you will also find the other items useful for general debugging issues.
What can you expect to see in the Console?
Basically any errors you have made in your JavaScript code will appear here. Through experience you will quickly learn to debug your code even if some of the error messages look a little alien to you at first.
I wish you well on your journey into the world of JavaScript programming. I will come out with more such blogs where we will learn JavaScript programming and have fun all along!
Posted on Utopian.io - Rewarding Open Source Contributors