Debugging in Google Chrome Browser

Debugging is the process of identifying and correcting bugs in a computer program or software application. The errors or issues that cause the programs to misbehave are known as bugs. These bugs are the expected errors within the program or the application. The term “bug” means “technical error,” given by Thomas Edison when describing his little difficulties and faults in his experiments.

Debugging is an integral part of the software development lifecycle, which comes under the software testing phase. The process of debugging starts when there is a bug or issue found in the code and if the problem can be reproduced.

Chrome Dev Tools

Although there are many IDEs with debug modes in them, Chrome Developer Tools remains the favorite debugger tool for many web developers. Chrome developer tools, also known as dev tools, are a set of the most powerful debugging tools that are integrated into Google Chrome’s web browser. It helps developers understand the webpages in depth in real time by allowing them to analyze, inspect, and debug the code step by step.

Dev tools allow developers to edit web pages easily and swiftly, which helps them build better websites in less time.

Chrome dev tools consist of many functionalities and panels that help developers debug.

The following are some of the operations that developers can perform in each panel:

Elements Panel

• View and edit the DOM.
• View and edit the CSS.
• Identify improvements in CSS.
• Finding invalid, overridden, or unused CSS
• Inspect animations

Console Panel

• View logged messages
• Write and run JavaScript to interact with the webpages.
• View error messages, warnings, and information by using the console API’s

Sources Panel

• Debug JavaScript code
• Add and run JavaScript snippets.
• Pause and watch the flow of the code using DOM breakpoints.
• Edit and save files in the workspace.
• View call stack
• Override HTTP responses locally.

Network Panel

• View page resources
• Inspect network activity.
• See and analyze network requests.
• Network features reference

Performance Panel

• Analyzing the performance of the website at runtime
• Improved website speed
• Performance feature reference

Memory Panel

• Fix memory issues like leaks.
• Visualize memory usage with timeline recordings.
• Spot frequent garbage collections.
• Record heap memory snapshots.

Application Panel

• View and edit local and session storage.
• View, edit,edit and delete cookies
• View cache data
• Debug Progressive Web Apps (PWA’s)
• View origin trail information.

Security Panel

• Understand security-related issues.
• View origin details

Recorder Panel

• Record, replay, and measure the user journey on the website or app.
• Recorder feature reference

Benefits of using development tools

• Dev tools offer a wide range of benefits for web developers, web designers, and programmers who want to understand webpages. Its user interface is well-designed and user-friendly, making it easy to use for both beginners and experienced developers.
• It allows us to inspect and edit the HTML and CSS of a webpage in real-time with instant visual feedback in the browser and helps us understand how webpages are structured.
• Dev tools provide us with a JavaScript console to debug JavaScript code. It allows us to monitor network requests and view response headers.
• One of the most important features is that it allows for developing and debugging progressive web apps and also allows for building Chrome web extensions.

Moreover, Chrome’s dev tools code is open source, making it a transparent and custom tool for developers. Google continuously adds new features to its development tools, keeping them up-to-date with evolving web technologies.

How to use dev tools

1. In the Chrome web browser, right-click on any element you want to inspect and select inspect to open the elements panel of the dev tools in Windows.
2. Alternatively, you can also use shortcuts like Command+Option+I in Mac and Control+Shift+I or F12 in Windows or Linux to open whatever panel you used last when you opened dev tools.
3. We also have Command+ Option+ J in Mac, Control+ Shift+ J in Windows/Linux to open the console panel, and Command+ Option+ C in Mac, Control+ Shift+ C in Windows/Linux to open the elements panel.

Steps to use Chrome Debugger

To open dev tools, inspect an element in the webpage that opens dev tools elements panel.

On the right side top corner you can change the dockside view. You can see all the files of your webpage in the source panel.

Opening Source panel

You can set the breakpoints in the JavaScript code where you expect your code has an error. The execution stops or pauses at that point and from there you can manually run the execution of the script with the buttons provided in the top right corner of the panel.

Tracing the JavaScript Code using the debug buttons

The step over button starts execution from function call and every time you press the step over button it executes the code in the function and moves to the next function call.

The step into button starts execution from the function call and pauses at each line in the function until the function ends.

The step out button continues the execution of the script till the end of last line of the current function.

Breakpoints

We can also put breakpoints in our script by using “debugger” at the line where we want to put a breakpoint. To remove all the breakpoints we have a button in the top right corner.

Call Stack

You can watch the call stack for nested functions. Initially the call stack will be empty, when the execution starts the call stack holds the current function inside it when the function is in execution and pops it out once after the execution completes.

Scope

Watch the local scope while execution. It holds the values of the variables of the function while the script is in execution.

By using breakpoints and debugger statements we can pause the script for watching the variables and trace the code where the execution is going wrong and then reproduce the error to make the code work as we intend.