![learn how to use inspect element chrome learn how to use inspect element chrome](https://i1.wp.com/wpshout.com/media/2014/01/devtools-dom-inspector.png)
Continue resuming the JavaScript execution until all four grey circles appear on the screen and then you can inspect each circle's styles as you normally would in the developer tools. You know what line the error occurs on, so put an alert(debug here) statement. After the first circle is added, the JavaScript execution will again pause because the browser has detected that an additional circle element will be added to the DOM. For me, the easiest way to open the Elements panel directly is to use a keyboard shortcut. You will need to click the button that resumes the JavaScript execution in order to display the first of three grey circles. From the course: Learning Chrome Web Developer Tools. This will pause the JavaScript execution just before one of the three additional grey circles is added.
![learn how to use inspect element chrome learn how to use inspect element chrome](https://1.bp.blogspot.com/-NbnWSi51g5c/X3HAsxsOtBI/AAAAAAAACgE/9x-3uIdKvjkFPglih5xAXH55aZIBQguQgCLcBGAsYHQ/s1600/20200928_142102.jpg)
Selecting Inspect on the right-click menu will automatically open the Inspector. You don't have to manually open the Inspector column to do this. In the case of the example presented above, you would target the parent container holding the grey circles, select Break on -> subtree modifications in the Elements tab of the Chrome devtools, and then hover over the first grey circle. This will scroll the Inspector column up or down to the selected element, and highlight its source code. This can be done by opening the Chrome devtools ( ⌘ + ⌥ + J or ⌘ + ⌥ + I), navigate to the Elements tab, find the element of interest, and select the option Break on -> subtree modifications. There is an option in Chrome devtools that allows you to select an element and have the JavaScript pause its execution whenever any nested DOM nodes are modified.
#Learn how to use inspect element chrome password#
Solution 2: Pausing JavaScript execution on Subtree Modifications For me, the easiest way to open the Elements panel directly is to use a keyboard shortcut, Ctrl + Shift + C for Windows, or Command + Shift + C on the Mac. Answer for all those beginners who think there is way to hack password by Inspect Element: Lot of people ask these days that there is a method to hack facebook password by Inspect element method, Inspect element method is basically developers debugging tool provided by chrome, in firefox it is known as firebug, In chrome you can access it. Note: The keyboard shortcut to pause the execution of JavaScript only works if the Sources tab is open in the Chrome devtools.