スマートフォンやタブレットでFirebugを使う
ウェブ制作をしたことがある人なら1度は使ったことがある「Firebug」というFirefoxのアドオンですが、こちらをAndroidのスマートフォンやタブレットでも使用することが出来ないか？と調べてみたところありました。
Martin Kool – How to use Firebug on your iPad and iPhone
ウェブ開発者必携の「Firebug」をiPhone, iPadで利用する方法 : 二十歳街道まっしぐら
ブックマークレットを使用して、Firefoxのアドオンの簡易版を使用できるようです。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
- 目次で流し読みする ･*･:≡( ε:)
Firebugの使い方
今回はAndroidタブレットのdtabと、Google Chromeの環境で使用してみます。
まずは参考サイトのページよりコードをコピーします。
以下、コードの転載です。
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+’NS’]&&F.documentElement.namespaceURI;E=E?F[i+’NS’](E,’script’):F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F[e](‘head’)[0]||F[e](‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,’setAttribute’,’getElementsByTagName’,’FirebugLite’,’4′,’firebug-lite.js’,’releases/lite/latest/skin/xp/sprite.png’,’https://getfirebug.com/’,’#startOpened’);
引用元：Martin Kool – How to use Firebug on your iPad and iPhone
コピーしたコードをブックマークに追加します。
Firebugで要素を調査したいページを開き、ブックマークからFirebugを選択します。
すると、ブックマークのページの要素を調査してしまいました。このページってHTMLで出来てたんですね。知らなかった。。
ブックマークからは起動できないことが分かったので、気を取り直して要素を調査したいページに戻り、アドレスバーに「Firebug」と打ち込みます。するとブックマークのサジェストが表示されるので先ほど登録したFirebugのブックマークレットを選択します。
すると見慣れたFirebugが起動します。
操作はタッチパネルなのでPCに比べるとやはり操作性は劣りますが、実機で崩れているところをササッと確認出来るのは便利ですね！
別タブを開いてブラウザいっぱいにFirebugを広げることも出来ます。タブを切り替えることでこの要素がどの範囲なのかも知ることが出来るので、とても使いやすいです。
スマートフォンでも動作します。
ちなみに、スマートフォンでも一応動きます。でも画面が小さいのでめちゃくちゃ使いづらいです。タブレットで使用するといいブックマークレットですね。
スマートフォンで別窓にすると何とか使えるかなといった感じです。
最後に
最初はAndroidでモブログをするために調べていたのですが、タブレットでの使い勝手が段違いなのでタブログでの使用となりそうです。
これからはFirebugを使って快適なコーディングをしていきたいです！
