[No App Required] How to view page HTML source code on iOS and Android

For iOS

For iPhone and iPad, you can display HTML source code using a bookmarklet.

You can use it with either Safari or Chrome browsers!

① First, to create a temporary bookmark, bookmark this page anywhere you like.

Bookmark this page

② Next, copy the following code.

javascript:(function(){var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>ViewSource:'+location.href+'</title><meta name="viewport" content="width=device-width,initial-scale=1" /></head><body></body></html>');a.close();var s = a.createElement("script");s.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian";a.body.appendChild(s);var b=a.body.appendChild(a.createElement('pre'));b.className='prettyprint lang-html linenums';b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.style.wordBreak='break-all';b.style.fontSize='11px';b.appendChild(a.createTextNode(document.getElementsByTagName('html')[0].outerHTML))})();

If it doesn't work, try copying the text from here.

javascript:(function(){var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>ViewSource:'+location.href+'</title><meta name="viewport" content="width=device-width,initial-scale=1" /></head><body></body></html>');a.close();var s = a.createElement("script");s.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian";a.body.appendChild(s);var b=a.body.appendChild(a.createElement('pre'));b.className='prettyprint lang-html linenums';b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.style.wordBreak='break-all';b.style.fontSize='11px';b.appendChild(a.createTextNode(document.getElementsByTagName('html')[0].outerHTML))})();

③ Edit the bookmark you just added.

Create a bookmarklet

From this

Create a bookmarklet

Edit it like this.
For Title, use any name you like.
For Address, paste the code you just copied, and save with "Done".

Create and save bookmarklet

Now the setup is complete.

How to use

With the target page open, open your bookmarks.

Open bookmarks

Open the bookmarklet you created.

Bookmarklet Display HTML source

The source code is now displayed.

Display HTML source code in Safari on iPhone

You can zoom in or copy the text.

It was also confirmed to work similarly in Chrome on iOS.

Display HTML source code in Chrome on iPhone

For Android

For Chrome on Android, simply add view-source: to the beginning of the URL.

For example, for a URL like this:

https://www.google.co.jp/

Open the page like this:

view-source:https://www.google.co.jp/

Then the source code will be displayed.

Display HTML source code in Chrome on Android

The text is small, but you can zoom in or copy it.

Also, the bookmarklet method introduced in the iOS section was not confirmed to work in Chrome on Android.

Comments

#001
2023-09-01
Anonymous

Amazing!
#002
2023-09-04
Owner

Thank you!
#003
2023-11-20
Anonymous

That's fake.
#004
2023-11-20
Owner

Thank you for your feedback!

I had indeed confirmed its operation when creating the article, but upon checking now, I found a bug and have cleared the article.

Thank you very much for reporting it.
#005
2023-11-22
Anonymous

That's impossible, isn't it?
#006
2023-11-22
Owner

Thank you for your comment.

I have confirmed it works on both iOS and Android in my environment, but

Could you please tell me about your environment?
#007
2024-02-20
Anonymous

I was able to do it with Safari, but is it not possible to rewrite it?
#008
2024-02-20
Owner

You cannot rewrite it!

Please use a dedicated app or a PC's developer tools!