Today I Learned

16 posts about #chrome

How to find code making the browser freeze

When for some reason the application causes the browser to freeze, it is problematic to find the root cause because the devtools also stop responding.

Here’s one way to quickly find the issue.

  • Open the devtools on Sources tab
  • Enter the page that causes the browser to freeze
  • Quickly click “Pause script execution”

Likely the application will be stopped during execution of the problematic script. Now by using of stepping and checking callstack you can find the problematic piece of code.

Chrome CSS overview feature

What CSS overview is: new experimental feature, gives overview of CSS used on a site: what colors are used, different fonts and font-sizes, media-queries and lists some unused declarations (declaration that is in CSS but doesn’t affect the element in any way).

image image image image image

To enable this feature in Chrome:

  1. Open devtools
  2. Go to settings (cog icon)
  3. Open experiments tab
  4. Check CSS Overview

Auth0 error - "Unable to Configure Verification Page"

When using tools like Auth0 or other services using external cookies, make sure to have “Block third-party cookies” setting disabled in your browser.

Here’s how to do it in chrome:

  1. Enter chrome://settings
  2. Search for “Cookies”
  3. In my case it was located in Site settings > Cookies and site data > Block third-party cookies

The reason I post it on TIL is that there were no issues apparently, the error appeared in URL and it was pretty hard to debug it. Just a heads up for you to check it whenever you are dealing with third-party services.

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);

That’s what you’ll get in JS console


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? :)

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+\