Chrome dev tools tip
5th December 2022
javascript
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:
javascript
addEventListener("keydown", (event) => {
if (event.key === "d") {
debugger;
}
});
Press the 'd' key now to trigger the debugger, whenever you need it.