Member-only story
Chrome Console Utilities That Every Developer Should Know
Use these utilities in Chrome Console to debug web apps faster
Every standard web browser typically offers tools for developers to debug web apps. For example, most browsers have inbuilt JavaScript debuggers, DOM tree inspectors, network monitors, and network speed simulators. The popular Google Chrome browser offers the well-known DevTools toolkit with productivity-focused web app debugging features. You can debug TypeScript, Deno, Node.js, and React Native apps on Chrome apart from native web app debugging thanks to the DevTools protocol.
The web app debugging process frequently involves using the browser console, debugger interface, and DOM inspector. Web developers often use the browser console to see debugging-related log values. Besides, they use the console to execute quick code snippets for debugging and experimental purposes. For helping to write code snippets on the console productively, Chrome offers several productivity-focused shortcuts like the Bash interpreter, which boosts developer productivity on GNU/Linux terminals. We can use these Chrome console utility shortcuts to speed up web application debugging-related tasks (i.e., Getting the selected DOM element in the inspector). These console utilities work only within the browser console, so you don’t need to worry about naming conflicts in web app source files.
In this story, I’ll explain several console utilities that you can use in Chrome to debug web applications faster. Use these quick shorthand snippets in the Chrome console to avoid time-consuming mouse clicks or typing lengthy code during debugging activities.
JQuery-like Selectors for Faster DOM Node Selection
The popular JQuery library offers a more productive way to select DOM elements based on CSS selectors compared to the traditional web API. What if you need to access some DOM node properties or search some DOM nodes on the console? This becomes an easy task if your web app uses JQuery — you can use the $ syntax since JQuery is already loaded, but what if you don’t use JQuery?
Chrome lets you use $ syntax on the console even if you don’t use the JQuery library. On the Chrome console, $ works as a…
