iPhoneでWebサイトのソースコードを確認する方法

iPhoneで表示させたWebサイトのソースコード
iPhoneで表示させたWebサイトのソースコード

iPhoneでソースコードを確認したい！

iPhone用のブラウザアプリ、SafariやGoogle Chromeには、Webサイトのソースコードを見る標準機能がありません。

そのため、Webサイトのソースコードを見たいときは、僕はこのブックマークレットを使って見るようにしています。

ブックマークレットとはいえ、ただのお気に入りです。

以下、すべてiPhoneのみで完結する方法です。

PR【最大8％ポイント還元】スマイルSALE開催中！ AmazonにてスマイルSALE ゴールデンウィークが開催中。価格が安くなってるのはもちろん、合計10,000 円以上のお買い上げを対象にポイント還元率がアップ。プライム会員＆Amazon Mastercardで4.5％ポイントアップ！スポーツ・アウトドア用品はさらに3.5%ポイントアップ。この機会にまとめ買い！数量限定品は在庫がなくなり次第終了です。4/22 23:59まで
スポンサーリンク

1. JavaScriptをコピーする

この記事を最初に書いた2013年当初は、「Snoopy」というブックマークレットを利用してましたが、2023年にもなると動作しなくなりました。

と言うわけで、オリジナルの方法で行います。

この方法なら、SafariでもChromeでもFireFoxでも、パソコン版のブラウザでもソースコードを確認できます。

まず最初に、下記のJavaScriptのソースコードを全部選択してコピーしてください。

javascript:(function(){var a=window.open('about:blank').document;a.write('ViewSource:'+location.href+'');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))})();

2.Safariのブックマークに追加

後は上記コードを使ってブックマークレットを作ります。

ブックマークレットといってもただのお気に入りです。

Safari下段に並んでいる矢印の付いた真ん中のアイコンをタップ。あとで編集するのでどのページでもいいです。

お気に入りに追加
「お気に入りに追加」をタップ。


ブックマークを編集
ブックマークのURL部分に、先ほどコピーしたJavaScriptをペーストします。

あとは、そのまま一旦保存しても良いし、編集しても構いません。

私の場合は、ブックマークの名前を「Source code」にして「Bookmarklet」というフォルダに保存しました。

これでブックマークレットの追加は完了。

3. 表示の確認

最後に表示の確認を行います。

ソースコードを確認したいページでブックマークを開き、先ほどのブックマークに追加した「Source code」を選択します。

ソースコードを表示
すると、別ウィンドウでソースコードがずらーっと表示されます。

iCloudでSafariも同期するように設定していれば、MacのSafariでも同じようにソースコードをブックマークレットからも確認できるようになります。もちろんMacでもソースコードは確認可能です。

同じことをChromeやFireFoxなど普段使ってるブラウザでやれば、他のブラウザでも使えます。

ソースコードをiPhoneでも確認したかった方、ぜひお試しください。

この記事のシェアもお願いします！

iPhone便利な使い方の記事をもっと読む

スポンサーリンク

この記事をシェアする

記事についてのご感想・ご質問、受付中！

分かりやすい記事になるように努めてますが、「こういうことを知りたかった」「ここについてもうちょっと詳しく教えて」など、当記事について質問や知りたいことがあれば以下のツイートボタンからお気軽にお送りください。自動的に記事URLが入りますのでそのまま質問内容を最上部に記入してください。できるだけ早く返信させていただきます（質問が多い場合はお時間をいただくことがあります）。

ご質問は無料。質問はもちろん、「役に立った！」「面白かった！」など、お褒めの言葉だともっとうれしいです！

記事を少しでもより良いものにするためにご協力をお願いいたします。

このブログ「スーログ」を購読する

この記事が気に入ったら
「いいね！」しよう。
いいね！
最新記事をお届けします。

● 最新記事をRSSで配信中です。feedlyへの登録はこちらから。

● twitterでの情報発信、YouTubeで動画レビューも公開してます。チャンネル登録もよろしく！