How to Debug JS in Chrome?

For developers, debugging is an essential part that helps to identify & fix bugs while developing the Javascript-based program. But many new developers face roadblocks when it comes to debugging JavaScript-based programs in Chrome. 

Hence, we’ve covered the step-by-step process of debugging JavaScript in Chrome by using the Chrome Developer Tool.  So that you have a clear idea of how to debug JS in Chrome.

What is Chrome DevTool?

Chrome DevTool is an inbuilt web developer tool that helps developers instrument, identify & debug JavaScript-based programs in Chrome. It comes with real-time updates, identifies problems, and helps to enhance website performance. When you open the Chrome DevTool, then it opens a panel on the right side of the web page that includes many functions, including

• Elements: To inspect and edit DOM & style attributes.
• Console: Used to view & run javascript code.
• Source: Used to chrome js debug & breakpoints.
• Network: View & debug network-related activities.
• Application: Identify local storage, session storage, cookies, etc.
• Security: Debug certificate and other security issues.
• Memory: Used to track memory usage and fix bugs.
• Performance: Analyze speed & Optimization.
• Audits: Audit the app, performance, accessibility, SEO, etc.

These are the main functionalities that developers use for Debugging in Chrome.

Note: It’s important to learn some keyboard shortcuts of DevTools like :

• To open DevTools Elements, press “Command + Option + C” (Mac) or CTRL + Shift + C (Other OS)
• To open the DevTools Console panel, press Command + Option + J (Mac) or CTRL + Shift + J (Other OS).

How to Debug JS in Chrome?

If you’re a developer planning to debug JavaScript in chrome, then these are some quick ways to use DevTools for debugging NodeJS with chrome:

1. Add Breakpoints

The main purpose of adding Breakpoints is to pause the code. It helps developers to test each line of code and resume whenever the process is done. For large JavaScript programs, breakpoints prove useful in identifying bugs.

The main purpose of adding Breakpoints is to pause the code. It helps developers to test each line of code and resume whenever the process is done. For large JavaScript programs, breakpoints prove useful in identifying bugs. 

Here’s the process of adding a Breakpoint with an example:

On the DevTools Sources Panel, click on the left navigation panel and select the .js file to open the lines of code to add a breakpoint.

Right-click on the line where you want to add a breakpoint and select “Add Breakpoint.”

Hence after adding a breakpoint, when the code runs then, it pauses at the breakpoint. 

2. View/Make Changes to Local, Closure, and Global Properties

Once you’ve paused the code by adding Breakpoints, it’s time to view & edit the local, closure, and global properties. In this step, you can test the functionalities and see whether the output is satisfactory or needs further editing. With Breakpoints, it’s easier to run the specific portion of code to check functions. 

By clicking the “Scope” panel, a panel opens that displays useful information to fix bugs. 

3. Create, Save and Run Snippets

Now, you can use Snippets that help to create, save and run scripts in any part. To add a snippet, click on the Snippets menu on the left panel. 

Click “+ New Snippet” and write the code in the middle panel. 

To save the snippet, press Command + S (Mac) & Ctrl + S (other OS).

To run the snippet, click “Run” and press Command + Enter (Mac) or Ctrl + Enter (other OS)

4.  View the Call Stack

With Chrome DevTools, you can view the call stack. It’s mainly used for those JavaScript programs that have many asynchronous functions and show errors. 

While debugging a large program, the call stack is a great option that helps to see the program’s functions and makes it easy to identify the errors from which function. 

By clicking the “Source” Panel, you can open the Call Stack to see the functions. 

5. Blackboxing

When debugging the javascript program, some scripts work without showing any error and must be ignored for debugging. This is where Blackboxing comes in, which helps you ignore these specific scripts from debugging. Without Blackboxing, it’s hectic to comment out each line of code. 

To use Blackboxing, select the script file you want to ignore.

• Now, click on the left panel in the Source Tab and right-click on the middle panel to “Add script to ignore list.”

• Once you use Blackboxing to add a particular script to the ignore list, then you can debug to identify & resolve errors. 

With Chrome DevTools, debugging JS in Chrome becomes an easier process. 

Some Common Errors of JavaScript with Solutions

Here are some common errors that occur in JavaScript so you can identify and resolve these issues faster.

DOM-related Errors

DOM is also known as the Document Object Model. It plays a major role in JavaScript-based website interfaces. It handles the interface to make the website user-friendly, interactive, and mobile responsive. Whenever developers build JavaScript-based programs, DOM is the most common error every developer should work on.

Let’s understand with an example:

If the code below runs on the Chrome browser, it shows an error that counts as DOM error. This error shows because the Chrome browser isn’t aware of the <div> element. 

<!DOCTYPE html>
<html>
<body>
<script> 
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>

Now, this error can be easily resolved by adding <div id=”container”></div> in the beginning of the script. 

It seems like

<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script> 
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script> 
</body>
</html>

Now, the code can run successfully!

Cross-Browser Compatibility Issues

Cross-browser compatibility issues are a major one that developers face while working on a JavaScript-based website or web app. These JavaScript-based websites may not be compatible with different web browsers, so resolving this issue is essential.

Here are some common cross-browser errors that occur in JavaScript:

• Modern JavaScript features on Old browsers: When developers build JavaScript-based programs with modern features, the program may not support older browser versions. 
• Browser Sniffing: Browser sniffing is also known as Browser Detection. In this process, whenever visitors come to the website from any browser, a code is executed to run the program that supports the particular browser. However, the code might not execute properly on different browsers. 
• Using Libraries: When developers build any JavaScript program, then some native & third-party libraries are not supported on different browsers.

Solution

BrowserStack Live is a cloud-based testing infrastructure where QA testers can access a robust testing environment along with a real device cloud of  3,000+ real devices and browsers with different versions.

Teams can access quick & accurate reports so that developers can quickly identify & resolve bugs. Just create a free account in BrowserStack, choose any device or browser, and start testing on different browsers and versions.

Debug JS in Chrome with BrowserStack

Syntax-based Errors

It’s very common to see syntax errors in hundreds of lines of code where errors occur, like missing parentheses, unmatched brackets, or syntax faults. Developers need to resolve this issue.

To resolve this issue, developers should follow the standard syntax to reduce the chances of getting errors.

Let’s understand with an example:

When we run the code given below:

if((x > y) && (y < 80) {
//more code here
}

Then, you can notice a parenthesis missing that shows an error.

The correct the syntax should be:

if ((x > y) && (y < 80)) {

        //more code here

    }

Now, the code can run successfully without showing any syntax errors. 

These are some of the most common JavaScript errors developers face while working on the JavaScript program. 

Conclusion

To debug JavaScript in Chrome, DevTools is a one-stop solution that makes the debugging process easier. So that developers can identify & fix bugs in JavaScript-based programs. Chrome mobile Debugging also becomes easier with pinpointed results. 

However, if you’re looking for speed, interactiveness, and accuracy, BrowserStack Live is the most preferred platform for QA testers to test cross-browser compatibility on 3,000+ real devices and browsers to identify & resolve bugs. Just sign up for a free account, choose any device-browser-OS combination, and start debugging JS.