Debugging Tips: Javascript

Debugging is developer process to remove wrong logic or even incorrect syntax in their code. We will spend huge amounts of time debugging code, and if its done incorrectly will consume more time than it should.

Lets discuss how to debug Javascript on chrome ‘will apply to other browsers too’ dev tools and also using vs code and how this can increase your productivity.

Chrome Developer tools “other browsers have it too”

Chrome developer tools is a part of the browser that allows you to debug code, see the structure of your html code with its css styles and how the effect it visually, and you can also interact with the behaviour of your project on the browser. To open chrome developer tools on windows we can compound the command ctl + shift + I
Or you can go to the top-right corner to and press the settings, then press the more tools option then select the Developer Tools option then we will have access to developer tools but only write do Javascript code on the console tab

Visually showing you how to access the chrome dev tools.

Console Object:

Using console object to for debugging is common for developers, we can console log objects at run time to see what is in them, create a console warning or error to handle thrown errors or we can display objects so we can find exactly the key, value pairs in them, lets go through them.

We can use console.log to log strings, numbers, objects even html elements on the console as follows and it will pop up the options you have and if you have saved a variable:

We can also use console.log({ Object }) and put the object within brackets so it prints as object or use the console.dir method to see object with elements in it but this illustrates. It comes without saying that the object elements will be accessible using the dot operator.

1. this example shows you how to initialise a variable 'or use one from your js which is running with that page'.
2. use the console.log({obj}) function with object in brackets as params or you can use console.dir(obj) and you can also witness the properties of that object you logging.

For times you wish the code to log error or a warning, we have those options too, using the command console.error(TheErrorString) & the console.warn(TheWarnString).

You can also grab dom elements and log them to the console in situations you want to see which properties of that object are accessible or even use XML using console.dirxml(obj)or object format using console.dir(obj).

This image illustrates that console.log(element) will return to you a printed HTML element and you can see its structure and only its children but console.dir will return the elements properties with their values which is more powerful.

We can also printout a group of statements or something like a
stack trace of where a problem might be or something else using console.group, followed by console.info and console.groupEnd.

We also have console.table(Object) which will take an object or console.table({obj1, obj2, objN}) and return it as a table format. Which is useful for see thing or data formatted properly.

For this image we see use of table function using one object and another using two data objects.

Using Break Points

We use break points for situations where the code is resulting with something unexpected, so its best to see the behavior while the code is on compile time. So lets look at what it looks like or works.

So what we have at line 13 is what we call a log message and it logs a message to console when code execution reaches that line, and line 14 is in fact our break point you just add by clicking the space between border and line number.

Here we can see the total break points in the project and also the ones which are visible on that file.

So as soon as you make these break points on where you want to monitor the activity of the code you then press F5 or go to run tab and choose the Start Debugging option then press Launch and break point controls will appear, and the code will stop when it meets the break point.

this image shows what you will see when you running your project on debug mode and your code has hit the break point on visual Studio Code.

this image shows the same thing just in chrome browser, things stop when the project is stuck on your break point.

Here we can see chrome representation of same thing from VS Code with data showing on the side and also the break point hung on the JS.

What do you use for your debugging and which process to grow in that debugging sphere??