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

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

Evernote Webクリッパーを入れてみた♪

この記事は約 1 分で読めます。Web上で興味を持ったページの情報をそのまま手軽にEvernoteに保存する方法を試してみたいと思います。 日頃使っているEvernoteの便利な使い方その2です。(2 …

no image

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

この記事は約 1 分で読めます。 日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。 Photoshopでレイアウ …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

MAMPでMySQLが起動しない時

この記事は約 1 分で読めます。 MAMPを起動した時、Apacheはちゃんと起動されているのにMySQLが起動しないことがあります。 いろいろな原因はありそうですが、とりあえず調べた内容でなんとか無 …