Google Chrome用のFirebugのようなデバッガー

FirebugのようにGoogle Chromeで使用できるものはありますか？

私が欲しい必須機能：

• HTMLソースの検査（要素の選択、削除など）
• CSS値をチェックします（組み込みのソリューションはどういうわけか奇妙です）

ChromeにはFirebugのようなツールがすでに組み込まれています。ページの任意の場所を右クリックして、メニューから[要素を検査]を選択します。Chromeにはデバッグ用のグラフィカルツールがあり（Firebugなど）、JavaScriptをデバッグできます。また、CSSインスペクションを適切に実行し、CSSレンダリングをその場で変更することもできます。

詳細については、https：//developers.google.com/chrome-developer-tools/をご覧ください。

Firebug Liteは、HTML要素、計算されたCSSスタイルなどの検査をサポートしています。純粋なJavaScriptであるため、さまざまなブラウザーで動作します。ソースにスクリプトを含めるか、ブックマークレットをブックマークバーに追加して、シングルクリックで任意のページにスクリプトを含めます。

http://getfirebug.com/lite.html

Firebug / Chrome Inspectorを毎日使用する人物として、いくつかの要点を追加します。

1. 執筆時点では、Google DOMインスペクターしかなく、Firebugのすべての機能を備えているわけではありません

2. InspectorはFirebugの「ライト」バージョンです。インターフェイスはIMOほど優れていません。最近の両方のバージョンでの要素の検査は不格好ですが、Firebugの方が優れています。私は自分がChromeへの愛を見つけようとしている（それはより優れた、より高速なブラウザーエクスペリエンスであるため）が、開発作業については、それでも私にとってはつまらない。

3. Firebugでは、ライブプレビュー/ DOM / CSSの変更がさらに優れています。計算されたCSSとボックスモデルビューはFirebugの方が優れています。

4. どういうわけか、おそらくいくつかの重要な領域でドキュメントのナビゲート、操作、変更が容易なため、Firebugの読み取り/使用がより簡単になっていますか？知るか。私はインターフェースに慣れていますが、これは私が認める主観的なものですが、Chrome Inspectorはそれほど良くないと思います。

5. Cookies / Netタブは、Firebugで非常に役立ちます。たぶんChrome Inspectorはこれを持っていますか？前回チェックしたときはそうではありませんでした。Chromeはユーザーの介入なしにバックグラウンドで自動更新されるためです（デフォルトでは、すべての優れた君主のように同意を得ます）。

6. 最後のポイント：Google Chromeが完全な機能を備えたFirebugを入手できる日は、FirefoxのレイアウトエンジンGeckoをWebKitと同じくらい高速化するのに3年間かかったため、Firefoxが基本的に開発者のために死ぬ日です。とても率直に言って申し訳ありませんが、それは真実です。

ご存知のように、モバイルのアクセシビリティとインタラクティブ性（iPhone、iPad、Android）に動機付けられたjQueryの代わりに、誰もがFlashから離れたいと思っています。そして、Mozillaのファンとして私は悲しくなります。FirefoxがJavaScriptエンジンをアップグレードするまで、Chromeはより優れたブラウザです。

F12

ショートキーが大好き

これを試してください。FirebugLiteと呼ばれ、どうやらChromeのベータ版で動作します。

https://chrome.google.com/extensions/でも見つけることができ ます。

このブックマークレットを「ブックマークバー」に設定すると、Firebug liteをChrome / Chromiumブラウザで常に使用できるようになります（これをURLとして入力します）。

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

または、ユーザースクリプトを試してください：http : //dev.chromium.org/developers/design-documents/user-scripts

jQuerifyは、jQueryをChromeコンソールに埋め込むのに最適な拡張機能であり、想像できるほど簡単です。この拡張機能は、jQueryがすでにページに埋め込まれているかどうかも示します。

この拡張機能は、jQueryを任意のページに埋め込むために使用されます。コンソールシェルでjQueryを使用できます（ChromeコンソールはCtrl+ Shift+ j"で呼び出すことができます）。

選択したタブにjQueryを埋め込むには、拡張ボタンをクリックします。

公式のFirebug Chrome拡張機能、または拡張機能を自分でダウンロードしてパッケージ化できます。

https://getfirebug.com/releases/lite/chrome/

さて、Google ChromeでGreasemonkeyスクリプトを有効にすることは可能ですので、この方法を使用してFirebugをインストールする方法はあるのでしょうか？Firebug Liteも機能しますが、フル機能の:(を使用するのと同じ感覚ではありません。

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

これはあなたの質問の答えにはなりませんが、見逃した場合のために、Chris PederickのWeb開発者がChromeで利用できるようになりました：https : //chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm 。

このブラウザーに依存しないインスペクター、domアップデーターに必要なすべてを忘れてください

https://goggles.webmaker.org/en-US

ブックマークを付けて任意のWebページに移動し、そのブックマークをクリックします。

これは実際にはMozillaプロジェクトのゴーグルです。

F12 （LinuxおよびWindowsのみ）

または

Ctrl ⇧ I

（⌥ ⌘ IMacを使用している場合）

Firebug Lite for Google Chromeをお試しください

UbuntuでChromiumを使用していて、毎晩のPPAを使用している場合は、 chromium-browser-inspector