Chrome DevTools: An improved breadcrumb trail for the DOM

Last updated: June 25, 2015
An improved breadcrumb trail for the DOM

Introduction

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

How to use this

Just start navigating the DOM in the Elements Panel, and noteice:

  • The breadcrumb trail appears at the bottom of the DOM Tree viewer
  • You can hover each crumb within the breadcrumb trail, doing this highlights the relevant element within the page viewport.
  • You can click each "crumb" within the breadcrumb trail. Doing this selects the relevant DOM node in the DOM tree view.
  • Where applicable, the element name within the trail will displays the class name so it can be easily identified, e.g. html > body > p.main-text

Extra resources

Sign up to receive a developer tip, in the form of a gif, in your inbox each week