Debug dynamic HTML in Chrome

In a recent Angular application Chrome helped me identifying how to apply style to a third party component over which we had no control. A popup was being added to the HTML and as it was removed on any action it wasn’t obvious how I could find the dynamic content to work out how to style – enter Chrome dev tools!

With developer tools open (F12) and the dynamic element displayed press F8 which will break script execution and freeze the DOM – then you can use CTRL+SHIFT+C and use the arrow keys to navigate through the elements to identify the required element.

Add comment

Loading