Compare Revisions

Page Inspector

Change Revisions

Revision 540021:

Revision 540021 by bander139 on

Revision 540595:

Revision 540595 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 540021
Revision 540595
n34      <span class="web-developer-display-image-dimensions">Width n34      <img alt="" src="https://mdn.mozillademos.org/files/7459/in
>= 885px Height = 769px</span><img alt="" src="https://mdn.mozilla>spector-opening.png" style="display: block; margin-left: auto; ma
>demos.org/files/7459/inspector-opening.png" style="display: block>rgin-right: auto;">Clicking on the element selects it: after you'
>; margin-left: auto; margin-right: auto;">Clicking on the element>ve selected an element, the Inspector will look and behave as it 
> selects it: after you've selected an element, the Inspector will>does in <a href="#Selecting-Elements" title="#Selecting-Elements"
> look and behave as it does in <a href="#Selecting-Elements" titl>>"Selecting Elements"</a> below.
>e="#Selecting-Elements">"Selecting Elements"</a> below. 
n43      <span class="web-developer-display-image-dimensions">Width n43      <img alt="" src="https://mdn.mozillademos.org/files/7465/in
>= 903px Height = 787px</span><img alt="" src="https://mdn.mozilla>spector-selected-annotated.png" style="display: block; margin-lef
>demos.org/files/7465/inspector-selected-annotated.png" style="dis>t: auto; margin-right: auto;">The way element selection works cha
>play: block; margin-left: auto; margin-right: auto;">The way elem>nged significantly in Firefox 29, and from Firefox 30 the Inspect
>ent selection works changed significantly in Firefox 29, and from>or shows the box model for elements in the page.
> Firefox 30 the Inspector shows the box model for elements in the 
> page. 
n55      <span class="web-developer-display-image-dimensions">Width n55      <img alt="" src="https://mdn.mozillademos.org/files/6921/in
>= 389px Height = 167px</span><img alt="" src="https://mdn.mozilla>spector-element-annotation.png" style="width: 389px; height: 167p
>demos.org/files/6921/inspector-element-annotation.png" style="wid>x; display: block; margin-left: auto; margin-right: auto;">
>th: 389px; height: 167px; display: block; margin-left: auto; marg 
>in-right: auto;"> 
n64      <span class="web-developer-display-image-dimensions">Width n64      <iframe allowfullscreen="" frameborder="0" height="360" src
>= 640px Height = 360px</span><iframe allowfullscreen="" framebord>="https://www.youtube.com/embed/zBYEg40ByCM/?feature=player_detai
>er="0" height="360" src="https://www.youtube.com/embed/zBYEg40ByC>lpage" width="640"></iframe>
>M/?feature=player_detailpage" width="640"></iframe> 
n73      <span class="web-developer-display-image-dimensions">Width n73      <iframe allowfullscreen="" frameborder="0" height="360" src
>= 640px Height = 360px</span><iframe allowfullscreen="" framebord>="https://www.youtube.com/embed/y2LcsxE2pR0/?feature=player_detai
>er="0" height="360" src="https://www.youtube.com/embed/y2LcsxE2pR>lpage" width="640"></iframe>
>0/?feature=player_detailpage" width="640"></iframe> 
n82      <span class="web-developer-display-image-dimensions">Width n82      <img alt="" src="https://mdn.mozillademos.org/files/7461/in
>= 540px Height = 308px</span><img alt="" src="https://mdn.mozilla>spector-popup.png" style="width: 540px; height: 308px; display: b
>demos.org/files/7461/inspector-popup.png" style="width: 540px; he>lock; margin-left: auto; margin-right: auto;">The menu gives you 
>ight: 308px; display: block; margin-left: auto; margin-right: aut>options to:
>o;">The menu gives you options to: 
n109      <span class="web-developer-display-image-dimensions">Width n109      <img alt="" src="https://mdn.mozillademos.org/files/7011/in
>= 529px Height = 282px</span><img alt="" src="https://mdn.mozilla>spector-copyasdatauri.png" style="width: 529px; height: 282px; di
>demos.org/files/7011/inspector-copyasdatauri.png" style="width: 5>splay: block; margin-left: auto; margin-right: auto;">
>29px; height: 282px; display: block; margin-left: auto; margin-ri 
>ght: auto;"> 
n118      <span class="web-developer-display-image-dimensions">Width n118      <img alt="" src="https://mdn.mozillademos.org/files/7451/in
>= 540px Height = 269px</span><img alt="" src="https://mdn.mozilla>spector-editHTML.png" style="width: 540px; height: 269px; display
>demos.org/files/7451/inspector-editHTML.png" style="width: 540px;>: block; margin-left: auto; margin-right: auto;">You can add any 
> height: 269px; display: block; margin-left: auto; margin-right: >HTML in here: changing the element's tag, changing existing eleme
>auto;">You can add any HTML in here: changing the element's tag, >nts, or adding new ones. Once you click outside the box, the chan
>changing existing elements, or adding new ones. Once you click ou>ges are applied to the page.
>tside the box, the changes are applied to the page. 
n124      <span class="web-developer-display-image-dimensions">Width n124      <img alt="" src="https://mdn.mozillademos.org/files/7455/in
>= 855px Height = 403px</span><img alt="" src="https://mdn.mozilla>spector-html-toolbar-annotated.png" style="display: block; margin
>demos.org/files/7455/inspector-html-toolbar-annotated.png" style=>-left: auto; margin-right: auto;">The HTML pane shows you the pag
>"display: block; margin-left: auto; margin-right: auto;">The HTML>e's HTML as a tree, whose nodes are collapsible. The start and en
> pane shows you the page's HTML as a tree, whose nodes are collap>d tags for the selected element are highlighted with a grey backg
>sible. The start and end tags for the selected element are highli>round.
>ghted with a grey background. 
n161      <span class="web-developer-display-image-dimensions">Width n161      <img alt="" src="https://mdn.mozillademos.org/files/7447/in
>= 855px Height = 379px</span><img alt="" src="https://mdn.mozilla>spector-css-toolbar.png" style="display: block; margin-left: auto
>demos.org/files/7447/inspector-css-toolbar.png" style="display: b>; margin-right: auto;">Rules view
>lock; margin-left: auto; margin-right: auto;">Rules view 
n167      <span class="web-developer-display-image-dimensions">Width n167      <img alt="" src="https://mdn.mozillademos.org/files/7453/in
>= 837px Height = 335px</span><img alt="" src="https://mdn.mozilla>spector-HTML-pane.png" style="display: block; margin-left: auto; 
>demos.org/files/7453/inspector-HTML-pane.png" style="display: blo>margin-right: auto;">The Rules view lists <a href="/en-US/docs/We
>ck; margin-left: auto; margin-right: auto;">The Rules view lists >b/CSS/Pseudo-elements">pseudo-elements</a>, and the rules they ap
><a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>>ply.
>, and the rules they apply. 
n176      <span class="web-developer-display-image-dimensions">Width n176      <img alt="" src="https://mdn.mozillademos.org/files/5659/in
>= 544px Height = 206px</span><img alt="" src="https://mdn.mozilla>spector-css-rules-singlerule-annotated.png" style="width: 544px; 
>demos.org/files/5659/inspector-css-rules-singlerule-annotated.png>height: 206px; display: block; margin-left: auto; margin-right: a
>" style="width: 544px; height: 206px; display: block; margin-left>uto;">Rules that are overridden by later rules are crossed out. I
>: auto; margin-right: auto;">Rules that are overridden by later r>f you mouse over a declaration, a checkbox appears next to it: yo
>ules are crossed out. If you mouse over a declaration, a checkbox>u can use this to toggle the rule on or off.
> appears next to it: you can use this to toggle the rule on or of 
>f. 
n188      <span class="web-developer-display-image-dimensions">Width n188      <img alt="" src="https://mdn.mozillademos.org/files/6947/in
>= 390px Height = 133px</span><img alt="" src="https://mdn.mozilla>spector-css-sourcemap-detail.png" style="width: 390px; height: 13
>demos.org/files/6947/inspector-css-sourcemap-detail.png" style="w>3px; display: block; margin-left: auto; margin-right: auto;">
>idth: 390px; height: 133px; display: block; margin-left: auto; ma 
>rgin-right: auto;"> 
n202      <span class="web-developer-display-image-dimensions">Width n202      <img alt="" src="https://mdn.mozillademos.org/files/6361/in
>= 487px Height = 158px</span><img alt="" src="https://mdn.mozilla>spector-css-color-swatch.png" style="width: 487px; height: 158px;
>demos.org/files/6361/inspector-css-color-swatch.png" style="width> display: block; margin-left: auto; margin-right: auto;">
>: 487px; height: 158px; display: block; margin-left: auto; margin 
>-right: auto;"> 
n213      <span class="web-developer-display-image-dimensions">Width n213      <img alt="" src="https://mdn.mozillademos.org/files/7441/in
>= 836px Height = 336px</span><img alt="" src="https://mdn.mozilla>spector-color-picker.png" style="display: block; margin-left: aut
>demos.org/files/7441/inspector-color-picker.png" style="display: >o; margin-right: auto;">background-image preview
>block; margin-left: auto; margin-right: auto;">background-image p 
>review 
n219      <span class="web-developer-display-image-dimensions">Width n219      <img alt="" src="https://mdn.mozillademos.org/files/7457/in
>= 836px Height = 569px</span><img alt="" src="https://mdn.mozilla>spector-image-preview.png" style="display: block; margin-left: au
>demos.org/files/7457/inspector-image-preview.png" style="display:>to; margin-right: auto;">transform visualisation
> block; margin-left: auto; margin-right: auto;">transform visuali 
>sation 
n230      <span class="web-developer-display-image-dimensions">Width n230      <img alt="" src="https://mdn.mozillademos.org/files/7133/tr
>= 803px Height = 570px</span><img alt="" src="https://mdn.mozilla>ansform-tooltip.png" style="display: block; margin-left: auto; ma
>demos.org/files/7133/transform-tooltip.png" style="display: block>rgin-right: auto;">
>; margin-left: auto; margin-right: auto;"> 
n244      <span class="web-developer-display-image-dimensions">Width n244      <img alt="" src="https://mdn.mozillademos.org/files/7385/fo
>= 359px Height = 248px</span><img alt="" src="https://mdn.mozilla>nt-family-tooltip.png" style="width: 359px; height: 248px; displa
>demos.org/files/7385/font-family-tooltip.png" style="width: 359px>y: block; margin-left: auto; margin-right: auto;">
>; height: 248px; display: block; margin-left: auto; margin-right: 
> auto;"> 
n265      <span class="web-developer-display-image-dimensions">Width n265      <img alt="" src="https://mdn.mozillademos.org/files/7443/in
>= 837px Height = 336px</span><img alt="" src="https://mdn.mozilla>spector-computed-view.png" style="display: block; margin-left: au
>demos.org/files/7443/inspector-computed-view.png" style="display:>to; margin-right: auto;">Clicking the arrow next to the property 
> block; margin-left: auto; margin-right: auto;">Clicking the arro>name shows the rule that set this value, along with a link to the
>w next to the property name shows the rule that set this value, a> source filename and line number:
>long with a link to the source filename and line number: 
266    </p>
267    <p>266    </p>
267    <p>
268      <span class="web-developer-display-image-dimensions">Width 268      <img alt="" src="https://mdn.mozillademos.org/files/7445/in
>= 837px Height = 336px</span><img alt="" src="https://mdn.mozilla>spector-computed-view-open.png" style="display: block; margin-lef
>demos.org/files/7445/inspector-computed-view-open.png" style="dis>t: auto; margin-right: auto;">By default, it only shows values th
>play: block; margin-left: auto; margin-right: auto;">By default, >at have been explicitly set by the page: to see all values, click
>it only shows values that have been explicitly set by the page: t> the "Browser styles" box.
>o see all values, click the "Browser styles" box. 
n280      <span class="web-developer-display-image-dimensions">Width n280      <img alt="" src="https://mdn.mozillademos.org/files/7449/in
>= 837px Height = 335px</span><img alt="" src="https://mdn.mozilla>spector-fonts-view.png" style="display: block; margin-left: auto;
>demos.org/files/7449/inspector-fonts-view.png" style="display: bl> margin-right: auto;">The text in the font view is "Abc" by defau
>ock; margin-left: auto; margin-right: auto;">The text in the font>lt but this is actually a text area and can be freely edited.
> view is "Abc" by default but this is actually a text area and ca 
>n be freely edited. 
n286      This shows a graphical representation of the <a href="/en-Un286      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>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. From Firefox 30, wh>ox model</a> as it's applied to this element. From Firefox 30, wh
>ile the mouse is in the box model view, grid lines and the box mo>ile the mouse is in the box model view, grid lines and the box mo
>del for the element in the page are displayed:<span class="web-de>del for the element in the page are displayed:<img alt="" src="ht
>veloper-display-image-dimensions">Width = 917px Height = 801px</s>tps://mdn.mozillademos.org/files/7439/inspector-box-model-view.pn
>pan><img alt="" src="https://mdn.mozillademos.org/files/7439/insp>g" style="display: block; margin-left: auto; margin-right: auto;"
>ector-box-model-view.png" style="display: block; margin-left: aut>>
>o; margin-right: auto;"> 
n295      <span class="web-developer-display-image-dimensions">Width n295      <img alt="" src="https://mdn.mozillademos.org/files/5671/in
>= 680px Height = 435px</span><img alt="" src="https://mdn.mozilla>spector-css-box-model-annotated.png" style="width: 680px; height:
>demos.org/files/5671/inspector-css-box-model-annotated.png" style> 435px; display: block; margin-left: auto; margin-right: auto;">
>="width: 680px; height: 435px; display: block; margin-left: auto; 
> margin-right: auto;"> 
n310      From Firefox 30, it's simplified:<span class="web-developern310      From Firefox 30, it's simplified:<img alt="" src="https://m
>-display-image-dimensions">Width = 328px Height = 273px</span><im>dn.mozillademos.org/files/7437/inspector-box-model-detail.png" st
>g alt="" src="https://mdn.mozillademos.org/files/7437/inspector-b>yle="width: 328px; height: 273px; display: block; margin-left: au
>ox-model-detail.png" style="width: 328px; height: 273px; display:>to; margin-right: auto;">
> block; margin-left: auto; margin-right: auto;"> 
n329      <span class="web-developer-display-image-dimensions">Width n329      <img alt="" src="https://mdn.mozillademos.org/files/5461/in
>= 867px Height = 253px</span><img alt="" src="https://mdn.mozilla>spector-console.png" style="display: block; margin-left: auto; ma
>demos.org/files/5461/inspector-console.png" style="display: block>rgin-right: auto;">
>; margin-left: auto; margin-right: auto;"> 
t335      <span class="web-developer-display-image-dimensions">Width t335      <img alt="" src="https://mdn.mozillademos.org/files/7469/in
>= 885px Height = 769px</span><img alt="" src="https://mdn.mozilla>spector-web-console.png" style="display: block; margin-left: auto
>demos.org/files/7469/inspector-web-console.png" style="display: b>; margin-right: auto;">
>lock; margin-left: auto; margin-right: auto;"> 

Back to History