Beyond Console.log() – Level up Your Debugging Skills

Browser developer tools are far more than just <code>console.log(), and their powerful functions can significantly improve development efficiency. This article will explore some lesser-known practical tips to help you optimize your workflow.

Core points

• Use the console's real-time expression to monitor script changes in real time without looking for specific changes in the log.
• Use the console to operate the current document directly, use <code>$_ to get the result of the last command, and <code><code> to
to access the stack of the checked elements.
Switch from console to the "Sources" panel for a more powerful script editing environment, supporting multi-line scripting and complex interactions with web pages.
Use shortcut keys (such as Ctrl Shift P) to quickly access developer tools through the command menu to simplify the debugging process.
Seamless integration of debugging and development by setting up workspaces, synchronizing changes made in browser developer tools directly to source code.
Integrate Visual Studio Code with browser developer tools through the Devtools for VS Code extension, combining powerful editing capabilities and real-time site debugging.

Breaking out of comfort zone

<code>console.log()Developers are often used to fixed workflows, which may limit efficiency gains. A common process is: write code in the editor, save it and switch to the browser to load it, and then use developer tools to adjust the CSS, perform sizing and mobile simulation tests. Debugging by adding

statements, closely related to line numbers and debugging information.

This method is inefficient and confusing. The browser tools are filled with debugging information that does not belong to the final product, which not only makes it difficult for others to understand, but also causes trouble to novice developers. We only used a small part of the features of the developer tool and missed the opportunity to improve efficiency.

This article will introduce some Chromium browser developer tools and practical features in Visual Studio Code. First, let's dive into the console.

Advanced console skills

<code>console.log(thing)We are used to adding

to the code for debugging. But this is sometimes inefficient and the original format data is difficult to understand.

The following tips can be obtained on GitHub and viewed in the browser where the developer tools are opened. (Or check out the online demo in CodePen)

First, add curly braces to the log to not only print the variable value, but also display the variable name for easy tracking.

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

Format log

Using a format specifier starting with a percent sign, specific values ​​can be recorded in different formats:

• <code>%s: Record as a string
• <code>%i or <code>%d: record as integer
• <code>%f: Record as a floating point number
• <code>%o: Record as expandable DOM element
• <code>%O: as an expandable JavaScript object record

These specifiers can be used in a mix of the order of replacement and parameter:

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

Type conversion can also be performed:

<code class="language-javascript">console.log('%ix %s developer', 10, 'console');
// 10x console developer</code>

<code>%cSpecifier allows CSS-styled log messages:

<code class="language-javascript">console.log('%i', 12.34455241234324234); // 12</code>

Group log

Group logs with <code>console.group() for easy expansion and collapse:

<code class="language-javascript">console.log('%cPay attention to me','color:firebrick;font-size:40px')</code>

You can nest groups and use <code>console.groupCollapsed() without expanding groups by default:

<code class="language-javascript">const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);</code>

Log filtering

Using <code>console.info(), <code>console.error() and <code>console.warn(), you can use the console sidebar or level selector to filter messages to facilitate finding specific information in a large number of logs.

Other useful console methods

<code>console.count() and <code>console.countReset() methods can count the number of times a method call or function execution:

<code class="language-javascript">const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);</code>

<code>console.time() Methods can measure script execution time:

<code class="language-javascript">console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1</code>

<code>console.dir() Displays data content and type, <code>console.dirxml() displays the XML representation of the node, and <code>console.table() displays JSON data in a sortable table.

Replace logs with real-time expressions

<code>console.log()Monitoring frequently changing values ​​is inefficient. Real-time expressions can solve this problem. Enable the Eye button in the Developer Tools and enter a valid JavaScript expression whose value will be displayed above the console.

For example, enter <code>document.activeElement and the expression will display the currently activated element in the page.

Real-time expressions are durable and have nothing to do with a specific domain name or site. It should be removed after debugging is completed to avoid errors.

Real-time expressions are ideal for monitoring script data changes, especially for frequently changing values ​​such as mouse position.

Use the console to operate the current document

Console is a REPL that allows writing and executing JavaScript and using the autocomplete feature to understand the available methods and properties of the current document.

The console also provides many convenient methods and shortcuts:

• <code>$_: Store the result of the last command.
• <code><code> to
: The most recently checked element stack.
• <code>$()<code>$$() and <code>document.querySelector(): abbreviated <code>document.querySelectorAll() and
respectively.
• <code>$x()
: Use XPath to select the DOM element.
• <code>copy()
: Copy the content to the clipboard.
• <code>clear()
: Clear the console.
• <code>getEventListeners(node)
: List all event listeners for nodes.
• <code>monitorEvents(node, events)
: Monitor and record events on nodes.
• <code>monitor(method)
: Creates a log item when calling a method.

From the console to the Sources panel

The single-line environment of the console limits code writing. Multi-line scripts can be written using Shift Enter. The Sources panel provides a more powerful script editing environment.

Developer Tools Command Menu

The command menu (Ctrl Shift P or Cmd Shift P) allows access to all developer tool functions through the keyboard.

Code snippet

Code snippets are a convenient way to save scripts that interact with documents. They have convenient ways to access the currently open browser documents and consoles.

Coverage

Overwrite is a local copy of the remote file. Browser developer tools replace remote files with local copies, making it easier to edit website style sheets or perform performance testing.

Workspace: Synchronous development and debugging tasks

The workspace allows adding project folders to the developer tools, synchronizing the developer tools and the editor.

Devtools for VS Code extension

The Devtools for VS Code extension integrates Visual Studio Code with browser developer tools, combining powerful editing capabilities and real-time site debugging.

Next steps

It is recommended to learn to use breakpoint debugging, which is a more effective debugging method.

JavaScript debugging skills FAQ

(The FAQs part of the original text is omitted here because this part of the content has little to do with the main theme of the article and is long, so retaining it will make the pseudo-original article appear redundant.)

The above is the detailed content of Beyond Console.log() – Level up Your Debugging Skills. For more information, please follow other related articles on the PHP Chinese website!