Google Chrome is one of the most popular and widely used web browsers. It has also become the go-to web browser for developers to test their JavaScript code. In addition, it gives its users the ability to utilize the web developer tools built into the web browser to debug most web applications without the need for any third-party debugging tool.

Google Chrome comes with the Developer Console, which has many useful tools that help developers. This article will focus on the Live Expressions feature within the developer console.

The Conventional Way of Debugging JavaScript Applications

When you think of debugging JavaScript code, what immediately comes to your mind is using console expressions. There you will manually add console expressions such as console.log, console.error or console.info. However, this method has become somewhat outdated for many reasons. Below you can find why it is not recommended to use this conventional approach, especially if you are working on production-level applications.

Difficult to Find the Broken Code

If you attempt to debug your code using conventional methods, you will have to find the section of broken code within your application manually. It may be easier said than done, particularly if your application is large and has multiple functions and modules with thousands of lines of code.

Manually Adding the Console Expressions

When you find the broken code within your application, you inevitably face the daunting task of identifying the data you need to print. First, you will have to add the console expressions manually into the code to display the appropriate values that you need to debug the issue at hand.

Building Your Code After Adding the Console Expressions

Now that you have added the console expressions into your code, it’s time to build it. This operation doesn’t take time if your application isn’t complex or if it isn’t significant in size. However, it will take you a considerable amount of time to build your application if you are debugging an enterprise-grade application. It takes away precious time you could use to debug the issue.

Browser Console Overflow

The application will start writing details into the browser console when you compile your code. This is the expected behavior. However, you will quickly realize that the browser console is beginning to overflow with information, and soon you will not be able to see any sound output in the browser console as shown below.

Browser console overflowing with unnecessary output

Displays Only Specified Information

When you configure the console expressions, you are restricted to displaying only the specified information at any given point in time. Therefore, it is quite troublesome when you deal with or want to show more than one variable.

The task becomes even more problematic when you define the console statement on the wrong variable. If this happens, you have no other option but to go back to square one and start again. It is a very time-consuming endeavor. Further, it significantly reduces efficiency and productivity due to increased build time for every change you make.

Remove Console Expressions Before Deployment

Once you finish troubleshooting the issue at hand, you must then remove all the console expressions you have added. Failure to do so will cause this additional information to be displayed in the browser console when accessing your production application. This situation can potentially leak sensitive information which otherwise would not be visible to the end-user.

Removing console expressions is made easy by the compiler you choose to use. It is because most compilers have built-in option to automatically remove console expressions while compiling the production application. However, you must configure these settings in your compiler configuration to ensure that no console expressions get accidentally deployed into the live environment.

Cannot Debug Code In Production Environments

To debug a production application, you are forced to alter your code and rebuild the application. Therefore, it is not a viable option for debugging an application already deployed in a production environment.

Adding console expressions into an already deployed application is dangerous. It can introduce unintended security flaws, stop components from working, and add additional loads on the application when the newly added console statements are processed. Furthermore, even if you manage to navigate through all these issues, you will still need to redeploy the application, which would require a planned downtime.

What are Live Expressions in Chrome

Looking at all these challenges when using console expressions to debug an issue can be stressful. But, it is where Live Expressions save time and effort!

With the release of Google Chrome 70, Live Expressions are bundled into Google Chrome. It does not require you to install any third-party plugins or extensions to use this feature.

Live expressions allow you to use the same set of commands that you’d typically operate within the browser console. It also has the following two advantages.

1. The same Live Expression can span across multiple browser tabs or windows. Therefore, you need not retype the same expression on the console.
2. You do not need to apply the Live Expression numerous times since the Live Expression does not stop listening to the specified expression even if you switch between browser windows.

Using Live Expressions

Configuring a Live Expression within Google Chrome’s console is as simple as clicking a button. To create a new Live Expression, follow the steps mentioned below:

1. Open browser console
2. Click on the “Create live expression” button
3. Enter the expression you would like to monitor

It is important to note that Live Expressions support all typical console functions that you might use with your standard Google Chrome browser console.

You can find the “Create live expression” button on the left side of the console panel as shown by the following image.

We will now look into using Live Expressions to solve a practical problem that would otherwise require you to add multiple console expressions to the code.

The problem that needs solving is to obtain the updated values of two variables that represent the X and Y coordinates of the cursor while being moved across the web page. We will be using a Microsoft Demo Application for this example. This application writes the output of the X and Y coordinates of the mouse to the console by using console expressions added within the code. However, this is inefficient since it floods the console and makes it nearly impossible to keep track of the updated values.

Now we will use Live Expressions to achieve the same result.

The results we have achieved with both methods are similar. Still, the Live Expressions are the clear winner in terms of clarity. They will be highly effective when we use console logs, to track the flow sequence and Live Expressions for frequently changing variables in combination when debugging JavaScript.

Conclusion

In this article, I have dived into using Google Chrome’s Live Expression feature to debug JavaScript while listing out the challenges you may face if you are to use traditional console expressions to debug your JavaScript code.

I hope you have found this helpful. Thank you for reading!

Bit: Feel the power of component-driven dev

Say hey to Bit. It’s the #1 tool for component-driven app development.

With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.

• Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
• Easily share, and reuse components as a team.
• Quickly update components across projects.
• Make hard things simple: Monorepos, design systems & micro-frontends.

Try Bit open-source and free→