• 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. View Source

View Source

In This Article
  1. View Source features
  2. View Selection Source
  3. View MathML Source
  4. Limitations of View Source
    1. Error reporter ≠ validator
    2. Not all parse errors are reported
  5. XML syntax highlighting
  6. See also

View Source lets you look at the HTML or XML source for the page you're viewing. To activate View Source:

  • context-click in the page and select "View Page Source"
  • press Ctrl+U, or Cmd+U on OS X

A new window opens with the source for the page. From Firefox 42 onwards, View Source will open in a new tab (instead of a new window) by default. If you prefer the old window mode instead, you can go to about:config and set the preference view_source.tab to false.

View Source features

View Source has three additional features, which from Firefox 40 onwards can be accessed from the context menu in the View Source tab:

  • Go to Line
  • Wrap Long Lines (toggle)
  • Syntax Highlighting (toggle)

When syntax highlighting is on, View Source also highlights parsing errors in red. Hovering your mouse over errors displays a tooltip explaining the error.

To access Go to Line from the keyboard, press Control+Option+L on a Mac, or Alt+Shift+L on Windows or Linux.

View Selection Source

If you select part of a web page and conext-click, you'll see a context menu item labeled "View Selection Source", that behaves just like "View Page Source", except you only see the source for the selection.

View MathML Source

If you context-click while the mouse is over some MathML, you'll see a context menu item labeled "View MathML Source": click it to see the MathML source.

Limitations of View Source

There are limitations to what View Source does for you that you need to be aware of.

Error reporter ≠ validator

View Source only reports parsing errors, not HTML validity errors. For example, putting a <div> element as a child of a <ul> element isn't a parse error, but it is not valid HTML. Therefore, this error will not be flagged in View Source. If you want to check that HTML is valid, you should use an HTML validator, such as the one offered by W3C.

Not all parse errors are reported

Even though all the reported errors are parse errors according to the HTML specification, not all parse errors are reported by View Source. Among the errors that don't get reported:

  • Bytes that are illegal according to the document's encoding aren't marked as errors.
  • Forbidden characters aren't reported as errors.
  • Errors related to the end-of-file aren't reported.
  • Tree builder errors relating to text (as opposed to tags, comments, or doctypes) aren't reported.
  • Parse errors related to xmlns attributes aren't reported.

XML syntax highlighting

View Source uses the HTML tokenizer when highlighting XML source. While the tokenizer has support for processing instructions when highlighting XML source, that's the only XML-specific capability provided. Because of this, doctypes that have an internal subset are not highlighted correctly, and entity references to custom entities are also not highlighted correctly.

This mishighlighting can be seen by viewing the source of Firefox chrome files (such as XUL documents). However, this shouldn't be a problem in practice when viewing typical XML files.

See also

  • HTML5 Parser-Based View Source Syntax Highlighting (Blog post)

Document Tags and Contributors

 Contributors to this page: jryans, r-o-b, wbamberg, StripTM, yyss, Hsivonen, Sheppy
 Last updated by: jryans, Oct 8, 2015, 7:22:01 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