FirefoxのJavaScriptデバッガ拡張Firebugの進化がすごい
Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。 しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で) 現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。 特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います コマンドラインに履歴ボタン コンソールパネルでのコマンドエディタ(でかい方のコマンドライン)にHistoryボタンが新たに追加されました。 過去に実行したコマンドをポップアップから選択して挿入することができます。(以前はCtrl+ZでUndoし続ける必要があった) コマンドライン
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
FirebugのLog Eventsに関して - KAYAC engineers' blog
こないだfirebugをいじってたら面白いものを見つけました。 ちょっと試してみたところ対象の要素に起こっているイベントを全てコンソールタブへ表示させることが出来るようです。 基本的には良くあるイベントが表示されるだけなんですが、IMEをONにした状態でテキスト入力するとちょっと面白いイベントが表示されます。 あまり知られていないイベントなので、これに関しては別に紹介してみたいと思います。
FireBugのCSSパネルにカラーパレットを追加できる「FirePalette」:phpspot開発日誌
FireBugのCSSパネルにカラーパレットを追加できる「FirePalette」 次のように、CSSペインにカラーパレットを追加し、選択で色を選ぶこともできるようです。 ちょっと色を変えたいときなどに便利かもしれませんね。 FirePalette :: Add-ons for Firefox 関連エントリ ページの読込み時間をチェックできるFirebugアドオン「Hammerhead」 Firebug内でHTML/CSSについて調べられるアドオン「FireScope」 FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」 FireBugで使える役立つ関数テクニック色々 FireBugのJavaScriptをハイライト表示する拡張「Rainbow」
FirefinderはJavaScriptプログラマ以外も使うべき - monjudoh’s diary
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
jQueryを使った開発に便利！Firebug + jQuery·FireQuery MOONGIFT
Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど
Extend Plone
Can I put spinning rims on my Plone? Yes, you can! With hundreds of add-ons and an API to meet your needs, Plone can be tricked out with all the shiniest bling. Released Plone add-ons are available at the Python Package Index (PyPI), a software repository for the Python programming language. Volto also comes with its own set of add-ons via the Node Package Manager, which can extend Plone's new mod
Firefox+Firecookie でCookieを監視/操作する | バシャログ。
最近、開発中にCookieの挙動で小一時間デバッグして、Firefoxの拡張機能であるFirecookieを使って解決したことがありました。Firecookieって実は便利だと思ったのでご紹介します。 デバッグの概要 CakePHPを利用して開発していたときにおこった、Cookieによるセッションが継続しない、といったトラブルだったとおもいます。ある条件下でCookieが読み出しできるパスがおかしくなるのが原因だったのですが、その特定にFirecookieが役立ちました。 Firecookieとは何か FirecookieはFirefox+Firebugの環境で利用できる拡張機能です。以下のページからインストールできます。 Firecookie :: Firefox Add-ons Webプログラムを作っていると、Cookieを使ってログイン状態を作ったりします。Cookieはユーザのマシ
【ハウツー】人気のデバッグツールが待望の新版リリース! 「Firebug1.2」を使いこなそう (1) 新版の特徴 - Firefox3正式サポート、パフォーマンスの向上など | エンタープライズ | マイコミジャ��
Firebug1.2登場 - Firefox3正式サポート、パフォーマンス向上など 8月25日(米国時間)、Firebugの最新版である「Firebug 1.2」がリリースされた。 FirebugはFirefoxアドオンのひとつで、Firefox内で閲覧しているHTML、CSS、JavaScriptの内容を分析し、編集やデバッグ、各種モニタリングを実施できる。導入が容易なうえ、強力なデバッグがおこなえることからFirebugを愛用しているWebデベロッパも多いことだろう。 今回のリリースでの変更点はおもに次のとおり。 Firefox 3の正式サポート デフォルトでFirebugのデバッグ機能が無効に。Console/Script/Netのデバッグをおこなう場合は、どの機能を有効にするか選択する サスペンド/レジューム機能 HTML/CSSにおいて外部エディタを指定することができるように e
Firebugクックブック #2 - bits and bytes
前回に引き続き、自分がよくあるブラウザ上での単純作業をFirebugコンソールで片付けている方法の紹介です。前回はブラウザに表示されているデータをこっち側に持ってくる作業をどうやっやるかでした。今回はブラウザの向こう側のデータをFirebugで操作するにはどうするかです。 ボタンをクリックさせる ウェブのサービスを使っていて、今までに投稿したものを全部消したくなったり(でもアカウントは消したくないとか)することがあります。管理画面で投稿を消すことはできるけど、いちいちクリックしていかないといけなくて面倒.... という時にはFirebugでフェイクのクリックイベントを作って送れば、自動でクリックさせることができます。 Twitterのfavoritesを全部外したい、というのを例としてあげます。TwitterのfavoritesはAPIがあるのでAPIを使う手もありますが、サービスによって
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
Firebugについてまとめ - monjudoh’s diary
随時更新 公式ドキュメント Firebug Console API http://getfirebug.com/commandline.html 気になったところ $$(selector) 複雑なCSSセレクタでなければjQueryの$関数の変わりとして使える感じ。 dirxml(node) outerHTML相当のHTMLを出してくれる感じ $$(selector)と組み合わせると便利そう。 inspect(object[, tabName]) 指定したオブジェクトを指定したタブで表示できる。特定要素をHTMLタブで表示させる時、「inspect($$('table#some-id td')[0],'html');」みたいにできる。今まで、「console.log($$('table#tab td')[0]);」を実行してconsoleタブに表示させた後、そこをクリックみたいにやっていた
Firebugクックブック #1 - bits and bytes
最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。 そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの
便利なFirebugエクステンション5選『The Five Best Firebug Extensions』 – creamu
Firebugをよく使っている。 そんなあなたにおすすめなのが、『The Five Best Firebug Extensions』。便利なFirebugエクステンション5選だ。 以下にご紹介。 » YSlow ページのスピード判定をしてくれる » Firecookie 現在サイトにアクセスしているすべてのCookieを見ることができる » FirePHP PHPのデバッグ機能をFirebugと統合 » Pixel Perfect デザイナーのためのアドオン。透明のモックアップをオーバレイ表示してくれる » Rainbox Javascriptを緑に、予約語を青になど、ソースを色分け表示してくれる 便利なFirebugエクステンション、チェックしてぜひ使ってみてはいかがだろうか。 表参道のオープンカフェでブロギング中。とても快適でございます。綺麗な人ばかりが通り過ぎていきます。 最近よくい
第4回 ブレークポイントによるデバッグとFirebugのこれから | gihyo.jp
最終回となる今回は、前回触れられなかったScriptタブでのデバッグ方法、Firebugの拡張である「yslow」の説明、そして最後にFirebugの今後について紹介します。 ブレークポイントの設定方法 FirebugではJavaScriptにブレークポイントを設定することができます。次のコードで試してみましょう（open(this.href);return false" onkeypress="window.open(this.href);return false">ex01.html）。 リスト1 ex01.htmlの抜粋 function Func(){ var num = Math.floor(Math.random()*1); var h1 = document.getElementsByTagName('h1')[0]; if(num<5){ h1.innerHTML =
第3回 Command Line APIとその活用、各タブからのデバッグ方法 | gihyo.jp
さて、前回はConsole APIの解説とそれを利用してのデバッグについて簡単な解説を行いました。 今回は、Firebugに実装されているもう1つのAPIである、Command Line APIや、各タブの機能を利用してのデバッグ方法について解説をしていきたいと思います。 Command Line API Command Line APIはFirebugのConsoleタブから利用することができます。ただし、グローバルですでに利用されている名前については利用できません。例えばPrototypeやjQueryが利用されているページのConsoleでは$()関数はそれらのライブラリのものが実行されます。 利用できるAPIは以下の通りです。 $(id) IDを渡すと、そのID属性のHTML要素を返します。 $$(selector) CSSセレクタを渡すと、該当するHTMLの要素を配列で返します。
第2回 Firebugによるデバッグの基本、Console APIとその活用 | gihyo.jp
さて、前回はインストールからFirebugのタブの基本的な部分について紹介をしてきました。今回は、Firebugに実装されているConsole APIの紹介と、Console APIを利用したデバッグ手法について解説していきます。 Firebugで利用できるAPI Firebugには、デバッグに活用できる2つのAPIが実装されています。今回は、その2つあるAPIのうちConsole APIについて解説していきます。 Console API Console APIはFirebugのタブだけでなく、コンテンツ側のJavaScriptから呼び出すことのできるAPIです。デバッグのために便利な関数があらかじめたくさん用意されています。これらの関数を以下に列挙しますので、目を通してください。 console.log(object[, object, ...]) 渡された全てのオブジェクトをconso
第1回 Firebugの基礎知識と、Firebugを使った開発のメリット | gihyo.jp
はじめに このたび、Firefox 3＋Firebugについての連載を書かせていただきます、堀と申します。普段は仕事でJavaScriptやPHPを用いたフロントエンドの開発を行いながら、個人でRoppongi.JSという、JavaScriptのイベントの企画・主催をしております。 この連載では、Firefox 3のリリースに備えて、現在提供されているFirefox 3のベータ版とFirebugによるJavaScriptの開発手法について解説していきます。 第1回はFirefox 3ベータ版とFirebugのインストールから、Firebugによって、どのようなことが行えるようになるかについて簡単に概略を説明していきます。 Firebugとは FirebugとはHTML、CSS、JavaScriptのための開発ツールを提供するFirefoxアドオンです。このツールによって、あなたのJavaS
AS3を触ってみたくなった（Flex2+rascut+Emacs+Firebug） - にたまごほうれん草アーカイブ
fcwrap を使ったAS3オールドタイプ開発 - Shibuya.es 発表資料 - 川o・-・）＜2nd life 上記の記事内にある、デモを見ていたら、AS3を触ってみたくなったので開発環境を整えてみました。 FirebugとEmacsを使って開発するための環境構築メモです。 ↑ではfcwrapというツールだけど、今はrascutという名前になっているようです。 参考にしたのは以下のサイト。 matzmura blog - Flex 2 SDKでCUI開発をする環境のメモ ActionScript やるなら入れとけ。rascut 導入と使い方。 - てっく煮ブログ AS3 でどこからでも log(); - PBD - subtech EmacsでActionscript (Unknown Quality) 手順としては、 Flex2 SDKとFlex2 Language PackをA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSファイル内のセレクタが使用されているか確認できるFirefoxのアドオン -CSS Usage