• 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. Working with iframes

Working with iframes

This feature is new in Firefox 34.

From Firefox 34 onwards, you can point the developer tools at a specific iframe within a document.

You'll see a button in the toolbar:

Click it, and you'll see a popup listing all the iframes in the document, as well as the main document itself.

Note that at the moment you'll need to reload the page or close and reopen the developer tools in order to see the popup. This is being tracked as bug 1062233.

If you select an entry in the list, all the tools in the toolbox - the Inspector, the Console, the Debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist.

Document Tags and Contributors

Tags: 
  • Debugging
  • Developer Tools
  • DevTools
  • Frames
  • Tools
 Contributors to this page: wbamberg, dhahaj, xfq, jsx, jamsewiler, Sheppy
 Last updated by: wbamberg, Jul 9, 2017, 7:55:52 PM
  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