【アプリ不要】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))})();うまく行かない場合は､ここからテキストをコピーしてみてください｡
③ 先ほど追加したブックマークを編集します｡
これを
このように編集します｡
タイトルは好きな名前に
アドレスは先程コピーしたコードを貼り付け､「完了」で保存します｡
これで準備は完了です｡
使い方
目的のページを開いた状態で､ブックマークを開きます｡
作成したブックマークレットを開きます｡
ソースコードが表示されました｡
拡大したり､テキストをコピーしたりできます｡
iOSのChromeでも同様に動作が確認できました｡
Androidの場合
AndroidのChromeの場合は､URLの先頭にview-source:を付けるだけです｡
例えば､このようなURLなら
https://www.google.co.jp/
こうしてページを開きます｡
view-source:https://www.google.co.jp/
するとソースコードが表示されました｡
文字が小さいですが､拡大したり､テキストをコピーしたりできます｡
また､AndroidのChromeではiOSの章で紹介しているブックマークレットを使った方法は動作を確認できませんでした｡
コメント
-
#001
匿名さん
すごすぎます
-
#002
オーナー
ありがとうございます！
-
#003
匿名さん
ガセだね
-
#004
オーナー
ご意見お寄せいただきありがとうございます！
記事作成時に確かに動作を確認していたのですが､現在確認したところ不具合が見つかったため記事を一掃しました｡
ご報告いただき､本当にありがとうございました｡
-
#005
匿名さん
あれ無理じゃね
-
#006
オーナー
コメントありがとうございます｡
私の環境ではiOS､Android共に動作を確認しているのですが
ご使用の環境を教えていただけないでしょうか？
-
#007
匿名さん
safariでするとできたのですが、書き換えることはできないのでしょうか？
-
#008
オーナー
書き換えることはできないです！
専用のアプリか､PCの検証ツールを使ってください！
お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡
または以下のボタンからなにか買って応援 (PR)