Debugging in Production: Inspecting Variables Without console.log()

Avoiding temporary console.log() statements in production code is a critical best practice. Leaving debug logs behind can leak sensitive user data, clutter the console, degrade performance, and look unprofessional.

Fortunately, modern browser Developer Tools (DevTools) provide powerful features that allow you to inspect variables in real-time on live websites without altering any source code.

Here is a step-by-step guide on how to inspect and debug variables directly in the browser.

Method 1: Logpoints (The Dynamic console.log)

Logpoints allow you to inject a virtual console.log() statement into a running website. It prints values to your console but does not pause execution or modify your actual source files.

Step-by-Step Guide

1. Open the website or web application in your browser.
2. Open DevTools (F12 or Cmd + Option + I on macOS).
3. Navigate to the Sources tab (called Debugger in Firefox).
4. Find the JavaScript file you want to debug in the file navigator on the left.

   Tip: Press Cmd + P (macOS) or Ctrl + P (Windows) and type the filename to quickly search for it.

5. Locate the line of code where your variable is used.
6. Right-click on the line number.
7. Select Add logpoint... (or Add conditional breakpoint -> select Log).
8. A text box will appear. Type the variable or expression you want to print, for example:

   "User Object:", user
9. Press Enter. A small orange marker will appear next to the line number.
10. Trigger the action on your website (e.g., click a button or submit a form). Check the Console tab—you will see the log output!

Method 2: Line-of-Code Breakpoints (Pausing Execution)

A breakpoint pauses your application's execution at a specific line of code. Think of it as hitting the "pause" button, allowing you to walk around and inspect the current state of memory.

Step-by-Step Guide

1. In the Sources tab, locate your JavaScript file.
2. Click directly on the line number where you want to pause. A blue marker will appear, indicating the breakpoint is active.
3. Trigger the action in your application that executes this code.
4. The application will pause, and a message saying "Paused in debugger" will appear on screen.
5. Inspect your variables:
   • Hover: Hover your cursor over any variable in the code editor to see its current value.
   • Scope Pane: Look at the Scope section on the right side of the Sources panel. It lists all variables currently in memory (Local, Closure, Global).
   • Console: Switch to the Console tab. You can type any variable name to print it, or execute functions using those variables in the active scope.
6. Click the Resume script execution button ▶ or press F8 to resume execution.

Method 3: Conditional Breakpoints (Selective Pausing)

Sometimes code runs hundreds of times (such as in a loop or mouse event listener), but you only want to inspect a variable when a specific condition is met.

Step-by-Step Guide

1. Open your code in the Sources tab.
2. Right-click the line number and select Add conditional breakpoint....
3. Type a JavaScript expression that evaluates to true or false, for example:

   productId === 999
   or:

   response.status !== 200
4. Press Enter. An orange/yellow icon will appear on the line number.
5. When the code runs, it will execute normally until the condition is met, at which point it will pause execution.

Method 4: "Store as Global Variable" (Handling Complex Data Structures)

When you log an object or array in the console, it can be difficult to query or filter it programmatically. You can save any logged item as a temporary global variable to run queries against it.

Step-by-Step Guide

1. Print the object in the console (either via a logpoint or by typing it while paused at a breakpoint).
2. Right-click the logged object in the Console output.
3. Select Store as global variable.
4. The console will print a confirmation message and assign the object to a temporary variable (e.g., temp1).
5. You can now use temp1 to interact with that object, for example:

   Object.keys(temp1)
   // or
   temp1.filter(item => item.active)

Production Debugging Pro-Tips

Dealing with Minified Code

Production code is usually minified to optimize file sizes, reformatting variables to short letters like a, b, or c.

• Pretty Print: Click the { } brackets icon at the bottom of the Sources panel to format minified code into readable lines.
• Source Maps: If your build tool uploads source maps, DevTools will automatically map the minified code back to your original source code files. You can find them under the webpack:// or Page directory in the Sources panel.

Tools Summary