Freeze screen & inspect disappearing elements #DevToolsTips

Key Takeaways

[Music] trying to inspect an element and it's gone it's like your C is playing hide and sick with you but don't worry chome death tools is here to help you catch those sneaky elements one common scenario is that elements disappear when you move your mouse away this often happens because of the CSS how state go to the elements panel find the parent element that's giving you trouble then in the Styles tab activate the how state to keep the element visible see you have Frozen it now you can change the Styles while it's stuck there this works for other CSS States as well sometimes elements disappear when day or the whole page loses Focus this can happen with drop downs two tips or other interactive elements for example bootstraps popovers disappear when you click somewhere else they use the pages Focus event to determine the dismissal which you can check in the console with document. has Focus the moment you click on the page it returns true when you click on left tools the page loses Focus making the pop over disappear to fix this you have to trick the page into thinking it is always focus in the Styles tab enable the emulate the focus page option it's like a magic spell that keeps everything visible this setting used to be hidden in the rendering panel we recently added a shortcut in the Styles tab to make it easier to find this is a global setting that persists once you enable it it will always be on HM one thing to note though if you're using the page visibility API make sure to turn it off when you're debugging user interactions that depend on it for example if you have a script that runs when the page is fading in the background the visibility change event won't fire the document do visibility state will remain visible now what about other cases where JavaScript is involve often elements are removed or hidden because of events like BL Mouse out or custom events there are two options to freeze this elements in this example the card preview shows and Heights based on the mouse over and mouse Le event select the parent element in the Dom tree and open the event listeners tab expand the mouse LIF event and you can remove it now the popup shows and never leaves edit all you want then reload the page to reset the listener again removing listeners is helpful but sometimes you might want to keep the event instead you can use the Breckon options to debug disappearing elements if you look closely when you how over the button it changes the CSS class name of the card preview let's right click on it and choose break on there are three options here in our case we want to freeze the screen when the CSS class name changes so we'll choose attribute modifications the right choice depends on what you are doing you might want to pause on remover or when sub elements change you have to observe and decide great when we how again it breaks right at the beginning of the class name change step over it and you can see the card preview keep it this way and you can inspect and change the Styles as you need all the Breck points you added in the Dom are shown in the Dom brick points tab be sure to clear them out when you are done actually since our example is so simple we can just edit the Dom to add the class name ourself this is even faster here come the best solution when you need a quick face and don't care how the element is disappearing try this freeze techniques the debugger statement can help you freeze the screen so what you can do is delay it for a certain amount of time with set time out this code gives you a 3 second countdown before freezing everything do what you need to do before it ends here is a bonus tip save the code as a snipper so you can just run it the next time you have the same problem I name the snipper freeit 3,000 you can name it as you wish once you save the snipper you can run it over and over again even better you can run it from anywhere open the command menu again with command or control shift p then use the exclamation mark to select and run our free script all right now we know six ways to freeze the screen and debug disappearing Elements which one is your favorite leave your comments below that's all for now good luck debugging see you in the next step two tips ciao [Music]