How to debug JavaScript in Chrome DevTools

Debugging is a process of confirming that the things you believe to be true about the code are actually true.

What is debugging?

Debugging is a process crucial for rectifying errors, known as bugs, within an application. This can include syntax errors, logical mistakes, or unexpected input data. Programming languages emphasizes the importance of debugging, providing built-in tools and techniques to aid developers. This tools are very dependent on the language and in this article we would review JavaScript as a main language of the web development, at least in 2023.

Software Developers spend on average 48% of their coding session in the debugging process as shown in 2019 study (”An Exploratory Study of Debugging Episodes”, Abdulaziz Alaboudi, Thomas D. LaToza).

Why using console.log is bad?

console.log() in JavaScript is vital for checking code in real time while it's being built. Up to half JavaScript developers don’t use debugging tools other than console.log because it meets their minimal needs. Unfortunately, they indefinitely stuck in their comfort zone not knowing how to improve their performance.

Alongside console.log(), the JavaScript console also includes console.info(), console.warn(), console.error(), console.dir() and console.table(). Each of those tools give differently styled messages, helping to filter the browser devtools console, as described in the ECMA-262 standard. There is nothing wrong on using this tools, when done appropriately as it might give you a simple, faster and intuitive debugging outcome.

But, as a 2021 study (PeerJ Comput Sci, “Log-based software monitoring: a systematic mapping study**”**) points out, it's important to use these tools wisely to avoid making the console hard to read at scale. Adding clear messages with console outputs, as suggested in "The Art of Debugging with GDB, DDD, and Eclipse" by Norman Matloff and Peter Jay Salzman, can make it easier to understand the context and identify where log messages are coming from. For larger project there should be a system of marks and messages implemented, which could clearly refer to the exact place and context those log entry was called from.

However, console.log() does have its limits. If used too much, it can slow down the application because it works synchronously in real time. This archived jsPerf test shows the performance of console.log versus empty function getting the same single string argument. There are two interesting takeaways from this test:

• console.log is ~7500 times slower than empty function which proves it’s synchronous nature

• when DevTools is open console.log works ~5 times slower, taking additional time for message rendering (also synchronously).

console.log also doesn't have some advanced features that are available in more advanced logging libraries like debug, winston, and log4js. These libraries have more control over logging operations and are compatible with Node.js and browser standards.

Before moving code to a live website, it's very important to remove all console.log() commands to prevent the console from becoming too full and avoid leaking private data. Tools like ESLint can help find console.log() commands that have been left in the code by accident. Study from 2018 (”A Proposed Methodology on Predicting Visitor’s Behavior based on Web Mining Technique”, International Journal of Advanced Computer Science and Applications) shows that browser’s logs belong to the list of interest of data mining bots and browser extensions, which exposes potentially sensitive data directly to unknown databases.

What to use for proper debugging?

Frontend Developers rely heavily on tools like Chrome DevTools and IDEs for complex debugging scenarios. Chrome DevTools stands out from IDE tools because of real-time editing and debugging capabilities, allowing developers to modify CSS and JavaScript directly, instantly seeing the changes reflected on the web page. Developers can insert breakpoints into the code, enabling step-by-step execution and variable inspection at any point. Granular control enhances the process of identifying and fixing bugs, leading to faster debugging.

Chrome DevTools also excels in network performance management, as highlighted in Jeremy L. Wagner's book "Web Performance in Action". The tool provides a real-time overview of network requests, allowing developers to view the resources being loaded, time taken and even intercept the data overriding the result.

Compared to standalone debugging tools, Chrome DevTools offers inherent integration into the browser, as mentioned in the "Google Chrome 68 - Getting Started" guide. A survey conducted by Stack Overflow revealed that 75% of developers prefer using browser-integrated tools like Chrome DevTools due to their convenience and seamless workflow integration.

Chrome DevTools maintains its superiority through continuous improvement and updates, as mentioned in Jennifer Robbins' book "Learning Web Design". Google's commitment to evolving Chrome DevTools ensures it remains aligned with the ever-changing demands of web development. According to a survey conducted by the Chrome Developer Relations team, 95% of developers consider Chrome DevTools as their primary debugging tool, citing its powerful features and regular updates as key factors in their preference.