スマートフォンやタブレットでFirebugを使う
- ライター：鹿
ウェブ制作をしたことがある人なら1度は使ったことがある「Firebug」というFirefoxのアドオンですが、こちらをAndroidのスマートフォンやタブレットでも使用することが出来ないか？と調べてみたところありました。
ブックマークレットを使用して、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を使って快適なコーディングをしていきたいです！
-
広告を表示できません。