Firebugの意外と知られていない機能紹介（プログラマ向け） - KAYAC Engineers' Blog
羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。 意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
Webのバグを燃やしまくるFirebugと、そのアドオン7選
Webのバグを燃やしまくるFirebugと、そのアドオン7選：ユカイ、ツーカイ、カイハツ環境！（10）（1/3 ページ） 高度化するWebのデバッグに悩む人、必見！ 近年、Google Chrome、Firefox、Safari、Opera、Internet Explorer（以下、IE）がJavaScriptの実行速度の最速の座を争っていますが、それに伴いJavaScriptによるフレームワークやコンポーネントが多数出現し、Webブラウザのユーザビリティは飛躍的に向上してきました。 一方で、開発者／デザイナにとっては複雑化するWebアプリケーションのデバッグが悩みの種となってきています。そんなときにお勧めなのが、Firefox上で動作するアドオン「Firebug」です。これを利用すれば、デバッグがかなり効率的に行えます。 本稿では、Firefoxのアドオンとして利用するFirebugと、
クロスブラウザデバッガNitobiBug登場、Firebugと組み合わせ強化 | エンタープライズ | マイコミジャーナル
WebアプリケーションのデバッグツールとしてはFirebugが有名だ。FireBugを使うことでJavaScriptの実行のみならずCSSやHTMLのデザインも調査できる。もはやWebアプリ開発には欠かせないツールだ。Firebugをベースにして開発されたYSlowもWebサイトのパフォーマンスを分析するツールとして代表的存在といえる。 クロスブラウザデバッグツール NitobiBug FirebugもYSlowもとても便利なツールだが、問題はFirefoxのアドオンとして実装されているということだ。Firefoxのシェアは純増しているとはいえ、Net Applicationsの調査によればIEのシェアは73%をこえている。6%のシェアを突破したSafariの存在も無視できない。そこでデバッグツールとしてクロスブラウザで動作するNitobiBugに注目してみたい。 NitobiBugはNi
tenjin.web: workshop/firebug
Firebugワークショップ HTML CSS ネットワーク コマンドライン / DOM コンソール / エラー / デバッグ tenjin.web (at Lingr) ワークショップ補助のチャットルームに参加してください。 0. Firebugとは / インストール Firebug 使ってみる Firebug拡張をインストールし基本的な動作をみてみましょう。 [Disable]/[Enable]で有効/無効を切り替えられます。(Firebugは、ページ内の多くの情報を監視しているため、通常の閲覧で使用していると、Firefoxがとても遅くなってしまいます。普段はFirebugを[Disable]にして、開発中のサイトのみ[Allowed Sites]に設定して利用するといいでしょう。) また、FirebugをFirefoxから切り離し、別ウィンドウに分離して表示してみましょう。 1.
FirebugのXPath関連関数でエレメントからXPathを作る « ku
AutoPagerize用のXPathをかんたんに作るためのブックマークレット AutoPagerize IDE - bits and bytesみたいに、ブラウザ上でクリックした要素を表すXPathがほしいことがよくある。perlだったらこないだのXML::LibXML::ElementのnodePathでおしまい。 jsだとFirebugが中にそういうのを持ってる。コンソールに出力されたHTML要素の上にマウスを持っていくと、その要素を表すXPathが表示されるやつ。 extensionからだったらFirebugLib経由で呼び出すことができます。 /** * Gets an XPath for an element which describes its hierarchical location. */ this.getElementXPath = function(element
Firebug Lite
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の便利な組み込み関数 - 技術メモ帳
id:brazil さんのブックマークで知ったのだが、 Firebugには、便利な組み込み関数が定義されているようだ。 一通りさわってみたのだが、 $x() で 任意のXPath要素が取得できるのとかに感動した。 そして、やっぱりちゃんとドキュメント読むべきだなぁと思った。 XPathから要素を取得する。 $x("/html/body/h1"); -> 要素の配列が返ってくる。 selector名から要素を取得する。(getElementsByTagName) $$("h1") -> 要素の配列 所要時間測定 console#time, console#timeEnd time ~ timeEnd で囲んだ部分の所要時間を 計測することが出来るみたいで、 以下のような関数にまとめると良さそうだ。 function bench( callback ) { var uniq_id = Date
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firebug Tutorial – Script Tab : Javascript Debugging – Michael Sync