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.
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.
- The same Live Expression can span across multiple browser tabs or windows. Therefore, you need not retype the same expression on the console.
- 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:
- Open browser console
- Click on the “Create live expression” button
- 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.
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.
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- Painless monorepo dependency management with Bit