Webの記録

スマートフォンサイトのソースコードを見たいときに便利だったツール【AndroidとPC】

投稿日:

この記事は約 5 分で読めます。

android_mini

今までPC用サイトだけだったのが、最近ではレスポンシブだったりスマホサイトだったり・・・と多様化してきました。

まだまだスマホでの表示は謎が多くて、毎回ドキドキしてます。

Androidでスマホサイトを見ていて、ソースコードが気になった時に使ってみたツールをメモとして残します。

最後の1つだけ、PCから表示する方法です。

目次

  1. jsをAndroidにブックマークして、ソースコード表示
  2. アプリ「HTML Dual Viewer」でソースコード表示
  3. Androidでchoromeブラウザを開いてスマホサイトのURLの先頭に「view-source:」
  4. Ultimate User Agent Switcher(chromeの拡張機能)を使ってPCでスマホサイト表示
  5. まとめ
1.jsをAndroidにブックマークして、ソースコード表示

ソースコード表示をしてしまうとサイト自体が見えません。またソースコードの表示でDOCTYPE宣言などが省略されてしまってます。しかしソースコードをたどってcssなども見れるので、とても便利です

  • 手順1:Android実機で適当なサイトをブックマークに保存する
  • 手順2:手順1で保存したブックマークの「アドレス」部分を編集(アドレスに手順3下のjsのコードと差し替える)
  • 手順3:見たいスマホサイトとAndroidで表示した後、先ほどのブックマークを1クリックして呼び出すだけ。
javascript:(function(){var w = window.open('about:blank'),s = w.document;s.write('');s.close();var f = s.body.appendChild(s.createElement('form'));f.setAttribute('method','post');f.setAttribute('action','http://ole.michelsen.dk/viewsource/?uri='+location.href);var i = f.appendChild(s.createElement('input'));i.setAttribute('type','hidden');i.setAttribute('name','DOM');i.setAttribute('value',encodeURIComponent(document.documentElement.innerHTML));f.submit();})();

【参考サイト】Android で HTML ソース!!|actywayさま

2.アプリ「HTML Dual Viewer」でソースコード表示

スマホサイトを表示しながら、横でソースコード表示ができます。ただし、ソースコードのコピーはできません。。

  • 手順1:アプリ「HTML Dual Viewer」をGoogleplayストアでインストール
  • 手順2:「HTML Dual Viewer」を起動して、見たいスマホサイトを表示すると、サイトの横にソースコードが表示されます

【参考サイト】スマホサイトのHTMLソースを見る4つの方法|webmemorand.さま

3.Androidでchoromeブラウザを開いてスマホサイトのURLの先頭に「view-source:」

Androidにchoromeブラウザを入れていることが前提です!

表示結果は、「1.jsをAndroidにブックマークして、ソースコード表示」と近い感じです。

  • 手順1:見たいスマホサイトを表示します
  • 手順2:URL欄の先頭にview-source:と入力するだけで、ソースコード表示ができます

【参考サイト】スマートフォンからHTMLソースを表示するスマートな方法|佐渡の洋食屋店長のブログさま

4.Ultimate User Agent Switcher(chromeの拡張機能)を使ってPCでスマホサイト表示

PCでスマホサイトを見るときに便利だったツール「Ultimate User Agent Switcher」(chromeの拡張機能)です。

日頃使い慣れているPCでソースコードを見れるのが一番楽ですね~♪

ただし、表示確認できるバージョンが古いのが残念だけど、使えると思います!

Ultimate-User-Agent-Switcher

【URL】https://chrome.google.com/webstore/category/apps?hl=ja

  • 手順1:ChoromeストアからPCへUltimate User Agent Switcherをインストールします
  • 手順2:PCのブラウザで、見たいスマホサイトを表示します
  • 手順3:「Ultimate User Agent Switcher」のアイコンが画面右上に表示されているので、設定をする(今すぐ有効にする!にチェックし、見たい機種にチェックする)
  • 手順4:通常のPCサイトのソースコードを見るように、Developer Toolsなどでソースコード表示をします

Ultimate-User-Agent-Switcher_2

【参考サイト】スマホサイトのHTMLソースを見る4つの方法|webmemorand.さま

5.まとめ

今回、ちょっと人が作ったスマホサイトをAndroidで見ながら・・・やらなくてはならない事がありました。

すると、ソースコード表示がどうしても見たくなってしまいました。

ソースコード表示ができる方法をググって試した結果が、今回の記事です。

スマホサイトはまだまだ分からないことだらけです。。。
今回の便利なツールで、これから勉強です!!

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

苦手なJavaScriptをイチから勉強してみる【関数編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【イベント編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

WordPress お問い合せフォームプラグイン「Trust Form」を試してみた♪

この記事は約 1 分で読めます。 今回は、WordPressのお問い合せフォーム用プラグイン「Trust Form」を試してみました。 ・・・と言っても、まだローカル環境でのテスト操作なので全ての実験 …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …