An improved breadcrumb trail for the DOM

Improved DOM breadcrumbs

Published on Updated on

Did you know the Elements Panel has a Breadcrumb trail? It can help you trace your steps when you navigate the DOM.

In Canary, you can enable the Material Design experiment. A few nice things:

  • The breadcrumb trail looks better from a visual point of view.
  • The trail has improved visibility with it being nearer to the top, rather than at the bottom where it is easy to forget about.
  • Overall, the DevTools UI feels more consistent.

Don't forget, you can click each "crumb" within the breadcrumb trail. Doing this highlights the relevant DOM node in the DOM tree view.

Updated on Improve article

Back

A new home for DevTools

Next

Live-edit CSS in sources

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.