編集長ブログ―安田英久
スマホのChromeモバイルでFirebugやHTMLソース表示を使う方法

Android(やiPhoneも、たぶん)のブラウザで、Firebugを使ったり、「ソースを表示」をする方法を解説します。

今日は小ネタです。Android(やiPhoneも、たぶん)のブラウザで、Firebugを使ったり、「ソースを表示」をする方法を解説します。

スマートフォンでブラウザを使っていて、表示しているページのHTMLソースを表示したり、DOMツリーを見たりしたくなることはありませんか?

といってもChromeモバイルにはFirebugや開発者ツールがあるわけでもないですし、わざわざデスクトップPCに接続して開発者ツールでリモートデバッグするのも面倒ですよね。

そこで、次のブックマークレットを使います。

  • Google ChromeモバイルでFirebug Liteを使うためのブックマークレット
    Firebug Lite
  • Google ChromeモバイルでHTMLソースを表示するためのブックマークレット
    HTMLソースを表示

ブックマーク作成は、デスクトップ版のChromeでリンクをブックマークバーにドラッグしてブックマークを作成し、モバイル版のChromeとブックマークを同期させるのが楽です。

モバイル版だけで使っている人は、次のようにしてください。

  1. このページをChromeモバイルで開いてください。

  2. まず、このページ自体をブックマークしてください。このブックマークをベースにして、URLや名前を後から変えていきます。

  3. 次に、今つくったブックマークのURLや名前を変えていきます。まずはブックマークのURLを正しいものにする手順です。

    このページの上にあるFirebug LiteかHTMLソース表示のどちらかのブックマークレットのリンクを長押しして、メニューから[リンクのアドレスをコピー]を選びます。これで、ブックマークレットのURLがクリップボードに入ります。

  4. ブックマークメニューを表示し、今作ったブックマークを長押しして、[ブックマークを編集]を選び、[URL]欄にクリップボードから貼り付け、いちど保存します。

  5. 次に、ブックマークのテキストを正しいものにする手順です。再度このページを表示して、先程と同じリンクを長押しして、メニューから[リンクのテキストをコピー]を選び、クリップボードにブックマークレットのテキストを入れます。

  6. ブックマークメニューを表示し、今作ったブックマークを長押しして、[ブックマークを編集]を選び、[名前]欄にクリップボードから貼り付け、保存します。

これでブックマークレットの作成は完了です。

次にブックマークレットの使用方法です。

とはいえ、Chromeモバイルでは、デスクトップ版Chromeのように、ブックマークレットを使いたいページを表示した状態でブックマークメニューからブックマークを選んでも、うまく動作しません。

そこで、ロケーションバーからの名前補完をうまく利用するのです。

具体的には、ブックマークレットを使いたいページを表示した状態でロケーションバーを表示し、さきほどのブックマークレットの名前の一部を入力するのです。

Firebugを使いたいならば「Fire」、HTMLソースの表示ならば「HTML」のように入力していくと、候補にブックマークレットが表示されるはずです。あとは候補から目的のブックマークレットを選ぶだけです。

要は、デスクトップ版のようなブックマークレットの使い方はできないので、ロケーションバーから名前を入力しなければいけないのですが、頭の数文字を入力すれば候補が出てきてくれるので、それで選びやすいブックマーク名にしておくといいですよ、ということですね。

これで、スマホで気になったページのソースも見放題ですね。

tweet33このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

今日の用語

Google Webmaster Central
自分のサイトをGoogleに登録するための管理ツール。 検索エンジンのクロ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle