Read more

Chrome DevTools: DOM Breakpoints - Breakpoints on HTML Elements

Julian
October 27, 2022Software engineer at makandra GmbH

tl;dr

In Chrome DevTools in the Elements tab or in Firefox in the Inspector tab you can right click on an element and choose Break on to debug changes related to this element.

Example

DOM Breakpoints can be quite useful to quickly find the JavaScript that is responsible for some (unexpected) behavior. You can use DOM Breakpoints for debugging subtree modifications, attribute modifications or node removal.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

Here you can see a very simple example that shows what JavaScript lines are responsible for a text change (subtree modification):

Image

You can use this Code Pen Show archive.org snapshot if you want to try it yourself.

Posted by Julian to makandra dev (2022-10-27 09:08)