View website source code
See an interesting effect on a website and want to know how it was created? Then you can view the source code of a website. This is very simple on the Mac, but on iPhone and iPad you will have to use an app or a special trick.
- Mac
- iPhone and iPad
- iOS apps
View source code of a website on Mac
If you want to view the source code of a web page in Safari on the Mac, it’s very easy. That is how it works:
- Open the desired website in Safari.
- From the menu bar, choose Develop > Show Page Source.
Is the Develop menu not visible? Then you will first have to activate the develop menu:
- Go to Safari > Preferences.
- Go to the Advanced tab.
- At the bottom of the screen, check Show Develop menu in menu bar.
You will now see the Develop option in your menu bar. From now on, on any web page, you can go to Develop > Show Page Source to see what the HTML code looks like. You can also use the key combination Option + Command + U to use. The source code now appears in a separate window at the bottom of the screen. You can also use the right-click method mentioned earlier and choose Show page source (or Inspect element) if you want to see the code of a specific part.
View source code on iPhone and iPad
It works a little differently on the iPhone and iPad, because you don’t have extensive menu options there. Here’s how it works for Safari and Chrome on iOS:
- Open any web page in Safari on iPhone or iPad.
- Tap the share button and choose Add Bookmark.
- Name the bookmark ‘Show page source’.
- Tap Save and go to the website you want to inspect.
- Choose the Bookmark icon (book) in the toolbar, then tap the small book and then choose Edit.
- Open the Show Source Code bookmark you just created.
- In the second field, paste the JavaScript code you see below. Or copy it from this text file.
javascript:(function(){var a=window.open('about:blank').document;a.write('< !DOCTYPE html><html><head><title>Source of '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace="pre-wrap";b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
You can now go to any web page and view its source code in Safari and Chrome, on both iPhone and iPad. Whenever you tap Bookmarks > Show page source you will see the source code.
View website source code with apps
There are also apps that can do this, such as View Source and Source for Webpage. These apps allow you to view HTML, CSS, and JavaScript. Sometimes there is also a Safari extension for iOS so that you can have certain terms highlighted. With such apps it is even easier: you enter a URL and immediately see the source code.
Does this taste like more? Then try the experimental Safari functions on your iPhone and test new technology!
