Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（1/3 ページ） 高度化するWebのデバッグに悩む人、必見！ 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 本稿では、Firefoxのアドオンとして利用するFirebugと、
Firebug - web development evolved Firebugの開発版に「Break On Next」または「Break On」と呼ばれる新機能が追加された。これは既存のデバッグ機能であるブレークをさらに拡張するもので、Webアプリケーション開発を支援する便利な新機能として注目される。Firebug 1.5b1以降で利用できる。 Software is hard - Firebug 1.5: Break On Nextで、「Break On Next」または「Break On」の機能概要が紹介されている。既存のブレーク機能はソースコードの特定のポイントにマークをつけておき、実行がそのポイントに到達したらプログラムの実行を一時停止するというもの。その段階で関連する変数の値を調べたり、ステップバイステップで処理を進めながら、実際にどういった処理が行われているかを調査すること
内容が難しくなる前にFirebugに慣れる！ 第1回から第4回まで、jQueryについての各セレクタやメソッドなどを見てきました。各回で簡単なサンプルも載せていましたが、皆さんここまでの内容については問題なくついてこれていますでしょうか？ まだjQueryの基礎について全てを説明し終えてはいないのですが、そろそろスクリプトも長くなってきて、考えることも難しくなってきています。第3回と第4回の内容を振り返ってみても、少しずつスクリプトの量も増えてきているのがわかると思います。この先も、内容が増えていくにつれて、スクリプトも長く、手順をうまく考えなくてはならなくなってきます。 内容がもっと難しくなっていく前に、一度ここで復習をして、この先に備えておきましょう。 Firebugをもっと使ってみる ここまで、いくつかサンプルなどを紹介してきましたが、まだまだjQueryがいまいち理解できていない人
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
FireBugのCSSパネルにカラーパレットを追加できる「FirePalette」 次のように、CSSペインにカラーパレットを追加し、選択で色を選ぶこともできるようです。 ちょっと色を変えたいときなどに便利かもしれませんね。 FirePalette :: Add-ons for Firefox 関連エントリ ページの読込み時間をチェックできるFirebugアドオン「Hammerhead」 Firebug内でHTML/CSSについて調べられるアドオン「FireScope」 FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」 FireBugで使える役立つ関数テクニック色々 FireBugのJavaScriptをハイライト表示する拡張「Rainbow」
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど
Firefinderとは何か？ https://addons.mozilla.org/en-US/firefox/addon/11905/ CSSセレクタやXPathで要素を検索出来るFirebugの拡張です。 どんな人にお勧めか？ hiddenフィールドの値を閲覧したり、 formのどの要素のnameが何かとかさくっと見たくなることないですか？ あるならお勧めです。 Firebugには既に$$というCSSセレクタで要素を検索出来る関数があるんだが？ CSSセレクタのサポートの度合いが違います。 $$関数では基本的なCSSセレクタしかサポートされていないので、 例えば、ここなら、http://images.google.co.jp/advanced_image_search?hl=ja $$('input'); // [input, input ja, input Google 検索, i
Firediff is a Firebug extension that tracks changes to a pages DOM and CSS. Change Tracking Firediff implements a change monitor that records all of the changes made by firebug and the application itself to CSS and the DOM. This provides insight into the functionality of the application as well as provide a record of the changes that were required to debug and tweak the page’s display. In addition
Webシステム開発を行っているとデバッグメッセージを表示したいと思うことは多々ある。画面にメッセージを出しても良いだろうが、常々使うのであればログファイルなどを利用した方が効率的だ（デザインへの影響もあるので）。 FirebugとPythonをつないでくれる 開発者には見えてユーザには見えない（見ることもできる）、そんな素敵なメッセージプラグインがFirePythonだ。 今回紹介するオープンソース・ソフトウェアはFirePython、Firebugと連携するPythonデバッグライブラリだ。 FirePythonは二つのライブラリが提供される。一つはPython側で利用するライブラリで、もう一つはFirefoxアドオンとして動作するものだ。Python側でメッセージを送信し、それをFirebugが受け取って表示してくれるようになる。 設定画面 PHPでは同様のソフトウェアとしてFireP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
