mozilla

Compare Revisions

Page Inspector

Change Revisions

Revision 436009:

Revision 436009 by wbamberg on

Revision 436011:

Revision 436011 by wbamberg on

Title:
Page Inspector
Page Inspector
Slug:
Tools/Page_Inspector
Tools/Page_Inspector
Tags:
"Tools", "Web Development:Tools", "css", "HTML", "DOM", "Web Development", "Stylesheets"
"Tools", "Web Development:Tools", "css", "HTML", "DOM", "Web Development", "Stylesheets"
Content:

Revision 436009
Revision 436011
tt168    <h2>
169      CSS pane
170    </h2>
171    <p>
172      The CSS pane shows information about the styles applied to 
 >the currently selected element. There are four separate views: "R
 >ules", "Computed", "Fonts", and "Box Model". You can switch betwe
 >en them using the toolbar at the top of the pane:
173    </p>
174    <p>
175      <img alt="" src="https://mdn.mozillademos.org/files/5463/in
 >spector-css-toolbar-annotated.png" style="width: 902px; height: 4
 >36px; display: block; margin-left: auto; margin-right: auto;">
176    </p>
177    <h3>
178      Rules view
179    </h3>
180    <p>
181      This view lists all the rules that apply to the selected el
 >ement, ordered from most-specific to least-specific. If you mouse
 > over a rule, a checkbox appears next to it: you can use this to 
 >toggle the rule on or off:
182    </p>
183    <p>
184      <img alt="" src="https://mdn.mozillademos.org/files/5467/in
 >spector-css-rules.png" style="width: 864px; height: 385px; displa
 >y: block; margin-left: auto; margin-right: auto;">If you click on
 > a rule you can edit it and see the results immediately. If you c
 >lick at the end of a block, you can add a new rule to apply to th
 >at selector.
185    </p>
186    <h3>
187      Computed view
188    </h3>
189    <p>
190      This view shows the calculated value that each CSS attribut
 >e has for for the selected element.
191    </p>
192    <p>
193      <img alt="" src="https://mdn.mozillademos.org/files/5473/in
 >spector-css-computed.png" style="width: 867px; height: 385px; dis
 >play: block; margin-left: auto; margin-right: auto;">
194    </p>
195    <p>
196      By default, it only shows values that have been explicitly 
 >set by the page: to see all values, click the "Browser styles" bo
 >x.
197    </p>
198    <h3>
199      Fonts view
200    </h3>
201    <p>
202      This shows all the fonts in use by the selected element:
203    </p>
204    <p>
205      <img alt="" src="https://mdn.mozillademos.org/files/5469/in
 >spector-css-fonts.png" style="width: 867px; height: 384px; displa
 >y: block; margin-left: auto; margin-right: auto;">
206    </p>
207    <h3>
208      Box model view
209    </h3>
210    <p>
211      This shows a graphical representation of the <a href="/en-U
 >S/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">b
 >ox model</a> as it's applied to this element:
212    </p>
213    <p>
214      <img alt="" src="https://mdn.mozillademos.org/files/5471/in
 >spector-css-box-model.png" style="width: 867px; height: 384px; di
 >splay: block; margin-left: auto; margin-right: auto;">
215    </p>

Back to History