フロントの人の雑多メモ

【アプリ不要】iOS・AndroidでページのHTMLソースコードを表示する方法

【アプリ不要】iOS・AndroidでページのHTMLソースコードを表示する方法

iOS・Android両対応スマホのブラウザでHTMLソースを表示する方法をご紹介します。

目次

iOSの場合

iPhoneやiPadの場合はブックマークレットを使って、HTMLのソースコードを表示できます。

ブラウザはSafariでもChromeでも使えます!

① まずはテキトーなブックマークを作成したいので、このページを好きな場所にブックマークします。

このページをブックマーク

② 次に、以下のコードをコピーしてください。

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))})();

うまく行かない場合は、ここからテキストをコピーしてみてください。

③ 先ほど追加したブックマークを編集します。

ブックマークレットを作成

これを

ブックマークレットを作成

このように編集します。
タイトルは好きな名前に
アドレスは先程コピーしたコードを貼り付け、「完了」で保存します。

ブックマークレットを作成して保存

これで準備は完了です。

使い方

目的のページを開いた状態で、ブックマークを開きます。

ブックマークを開く

作成したブックマークレットを開きます。

ブックマークレット HTMLソースを表示

ソースコードが表示されました。

iPhoneのSafariでHTMLソースコードを表示

拡大したり、テキストをコピーしたりできます。

iOSのChromeでも同様に動作が確認できました。

iPhoneのChromeでHTMLソースコードを表示

Androidの場合

AndroidのChromeの場合は、URLの先頭にview-source:を付けるだけです。

例えば、このようなURLなら

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

こうしてページを開きます。

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

するとソースコードが表示されました。

AndroidのChromeでHTMLソースコードを表示

文字が小さいですが、拡大したり、テキストをコピーしたりできます。

また、AndroidのChromeではiOSの章で紹介しているブックマークレットを使った方法は動作を確認できませんでした。

コメント

  • #001

    匿名さん

    すごすぎます

  • #002

    オーナー

    ありがとうございます!

  • #003

    匿名さん

    ガセだね

  • #004

    オーナー

    ご意見お寄せいただきありがとうございます!

    記事作成時に確かに動作を確認していたのですが、現在確認したところ不具合が見つかったため記事を一掃しました。

    ご報告いただき、本当にありがとうございました。

  • #005

    匿名さん

    あれ無理じゃね

  • #006

    オーナー

    コメントありがとうございます。

    私の環境ではiOS、Android共に動作を確認しているのですが

    ご使用の環境を教えていただけないでしょうか?

  • #007

    匿名さん

    safariでするとできたのですが、書き換えることはできないのでしょうか?

  • #008

    オーナー

    書き換えることはできないです!

    専用のアプリか、PCの検証ツールを使ってください!

内容を確認の上、個人情報などは省いて掲載させていただきます。

お名前・メールアドレスも入力する

メールで返信がほしい場合に入力してください。

頂いた個人情報は開示しません。返信のためだけに利用いたします。

直接送信されます。確認の上、「送信」してください。

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る

シェア

Twitterでシェア Facebookでシェア LINEでシェア はてなブックマークでシェア

お役に立てましたら応援をお待ちしております!
頂いた応援は子育てに活用させていただきます。

OFUSEで応援を送る