Hi All, here I am with my second blog. In my previous blog, I gave some basic ideas about debugging. So today we are going deeper into debugging and see exactly how breakpoints work.

Debugging is a very difficult task especially when working on complex projects. Browser’s in-built debugging tools have made it quite easy to debug codes.

So, let us see how we can use breakpoints in chrome.

Step1: Chrome DevTools.
We can go to the DevTools by pressing “Command+Option+I” in Mac or “Control+Shift+I” in Windows and Linux. We can see the inspect panel on the left-hand side of the browser window. Inspect element gives different options to work with.

Here are the options present in the inspect panel in Chrome.

1.Console:
The console is used for printing logs and it also displays errors and warnings.

2.Elements:
We can use the elements section to inspect HTML elements and do styling in them.

3.Sources:
All the files that are present in the current working directory can be seen in the sources section and we can choose the file which is required to be inspected.

4.Network:
It is used for Inspecting all the network calls that are made by clients to the server, such as its HTTP headers, content, and size.

DevTools in Chrome Learn How to use Breakpoints (For Beginners) in JavaScript Debugging

Figure 1: DevTools in Chrome

Step 2: Select the “sources” section
Now we have to go to the sources section which is present in the inspect. When we go to the sources section we will find a file navigator. We can navigate through it and choose the file we have to debug.

Sources panel in the browser Learn How to use Breakpoints (For Beginners) in JavaScript Debugging

Figure 2: Sources panel in the browser

Step 3: Mark lines as breakpoints
Once we select the file that is to be debugged we can see there are line numbers written across each line of code. We have to click on this line number. Now this line will act like a breakpoint and the execution will stop once the control comes over this line.

Line no.17 marked as a breakpoint Learn How to use Breakpoints (For Beginners) in JavaScript Debugging

Figure 3: Line no.17 marked as a breakpoint

Step 4: Move ahead line by line.
Once the execution stops due to breakpoint, you can resume the execution by clicking on the blue button shown in figure 4. Now the execution moves forward line by line. Here you can inspect each line of code along with the values contained in the variables.

Execution stopped due to the breakpoint Learn How to use Breakpoints (For Beginners) in JavaScript Debugging

Figure 4: Execution stopped due to the breakpoint

Step 5: Check the values of variables
The values of the variables can be checked by hovering on the variable. The main advantage of using breakpoint is that we can check the values of more than one variable at the same time which is not possible in case of logging consoles, where we have to write console.log() for every individual variable.

Inspecting the values present in the variables Learn How to use Breakpoints (For Beginners) in JavaScript Debugging

Figure 5: Inspecting the values present in the variables.

So this is how we inspect variables and objects in JavaScript file by using breakpoints. It is a good practice to use breakpoints because of its simplicity and efficiency. Once we get good command over this technique, debugging can really become an easy task for developers.

Keep reading and Keep learning!!!

If you’ve any doubts, please let us know through comment!!

Follow Us on Facebook | Twitter | LinkedIn.

Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced ReactJS Development Services for your esteemed project today.

Let CronJ assist you..!

Thank you !!!