Next-Gen App & Browser Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

How to View Source Code in Safari?

To view source code in Safari on a Mac, first enable the Develop menu from Safari > Settings > Advanced, then choose Develop > Show Page Source or press Option + Command + U. You can also right-click the page and select Show Page Source. On iPhone and iPad, Safari has no built-in viewer, so you use a bookmarklet, a third-party app, or remote inspection from a Mac.

Enabling the Develop Menu in Safari

Safari hides its developer tools by default, so the first step is turning on the Develop menu:

Open Safari and click Safari > Settings (called Preferences in older versions) in the top menu bar.
Select the Advanced tab.
Check the box labeled Show Develop menu in menu bar.
The Develop menu now appears between Bookmarks and Window in the menu bar.

Viewing Page Source on Mac

Once the Develop menu is enabled, you have three quick ways to see a page's HTML:

Menu: Choose Develop > Show Page Source from the menu bar.
Keyboard shortcut: Press Option + Command + U, the fastest option for frequent use.
Right-click: Right-click any blank area on the page and select Show Page Source.

The HTML source opens inside the Web Inspector pane, where you can browse the markup, search it, and jump between resources.

Viewing Source on iPhone and iPad

Safari on iOS does not include a native source viewer, but you have a few workarounds:

Third-party apps: Install an app such as View Source from the App Store, then use Safari's Share icon to send the page to it.
Bookmarklet method: Create a bookmark and replace its URL with the JavaScript below. Tapping it shows the page source.
Remote inspection: Connect your device to a Mac via USB and use Safari's Web Inspector for full DOM and CSS access.

javascript:(function(){window.location='view-source:'+location.href})()

Page Source vs Web Inspector

Show Page Source: Displays the raw HTML the browser originally received, best for a quick look at markup.
Web Inspector: Open with Develop > Show Web Inspector to see the live DOM, CSS, JavaScript, network, and console.
Inspect Element: Right-click any element and choose Inspect Element to focus Web Inspector on that specific node.

Common Mistakes and Troubleshooting

Develop menu missing: You skipped enabling it. Re-check the Advanced settings box, and note newer Safari may list it under a Developer section.
Shortcut does nothing: Option + Command + U only works after the Develop menu is turned on.
Bookmarklet blocked: Some iOS versions restrict view-source. Use a dedicated app or remote inspection instead.
Source differs from what you see: Page source shows initial HTML; JavaScript-rendered content only appears in the live DOM via Web Inspector.
No Mac available: Use a cloud platform to inspect Safari remotely instead of buying Apple hardware.

Conclusion

Viewing source code in Safari is simple once the Develop menu is enabled: use Develop > Show Page Source or the Option + Command + U shortcut on Mac, and rely on bookmarklets, apps, or remote inspection on iOS. For anything beyond static HTML, Web Inspector gives you the full live DOM, CSS, and JavaScript, and cloud device platforms let you inspect Safari on hardware you do not physically own.

Frequently Asked Questions

How do I view source code in Safari on Mac?

Enable the Develop menu from Safari > Settings > Advanced by checking Show Develop menu in menu bar. Then choose Develop > Show Page Source, or press Option + Command + U. You can also right-click the page and select Show Page Source.

What is the keyboard shortcut to view page source in Safari?

The shortcut is Option + Command + U. Once the Develop menu is enabled, pressing this combination opens the HTML source of the current page in the Web Inspector, making it the fastest way to view source frequently.

Why is the Develop menu missing in Safari?

By default the Develop menu is hidden. Turn it on in Safari > Settings (or Preferences) > Advanced by ticking Show Develop menu in menu bar. In newer Safari versions the option may appear under a Developer or Advanced section.

How do I view source code in Safari on iPhone or iPad?

iOS Safari has no built-in source viewer. Use a third-party App Store app like View Source, add a view-source bookmarklet, or connect the device to a Mac and inspect it remotely with Safari's Web Inspector over USB.

What is the difference between Show Page Source and Web Inspector?

Show Page Source displays the raw HTML the browser received. Web Inspector is the full developer tool: it shows the live DOM, CSS, JavaScript, network requests, and console, letting you edit and debug the rendered page rather than just read static markup.

How do I inspect a specific element in Safari?

With the Develop menu enabled, right-click the element on the page and choose Inspect Element. Safari opens Web Inspector focused on that node, showing its HTML, applied CSS, and box model so you can debug layout and styling issues.