アシアルの中の人が技術と思いのたけをつづるブログ

GoogleChrome に Firebug extension をいれてみた + よさげなextensionまとめ

タグ [  Tech  GoogleChrome  extension  Firebug  ]
こんにちは。松田です。
システムの開発時にはFirefox+Firebugが欠かせなくなっていますが、最近Firefoxがクラッシュしまくる現象に悩まされてます。セーフモードで起動しようがFirefox自体インストールし直そうが、ちょっと使っているとすぐにクラッシュ。
いい加減Firefoxに愛想がつきてきた・・・けどFirebug無いと開発できない。ChromeとかでFirebugっぽいこと出来ないかなぁ・・・、と検索してみたらFirebug Liteエクステンションなるものを発見。さっそく入れてみました。

というかエクステンション機能自体出ていたことを知りませんでした。
いつのまに・・・。


まずはGoogleChromeのインストール

通常のGoogleChromeではエクステンションに対応していないので、エクステンションに対応したdev版のGoogleChromeをインストールする必要があります。

通常版のGoogleChromeでもエクステンションに対応したようです。
http://www.google.com/chrome/eula.html?extra=devchannel

次にFirebugのインストール
https://chrome.google.com/extensions/detail/bnbbfjbeaefgipfjpdabmpadaacmafkj
上記リンクの「インストールボタン」を押せば数秒で登録完了です。
簡単でいいですね。Chromeエクステンションのインストールの場合、ブラウザを再起動させる必要もないようです。

これでURL入力欄の右側にボタンが追加されます。
通常のプラグインはここのボタンを押せばだいたい何かしら動作します。
さっそくクリッククリック。


あれ・・・何も起きない・・・?


何もおきないよ?
サイト内の説明を読むかぎりでは、インストール直後はページをリフレッシュしないとみれない、なおかつ、Google Chrome Extensionのサイト内では使用できないもよう。
上記に当てはまらないのにダメな場合は、以下のリンクをブックマークのツールバーにドラッグしてブックマークレットを作ってみてください。

↓このリンクをドラッグ!
Firebug Lite

ブックマークレット完成

アイコンをクリックしても何も起きない場合でも、このブックマークレットからだと何故か起動してくれることが多いです。謎です。
これでうまくいけば無事Firebugが立ち上がります。

とうとうChromeにFirebugが・・・。

あ、あれ?
なんか足りない。
一番使いたかった「接続」タブが無いっ。なんてこったい!
この辺がLiteたる所以なのかっ。

ちょろっと使ってみた感じでは、Inspectorは普通に使えます。
ただ、そこからの要素の書き換えはまだ出来ないようです。
ページをリロードすると枠が消えちゃったりとか改善が必要な様子。
まだまだFirefox版のほうが実用向き。
今後に期待です。




ほかのエクステンションも
新しいブラウザにいじると大体やっちゃうのが使えそうなアドオン探し。
どうせいじるのは最初の頃だけなんだろうなーと分かっていながらもいろいろ入れてみました。
せっかくなので入れてみたものを紹介。

Chrome Gestures
マウスジェスチャー
右クリックしながらマウス動かして進んだり戻ったり更新したり。
GoogleChromeを使ってなかった理由の一つがこれができないからだったりもしたり。

XML Tree
GoogleChromeではXMLのページがただのテキストで表示されますが、これをいれればカッコよくXML風に表示可能。
ただ、後述の他のエクステンションと同時に使うといろいろとおかしなことが起こります。
Coolirisを入れてるとXMLの最初の階層にstyleタグが入れ込まれちゃう。
Furigana Injectorを入れてるとXMLページを表示しただけでエラーが出ちゃう。
これはどっち側の責任なのか。うーん。

Furigana Injector
表示しているサイト内の漢字にフリガナを付けてくれる。
フリガナを付ける漢字のレベルも簡単に調整できる。はずなんですが自分の環境だとまだ動作してくれてません。なぜ・・・。

URL入力フォームの右端に出る「振」マークをクリックしたらフリガナが表示された。
この場所って他のエクステンションとかぶったらどうなるんだろ。

Ibrii
ページ右側にカートのような枠を表示し、サイト内の画像やらテキストやらをドラッグして放り込んで保存しておくことができます。おもしろげ。
最初に簡単なユーザー登録が必要。

Cooliris
GoogleImage等の画像検索画面などをカッコよく表示してくれる。
それでいて見やすい。
昔Firefoxで使ってたときは日本語入力ができなかった気がするけどいつの間にか対応してた。カッコイイッス。

Hatena Bookmark GoogleChrome extension
メニューのアイコンには見ているページのはてぶ数を表示。
アイコンをクリックすると、「ブックマークする」ボタンと、そのページについているはてぶコメントが出現。ベンリ。

IE Tab
クリックするとIEを使用したタブが出現。
Web開発者にはもってこい。

Digital Clock
ただの時計。
アイコン状態で時間が表示されているので地味に便利。

