web-dev-qa-db-ja.com

Google Chrome用のFirebug風のデバガ

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

必要な機能

  • HTMLソースを調べる（要素の選択、削除など）
  • cSSの値を確認する
htmlcssgoogle-chromedebuggingfirebug
278
Sebastian Hoitz

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

詳細については、 https://developers.google.com/chrome-developer-tools/ を参照してください。

243
Dmitry Torba

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

http://getfirebug.com/lite.html

37
gregers

毎日Firebug / Chrome Inspector を使用している人として、いくつかの話題を追加するだけです。

  1. これを書いている時点では、Google DOMインスペクターしかいませんし、Firebugのすべての機能を持っているわけでもありません。

  2. InspectorはFirebugの「ライト」バージョンです。インターフェースはそれほど良いIMOではありません。最近の両方のバージョンでの要素検査は現在不格好ですが、Firebugはまだ優れています。私は自分自身がChromeへの愛を見つけようとしていることに気付きましたが（それはより良い、より速いブラウザ体験だからです）、しかし開発作業のためには、それはまだ私を悩ますだけです。

  3. Firebugでは、DOM/CSSのライブプレビュー/変更は依然として優れています。計算CSSとボックスモデルビューはFirebugのほうが優れています。

  4. どういうわけかFirebugを読んだり使ったりするのがもっと簡単なのは、たぶんいくつかの重要な分野で文書をナビゲートしたり、操作したり、変更したりするのが簡単なためでしょうか。知るか。私はこのインターフェースに慣れていて、Chrome Inspectorはそれほど良くないと思いますが、これは私が認める主観的なものです。

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

  6. 最後のポイント：Google Chromeがフル装備のFirebugを手に入れた日は、FirefoxがFirefoxのレイアウトエンジン Gecko を 3年にするまでに3年の歳月をかけたため）WebKit と彼らはしませんでした。それを率直に言って申し訳ありませんが、それは真実です。

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

15
negutron

F12

ショートキーが大好き

14
Angel.King.47

これを試してください、それは Firebug Lite と呼ばれ、明らかにChromeのベータ版で動作します。

また、それを見つけることができます： https://chrome.google.com/extensions/

12
Teekin

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);
9
Manuel

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

この拡張機能は、あなたが望む任意のページにjQueryを埋め込むために使用されます。コンソールシェルでjQueryを使用することができます（Chromeコンソールは次の方法で起動できます。 Ctrl + Shift + j"）.

選択したタブにjQueryを埋め込むには、拡張ボタンをクリックしてください。

4
Andrey

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

4
kenorb

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

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

4
joshatjben

グーグルクロームのために Greasemonkey スクリプトを有効にすることは可能です。 Firebug Lite でも動作しますが、フル機能のものを使用するのと同じ感覚ではありません:(

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

3
Will

F12 （LinuxおよびWindowsのみ）

または

Ctrl⇧I

（⌥⌘I Macを使っているなら）

3
siannone

このブラウザから独立したインスペクタ、dom updaterを必要とするすべてのものを忘れてください

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

ブックマークして任意のWebページに移動し、そのブックマークをクリックしてください。

これは実際にはMozillaプロジェクトのゴーグル、すごいすごいすごい...

3
Vishal Sharma

これはあなたの質問には答えませんが、あなたがそれを見逃した場合には、Chris Pederickの Web Developer がChromeで利用可能になりました。 https://chrome.google.com/extensions/detail/） bfbameneiokkgbdmiekhjnmfkcnldhhm 。

3
Sam Dutton

お試しください Google Chrome用Firebug Lite

2
Rais Hussain

Ubuntuで毎晩のppaを使用してChromiumを使用している場合は、chromium-browser-inspectorが必要です。

1
Rory