Kinopyo Blog

プログラマとしてRuby, Rails, iPhone, iPad,Macなどなどと向き合う日々のログポース

Posts Tagged ‘Firebug’

FirefoxでjQueryを開発するならFireQueryを使ってみよう

2009年12月13日

FireQueryはFirebugを拡張したアドオンで、jQueryをよりよくサポートできるんです。

jQueryのオブジェクトをコンソールで確認したり、マウスオーバーで画面上のレーヤーで表示されたりして

大変便利になります。

これ以外でもjQuerifyというやつがあって、

jQueryが適用されてないhtmlにもfirebugのコンソールで直接jQueryのコードを書いてそのまま動作確認ができます。

主な機能

  • jQuery expressions are intelligently presented in Firebug Console and DOM inspector
  • attached jQuery data are first class citizens
  • elements in jQuery collections are highlighted on hover
  • jQuerify: enables you to inject jQuery into any page

FireQuery

FireQuery2

jQuerifyを使おう!

  • まずfirebugのconsoleのjQuerifyをクリックします。するとjqueryが適用されたと表示されます。

jquerify

  • 次は「>>>」のところでjquery文を書けばOKです。

fireQuery

  • 複数行のjqueryコードが書きたい場合は、右下にある「↑」ボタンをクリックし、コンソールの右フレームで書けます。

jquery-runed

ダウンロード

FireQuery Download

FireRainbow – FirebugのJavaScriptをシンタクスハイライト

2009年12月11日

FirebugのJavaScript、HTML、CSSをシンタクスハイライトするアドオンです。


firewindow

ダウンロード

FireRainbow Download

機能概要

  • Mixed syntax highlighting powered by CodeMirror
    • Javascript
    • HTML
    • CSS
  • Advanced features:
    • Color theme can be modified using Firebug’s CSS panel
    • Highlighting is applied incrementally (good performance)
    • Color themes available on GitHub

追記

今まで使ったところブレークポイントが付けない不具合がありました。

不具合発生時、firebug内のソースがハイライトしてないので疑いがあると判断し、

いったんマウスホイルを一回回すとソースはハイライトされブレークポイントもつけるようになりました。

これで一応回避できます。

Firebugがバグる:「Failed to load source for sourceFile top-level…」

2009年12月02日

現象

FirebugでJavaScriptをデバッグしようとするとこんなエラーになりました。

Failed to load source for sourceFile top-level http://sample.com/jquery.js script.tags( X| 1094 1095 ...

環境

  • Firefox : 3.5.5
  • firebug : 1.4.5

調査

ぐぐって見ましたが、いい回答が見つかりませんでした。

同じバグにあった方のブログでのやり方で、

firebugを1.3.0に戻してもダメでした。

さらに1.3.3ではこの問題が解決されたと、firebugの公式サイトの回答がありました。


結局は..

エラーとなるプロジェクトを丸ごとTomcatサーバに置いたら、firebugで普通に見れました。

なぜかははっきり分かりませんが、この同じプロジェクトをずっとローカルで開発してきて、

firebugも全然問題なく使ったから、やたらおかしいです。