Google Similar Pages beta
クリックすると表示しているページと似ているサイトをいくつか教えてくれる。
そんなに使ってないけど単にリンクのあるサイトが出ているだけの気もする。

Mini Google Maps
アイコンをクリックするだけでちっこいGoogleMapが出現。検索枠もついてる。
これでいちいち新しいタブで地図を開かなくてもよくなるっ

Bubble Translate
翻訳エクステンション。
Ctrlを押しながら文字列選択とかで翻訳結果をツールチップ表示してくれる。
ヴぇんり。

AutoPatchWork
ページャーが存在するページで一番下までスクロールすると、次のページを勝手に取得してつなげて表示してくれる。

Sexy Undo Close Tab
閉じたタブをスタックしておいてあとで復元することができる。
やべっ、閉じちゃったっ! ってことが多い人はぜひ。
同じ内容のエクステンションMK UndoCloseTabよりも、ちょっぴり見た目がせくしー。

PageShot
クリックするとページのスクリーンショットをとってくれる。
一度ページ全体をキャプチャーしたあと、必要な部分だけ切り出すこともできる。
pngで保存可能。

Google Apps Shortcuts
Googleの提供するいろんなサービスへのショートカット
生活のすべてをGoogleに預けてちゃってる人は是非



使ってみて思ったこと
・いっぱい入れてみたけど体感速度は変わらず。モッサリしない。
・エクステンションのアイコンの表示位置はすべてここで固定?
・別の場所に移動させたい。それかせめて並べ替えたい。
・まだまだ微妙な出来のエクステンションが多い
・オプション画面がカッコ悪いのが多い
・インストール後に再起動を迫らない割に、再起動しないと動作しないものもあったり
・そもそもちゃんと動作しないものもあったり
・エクステンション同士が邪魔しあうことも
・でも乗り換えちゃっていいと思えるぐらい十分な性能

全般的に今後が楽しみといった感じです。

コメント

    • ChromeのデベロッパーツールでだいたいFirebug相当のことができると思いますけどそれではだめですか?ちなみにWebkitの機能なのでSafariでも使えます.例えば以下のURLとかに解説あります.
      http://journal.mycom.co.jp/news/2009/12/04/040/index.html

      というか,普通に使ってればそんなにFirefoxは落ちないですよ.単なる再インストール時にちゃんとプロファイルを作り直してますか?

      もっと言うとChrome 4の正式版出てるのでdev版じゃなくても拡張機能使えますよ.
      http://journal.mycom.co.jp/news/2010/01/26/005/index.html

      というわけで長くなってしまいましたが,いろいろと調べてみてください.FirefoxもChromeも素晴らしいブラウザです.
    • ちくさんも書かれてますが、JavaScriptコンソール使えばFirebug相当のことはできます。

      ショートカットはデフォルトならCtrl+Shift+iです。
      解説はos0xさんの記事が詳しいです。
      http://gihyo.jp/dev/serial/01/chrome-extensions/0006
    • >ちくさん、Kisさん
      コメントありがとうございます!

      説明不足ですみません。
      現在Flexの開発を行っており、FlexBuilderからデバッグツールからFirefoxを起動、終了といった処理を繰り返しています。
      これをしばらくやっていると、そのうちクラッシュして何もできなくなってしまうといった症状です。もちろんプロファイルの作り直しもやってはいるのですが、上記のような作業をしばらく繰り返しているとやっぱり落ちてしまいます。

      現在Flashから大量のHTTPリクエストを送るようなアプリを作っています。Firebugでは「接続」タブを使ってこのリクエストが正しく呼び出されているかを見ていたのですが、このFlashからのリクエストをデベロッパーツールでは検出してくれないようだったので他の方法を探していたところでした。(これも使い方が分かってないだけかもしれませんが・・)

      >もっと言うとChrome 4の正式版出てるのでdev版じゃなくても拡張機能使えますよ.
      >http://journal.mycom.co.jp/news/2010/01/26/005/index.html
      Chrome4の正式版出てたんですね。知りませんでした!

      ありがとうございました。
      いろいろと勉強してみます。
    • すいません、ちょっと気になってコメントしますね。

      YSlowを入れていたらもしかするとそれが原因かもしれないですよ。
      2.0.5が入ってるとクラッシュしまくりです。

      http://blog.alucari.com/2010/01/27/yslow2-0-5%E3%81%8C%E5%8E%9F%E5%9B%A0%E3%81%A7firefox%E3%81%8C%E3%82%AF%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%81%97%E3%81%BE%E3%81%8F%E3%82%8B/
      よろしければ参考にしてみてください。
    • >アルカリさん
      情報ありがとうございます!
      参考にさせていただきます。
    • わたしもYSlowをアップデートしたとたんに落ちるようになったので、その場で削除しました。

      すると、不安定だったのが嘘のように元に戻り…

      他の何かのアドオンとかち合ってるんですかね~

コメントフォーム

認証
captcha_key
 

トラックバック