Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. Firebugワーキンググループは13日(米国時間)、Firebugの最新版となる「Firebug 1.10.0」を公開した。Firebugは、Firefoxで動作するWebページ制作やWebアプリケーション開発向けに提供されているデバッグツール。Firefoxで利用可能な開発ツールはいくつか存在するが、代表的なツールのひとつとしてFirebugがよく挙げられる。 Firebug 1.10は、Firefox 13.0から16.0までがサポート対象となっており、Firefoxの下位バージョンでFirebugを利用する場合は、Firebug 1.9を使用する。Firebug 1.9はF
Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。 しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で) 現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。 特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います コマンドラインに履歴ボタン コンソールパネルでのコマンドエディタ(でかい方のコマンドライン)にHistoryボタンが新たに追加されました。 過去に実行したコマンドをポップアップから選択して挿入することができます。(以前はCtrl+ZでUndoし続ける必要があった) コマンドライン
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. 11月29日(米国時間)、Firefox向けの開発ツールFirebugの最新版となるFirebug 1.6.0が公開された。Firebug :: Add-ons for Firefoxからダウンロードできる。対象となるバージョンはFirefox 3.6系。さまざまな新機能が追加されているほか、安定性の向上やメモリリークの修正が実施されており、これまでリリースされたFirebugの中でもっとも優れたリリースだと謳われている。 FirebugはJavaScriptコンソール、JavaScriptデバッギング、HTML/CSSの編集とインスペクション、読み込みタイミングの分析などを実施す
羊毛布団を洗濯機にかけられないことを知りました。ago(@kyo_ago)です。 意外と知られていない機能が多い!?Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
僕はサイト診断するとき、HTMLのソースを見ることから始めるパターンが多いです。 titleタグにキーワードが入っているか、meta descriptionタグはキャッチーであるか、meta keywordsタグはキーワードスタッフィングになっていないか、hタグには何が書かれているか、alt属性は適切に記述されいるかなどの内部要因を調べることが目的です。 ブラウザに付属のHTMLビューツールでソースを見るのですが(FirefoxやChromeは「CTRL」+「U」のショートカットキーで簡単に出せます)、HTMLはプレーンなテキストだけで記述されるのでどこに何があるのか決して見やすいとは言えません。 こんな不便さを解消するツールを見つけたので紹介します。 SenSEOというFirefoxのアドオンです。 実行するとウィンドウの下部にSEOで重要になってくる内部要因の項目を自動的に取得して見や
Firebugでは条件付きブレークポイントが使えるので、 scriptタブにて該当行にブレークポイントを貼り、 条件としてconsoleへの出力を||区切りで、最後に&& falseを入れる。 console.debug('this.lastPosition') || console.dir(this.lastPosition) && false こうするとブレークポイントを通る度にconsoleへの出力は評価され、 consoleに出力され、最後の&& falseのため式全体は必ずfalseとして評価されるため ブレークすることはない。 追記 console出力系関数の戻り値はundefinedなんだから&& falseは不要か 追記 nanto_vi @monjudoh JSでは||より&&の方が優先順位が高いので、a || b && c はaが真ならbもcも評価されずに全体が真として
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. Software is hard - Watching MozAfterPaint in Firebugにおいて、開発中のFirebug 1.6a5に新しくMozAfterPaintイベントを通知する機能が追加されたと紹介されている。Index of /releases/firebug/1.6Xから「firebug-1.6X.0a5.xpi」をインストールするとこの機能を試すことができる。 今回追加された機能はFirefoxで再描画が実施されたイベントを捕捉して表示するというもの。再描画が実施されると、Firebugネットパネルのタイムライン表示に緑の線が引かれる。この緑の線のタイ
Firebug開発者のRob Campbell氏が、『Firebug and the JIT』でFirefox 3.5.xのTraceMonkeyがオフになる問題について触れている。 Firebugのコンソールを有効にし、さらにスクリプトパネルを有効にすると、JavaScriptの処理を高速化するTraceMonkeyがオフになる結果、Firebugをアクティブにしているページ以外でもコンテンツの処理速度が低下してしまうという。 幸い、Firefox 3.6では”Bug 534120 - jit remains disabled when jsd is paused, slowing Firefox when Firebug is installed”が修正され、意図しないJIT無効化の問題が解消される。Campbell氏の説明では、Firefox 3.6+Firebug 1.5の組み合わ
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」 2009年04月20日- Firediff - In Case of Stairs Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。 これは欲しかった!という機能がついにリリースされました。 インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。 まず、インストールすると、次のように、FirebugにChangesタブが表示されます。 で、実際どうやって使えるか?見てみましょう。 (1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。 2009年4月16日を2009年にしてみました。 す
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
FirePHP - Firefox Extension for PHP Development FirePHP allows you to take a deeper look at all the work your PHP code does to generate that page you are currently looking at in your Firefox browser. FireFoxでのPHP開発を手助けする「FirePHP」。 FireFoxのエクステンションとして動作し、FireBugの機能拡張をしてくれます。 インストールするとFireBug内に次のタブが表示されます。 サーバヘッダーで特定の文字列を返すとFireBug内、FirePHPウィンドウにその文字列が表示できます。 特定ヘッダーを出力するために、「FirePHP PEAR Package」が使え
Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか?(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く