覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
Backbone debugger for Firebug.
Backbone Eye Understand Backbone application behavior without debugging JavaScript Tweet Follow for updates Application layer debugging Understand Backbone application behavior without wading through JavaScript code. Backbone Eye is production-site friendly and can work off uglified and minified Javascript without needing any source maps. Work with application constructs Backbone Eye presents appl
Chrome Developer Tools - monitorEvents - Brian Grinstead
I have been playing with the Chrome Developer Tools lately. Here is a cool feature I didn't know about. There are many times I have run some code in the console simply to bind to an event and simply log the result. $("body").bind("click mousedown", function(e) { console.log(e); }); There is a built in alternative called monitorEvents. Here is a quick demo on how to use it: Inspect an element (see
第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の要素を配列で返します。
Eventbug (alpha) Released | Software is hard
Published:October 29th, 2009 Comments:28 Comments Category:Eventbug, Firebug, Planet Mozilla We have made a great further progress with John J. Barton on a new extension for Firebug called Eventbug. Big thanks to Olli Pettay (smaug) for fixing #448602 + #506961 and providing new Firefox APIs that allow enumerating event listeners on a web page! Notice that these APIs are available in Firefox 3.7a1
FirePath – Get this Extension for 🦊 Firefox (ja)
With FirePath you can: * Edit XPath expressions, CSS3 selectors and JQuery selectors (Sizzle selector engine) with auto completion for XPath (using TAB or up and down arrows). * Evaluate the expression/selector on any HTML or XML documents. * Display the result of evaluations in a Firebug-like DOM tree. * Highlight the results directly on the document displayed by Firefox (works only with HTML doc
Firecookie – Get this Extension for 🦊 Firefox (ja)
Firecookie has been integrated with Firebug 1.10 (currently beta) so you don't need install Firecookie for this Firebug version. Cookie manager for Firebug. Firebug has to be installed in order to use this extension. Use this extension to create a new cookie, delete existing cookies, see list of cookies for current site, manage cookies permissions and a lot more. Use http://code.google.com/p/fbug/
Eventbug - monjudoh’s diary
Eventbug (alpha) Released | Software is hard JavaScriptで貼付けられたeventを見ることができるFirebugのextension。 現在はFirefox3.6b2以降、Firebug1.5b1以降じゃないと動かない。 http://www.mozilla.com/en-US/firefox/all-beta.html http://getfirebug.com/releases/firebug/1.5X/
サイトのデザインをしっかり確認できるFirefoxのアドオン -Pixel Perfect
Pixel Perfectは、ウェブサイトのデザインをピクセル単位でしっかり確認できるFirefoxのアドオンです。 Pixel Perfect Pixel Perfectは指定した画像をFirefox上に重ねて表示することができ、画像のポジションや不透明度を変更しながら、ウェブサイトのデザインを確認することができます。 画像を重ねて表示させるには、「Add overlay」をクリックして画像を登録します。
JavaScript で簡単にスタックトレースを取るテクニック
Firebug を使うと console.trace(); これだけでスタックトレースを取ることが出来ます。 でも、 XUL の開発とか、人のブラウザで Firebug が入ってない時とかは出来ないので、 そういう時は、 alert(Error().stack); これだけで出来ます。まあ Firefox only ですが。
FireQuery - jQueryを扱う際に便利なFirebug拡張 - - monjudoh’s diary
FireQuery is a Firebug extension for jQuery development jQueryを扱う際に便利なFirebug拡張 現在のバージョンは0.3 結構前に紹介されていたけど、ちゃんと使いこなせてきた感じなので紹介する。 以下、各機能について紹介と解説。 jQueryオブジェクトのconsoleへの表示 jQueryオブジェクトをFirebugのconsoleへの出力 1.2系の場合通常のオブジェクトとして表示されてしまいどの要素を抱えているかぱっと見て把握出来ない、 1.3系の場合は通常の配列と同じように表示される。 jquery12.fn.jquery;// 1.2.6 jquery12('div');// Object length=6 0=div#main 1=div#outer1.outer jquery13.fn.jquery;// 1.3
Javascript Deminifier – Get this Extension for 🦊 Firefox (ja)
The plugin uses the algorithm from jsbeautifier.org to beautify javascript. It will only apply the beautification to content served with the mime types 'application/javascript', 'text/javascript' or 'application/x-javascript'. These content types can be changed by modifying the "extensions.jsdeminifier.contenttypes" preference. The plugin can be enabled and disabled for a tab by clicking on the JS
NetExport | Software is hard
NetExport is a Firebug extension that allows exporting all collected and computed data from the Net panel. The structure of the created file uses HTTP Archive (HAR) format (based on JSON). Manual HAR export is natively supported by Firefox 42+. Implementing automated export by triggering HAR export directly from within the page is supported by an extension HAR Export Trigger. This is the recommend
Firecookie – Get this Extension for 🦊 Firefox (en-US)
Firecookie has been integrated with Firebug 1.10 (currently beta) so you don't need install Firecookie for this Firebug version. Cookie manager for Firebug. Firebug has to be installed in order to use this extension. Use this extension to create a new cookie, delete existing cookies, see list of cookies for current site, manage cookies permissions and a lot more. Use http://code.google.com/p/fbug/
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FireStorage Plus! – Add-ons for Firefox
firebug のコンソールの実行ボタンを xxx.click() といった方式でクリックしたい場合の xxx がわかるでしょうか。…
Getting Started
FireCurl – Get this Extension for 🦊 Firefox (ja)
Word pressのテーマは firephpでハックすれば 良かったのか
