This is how you view the source code of websites on iPhone, iPad, and Mac

0
83

Do you want to view the source code (HTML, CSS or JavaScript) of a web page? This can be done with special apps, but it also works with a handy trick for iOS. We also explain how to view the source code of a web page on the Mac.

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:

  1. Open the desired website in Safari.
  2. 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:

  1. Go to Safari > Preferences.
  2. Go to the Advanced tab.
  3. At the bottom of the screen, check Show Develop menu in menu bar.

Develop menu Enable Safari for website source code

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:

  1. Open any web page in Safari on iPhone or iPad.
  2. Tap the share button and choose Add Bookmark.
  3. Name the bookmark ‘Show page source’.
  4. Tap Save and go to the website you want to inspect.
  5. Choose the Bookmark icon (book) in the toolbar, then tap the small book and then choose Edit.
  6. Open the Show Source Code bookmark you just created.
  7. 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))})();

View website source code on iPhone

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!

Previous articleThey reveal why night owls are more at risk of dying sooner
Next articleThese are the best Evernote alternatives