javascript - Is there anyway to freeze or lock the DOM of a page? - Stack Overflow

admin管理员组

文章数量:1355093

Is there anyway to freeze or lock the DOM of a page, so no further changes (CSS or Javascript etc) can be made to it?

I keep having difficulty in finding elements that appear or disappear when the div or page loses focus.

My normal approach of right clicking an element to inspect it makes the element disappear from the DOM.

By manually searching through the DOM Inspector, I can find the element, but as soon as I click on it inside the Inspector the element disappears from the DOM.

This whole situation results in certain interactive parts of the page being plete unreachable. I cannot find out what CSS rules are applied to them, what line number in which CSS file I should look or anything. And I really dont want to have to search through multiple CSS files, looking at each rule and trying to figure out if this is the rule I am looking for.

Is there anyway to freeze or lock the DOM of a page, so no further changes (CSS or Javascript etc) can be made to it?

I keep having difficulty in finding elements that appear or disappear when the div or page loses focus.

My normal approach of right clicking an element to inspect it makes the element disappear from the DOM.

By manually searching through the DOM Inspector, I can find the element, but as soon as I click on it inside the Inspector the element disappears from the DOM.

This whole situation results in certain interactive parts of the page being plete unreachable. I cannot find out what CSS rules are applied to them, what line number in which CSS file I should look or anything. And I really dont want to have to search through multiple CSS files, looking at each rule and trying to figure out if this is the rule I am looking for.

• javascript
• html
• css
• dom

Share Improve this question Follow asked Aug 25, 2016 at 12:04 JimmeryJimmery 10.1k2525 gold badges8989 silver badges164164 bronze badges 7

• do you want to just inspect your element?then use undock into separate window.in chrome – Gaurav Parashar Commented Aug 25, 2016 at 12:07
• Can you just open the developer tool and use the little mouse icon to search for the inspectable element? This way you wont have to click on them. – thepio Commented Aug 25, 2016 at 12:07
• 2 Have you tried using one of the options in Break on... in the context menu for elements in the DOM? (In Chrome) e.g. Break on Node removal – sdgluck Commented Aug 25, 2016 at 12:07
• You can also set element's state in css with :hover, :focus, etc in the developer console. – epascarello Commented Aug 25, 2016 at 12:10
• 1 @sdgluck That sounds useful - can you add that as an answer and expand on it slightly? Thanks! – Jimmery Commented Aug 25, 2016 at 12:13

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

Have you tried using one of the options in Break on... in the context menu for DOM elements in the Chrome Developer Console?

For example, Break on Node removal. This will act as a breakpoint for removal of a particular DOM element.

(click the image to see it larger)

If the styles are applied when an element is in a state such as hovered/focused, you can force the element state in chrome.

1. Inspect the element you want to have the state.
2. Click the :hov menu option in the styles panel
3. Click the checkbox that is the state you want

Or

1. Right click on the element's tag in the Element pane
2. Select the CSS state from the context menu

Other browsers have similar options.

本文标签： javascriptIs there anyway to freeze or lock the DOM of a pageStack Overflow