Appendix A. Browser developer tools
"Developer Tools", often abbreviated DevTools, is a view provided in modern web browsers that supports inspecting and modifying many aspects of a webpage or application. The Chrome, Edge, Firefox, and Safari web browsers all support DevTools.
A.1 Opening DevTools
To open DevTools in Windows and Linux, press ctrl-shift-i. In macOS, press cmd-option-i.
The DevTools pane contains many tabs, including Elements, Console, and Network. In Firefox, the "Elements" tab has the title "Inspector".
Another way to open the DevTools is to right-click an element in a browser window to open a context menu, and select "Inspect". In Safari this menu option is "Inspect Element".
A.2 Elements Tab
The Elements tab displays the DOM tree for the current webpage. Each element in the tree shows its name and attributes, if any. Each element that has child elements is preceded by a disclosure triangle that can be clicked to toggle between showing and hiding its children.
To view the shadow DOM contents of a custom element, inspect the element and expand its "shadow-root" tree node. In Safari this node is labeled "Shadow Contents". For example, the following appears for the hello-world web component described in Vanilla web components.
<hello-world> #1 ▼ #shadow-root (open) <p part="greeting">Hello, World!</p> </hello-world> #2