If your DevTools window is narrow, the Box Model diagram is at the bottom of the tab.įigure 4. To view the box model of an element, go to the Styles tab. See View only the CSS that's actually applied to an element. # View inherited CSS propertiesĬheck the Show All checkbox in the Computed tab.
The Computed tab shows the CSS properties being applied to the currently-selected h1 element # View CSS properties in alphabetical order Check the Show All checkbox to see all inherited values.įigure 3. The contents of the Computed tab are shown on the Styles tab. Note: On a wide DevTools window, the Computed tab does not exist. Go to the Computed tab in the Elements panel.When you're not interested in overridden declarations, use the Computed tab to view only the CSS that's actually being applied to an element. The Styles tab shows you all of the rules that apply to an element, including declarations that have been overridden. # View only the CSS that's actually applied to an element devsite-article h1:first-of-type CSS rule is defined. Clicking devsite-google-blue.css:487 takes you to line 487 of devsite-google-blue.css, where the. If the stylesheet is minified, see Make a minified file readable.įigure 2. In the Styles pane, click the link next to a CSS rule to open the external stylesheet that defines the rule.
# View CSS # View the external stylesheet where a rule is defined In DevTools, run a query like document.querySelector('p') in the Console, right-click the result, and then select Reveal in Elements panel.In DevTools, click the element in the DOM Tree.In DevTools, click Select an element or press Command+ Shift+ C (Mac) or Control+ Shift+ C (Windows, Linux), and then click the element in the viewport.In your viewport, right-click the element and select Inspect.There are many ways to select an element: To the left, the element is highlighted in the viewport, but only because the mouse is currently hovering over it in the DOM Tree To the right, the element's styles are shown in the Styles pane. The h1 element that's highlighted blue in the DOM Tree is the selected element. See View an element's CSS for a tutorial.įigure 1. The element's styles are shown in the Styles pane. The selected element is highlighted blue in the DOM Tree. The Elements panel of DevTools lets you view or change the CSS of one element at a time. See Get Started with Viewing and Changing CSS to learn the basics. Discover new workflows in this comprehensive reference of Chrome DevTools features related to viewing and changing CSS.
0 kommentar(er)
