• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Firefox Developer Tools
  1. MDN
  2. Firefox Developer Tools
  3. Page Inspector

Page Inspector

Use the Page Inspector to examine and modify the HTML and CSS of a page.

You can examine pages loaded in the local copy of Firefox or in a remote target such as Firefox for Android. See remote debugging to learn how to connect the developer tools to a remote target.


User Interface Tour

To find your way around the Inspector, here's a quick tour of the UI.


How to

To find out what you can do with the Inspector, see the following how to guides:

  • Open the Inspector
  • Examine and edit HTML
  • Examine and edit the box model
  • Inspect and select colors
  • Reposition elements in the page
  • View fonts
  • Visualize transforms
  • Use the Inspector API
  • Select an element
  • Examine and edit CSS
  • Examine event listeners
  • Work with animations
  • Edit CSS filters
  • View background images
  • Use the Inspector from the Web Console
  • Examine CSS grid layouts

Reference

  • Keyboard shortcuts
  • Settings

Document Tags and Contributors

Tags: 
  • CSS
  • DOM
  • HTML
  • l10n:priority
  • Stylesheets
  • Web Development
  • Web Development:Tools
 Contributors to this page: wbamberg, faridatcemlulaqbayli, dvincent, joshyule, TomasDariusDavainis, Peterhausen, zannatulbaki, DevAsh, ernestgsm, marjunmank, Bayrmali, MarufSharia, sylvestre, mahdi10539, nuzirwanandy, EmilyG, fscholz, bander139, guigs, AmberDawn, pbrosset, Ersok, Delapouite, maher, ratcliffe_mike, harth, Luke314, Timmi, yehia, dangoor, kdangoor, tw2113, Sheppy, iain, tregagnon, yyss
 Last updated by: wbamberg, May 23, 2017, 10:18:31 AM
  1. Core Tools
    1. Page Inspector
    2. Web Console
    3. JavaScript Debugger
    4. Network Monitor
    5. Performance
    6. Responsive Design Mode
    7. Tips
  2. More Tools
    1. Memory
    2. Storage Inspector
    3. DOM Property Viewer
    4. Developer Toolbar
    5. Eyedropper
    6. Screenshot
    7. Scratchpad
    8. Style Editor
    9. Shader Editor
    10. Web Audio Editor
  3. Connecting the devtools
    1. about:debugging
    2. Connecting to Firefox for Android
    3. Connecting to iframes
    4. Connecting to other browsers
  4. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  5. Extending the devtools
    1. Adding a panel to the toolbox
    2. Example devtools add-ons
    3. Remote Debugging Protocol
    4. Stream Transport
    5. Source Editor
    6. The Debugger Interface
    7. Web Console custom output
  6. Settings
  7. Release notes