Chrome DevTools tip

5th December 2022

setTimeout(() => {
  debugger;
}, 5000);

I learnt this neat trick from a brilliant colleague during a debugging session. If you ever need to inspect an element that is only visible on hover (and forcing :hover state isn't working), then you can run this line in the console and quickly hover to display the hidden element. After 5 seconds the page will stop running, and you'll be able to inspect it.

After some time, I found a better way. Add an event listener that triggers the debugger like so:

addEventListener("keydown", (event) => {
  if (event.key === "d") {
    debugger;
  }
});

Press the 'd' key now to trigger the debugger, whenever you need it.