Today, we have a couple tips for more effective JavaScript debugging

Use the Console to check for Warnings and Errors

Sometimes the best way to debug a web application is to use the JavaScript console. I have often used the right click context menu -> select element to open the chrome developer tools to access the console, but there are some potentially easier ways to access this.

Important short cuts to memorize

F12 – Quickly open and close the chrome developer tools

Control + Shift + J – Opens the developer tools, and also opens the console window, saving a click if the console was not open previously. This may be easier than reaching for the F12 key

Here is what the console looks like on reddit.com

You have access to all of the code running on the page through the console, so you can inspect the values of objects or run functions by typing them into the console.

Use Codepen.io for quick experimentation

https://codepen.io is a tool that allows you to write code in the browser and see the results as you go. Code written can easily be shared with others or even embedded into another site making this tool useful for creating proofs of concept.

Sometimes when I don’t remember how a javascript function works, or debugging a small piece of functionality, it is helpful to isolate the code you are working with so that other code does not interfere with your understanding. The Codepen.io interface allows you to define your html, css, and javascript all in one window. I find this much easier than creating files one by one in a text editor or creating an entire project in an IDE like visual studio to test something small .

Use console.table(object) to visualize javascript objects

Type console.table(object) and any object name to get the object to display in a tabular format with properties of the object as rows and indices if it as array or properties of those properties as columns. I find this most useful when the object contains arrays. For example, if you have an object that looks like this called stringData, it might be easier to visualize if it is formatted as a table.

So we can type console.table(window.stringData) into the console, and the object now appears for us like this. Pretty Neat. You can ever sort the columns ascending and descending, as well adjust the width of the columns