11 posts about #chrome

"console.table" is a cool thing to know about

If you want to console.log tabular data into your JS console, you can use console.table to do it. It will display your objects into convenient and easy-to-read table to make your life easier.

Example

Group console logs

There’s this cool feature in JS console (works in Chrome and Firefox) you can use if you want to log a lot of information, but you’re afraid of JS console getting too crowded. See example:

Code example

console.groupCollapsed("types of components");
console.log(typeof ComponentOne);
console.log(typeof ComponentTwo);
console.log(typeof ComponentThree);
console.groupEnd();

That’s what you’ll get in JS console

Chrome Dev Tools - quick change color format

To quickly change format of color in Chrome Dev Tools, just hold shift and click the color badge (colored square)

Inspecting elements that disappear from DOM #2

If you don’t wanna play with inspecting “Break on” option. You can use browser debugger.

Only what you need to do is run the console. Chrome / Firefox - F12 or by hand.

Then, you can start focusing/ hovering/ anything that you wanna catch and then you need to press F8 (the same for Chrome and Firefox).

The console will break your js code and then you can easily inspect what you want. Easy, right? :)

Communication between browser tabs

To share messages between browser tabs, you can use BroadcastChannel API. See screenshot below for example:

Browser has built in "design mode"

The browser has a built-in mode where we can easily edit the whole content. It can be useful for prototyping or quick changes during the call.

document.designMode = "on";

More information: MDN

Debug prod app with logpoints & conditional breakpoints

Recently we were able only to use breakpoints to inspect code execution in the production application. But if the code in which we put breakpoint is triggered multiple times we have to resume the execution. To prevent that, we can use conditional breakpoints https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#conditional-loc

In cases when we do not want to break the execution of the code but just log some value we can use logpoints. https://developers.google.com/web/updates/2019/01/devtools#logpoints

Trigger debugger with key combination

Whenever you need to freeze your website and check its state, you can trigger debugger at any given point.

Let’s say you want to check which classes are passed when element is hovered - move your mouse over it and trigger debugger. The page will freeze and you can browse the dom tree freely.

According to Google Chrome’s DevTools documentation:

Pause script execution (if currently running) or resume (if currently paused)

You need to have your DevTools opened

MacOs: F8 or Command+\

Windows/Linux: F8 or Control+\