web-dev-qa-db-ja.com

ChromeでWebインスペクターをどのように検査しますか？

Googleによれば、これはChromeの "chrome-devtools：//devtools/devtools.html"にアクセスすることで達成できますが、現在はChrome（またはCanary）、インスペクターの99％除去バージョンを表示します。

私の「タイトル」を繰り返しますが、これはインスペクターの「検査」に関連しています。通常のWebページを検査するだけではありません。

そして、問題を解決するために知る必要はないと思いますが、私は検査官を検査し​​ていますので、ポール・アイリッシュとここで議論されているようにスタイルを整えることができます： http://darcyclarke.me/design/skin -your-chrome-inspector /

google-chromegoogle-chrome-devtools
65
cchiera

これらの簡単な手順に従ってください！

  1. 押す Command+Option+i （Ctrl+Shift+i Windowsで）DevToolsを開きます。

  2. 開発者ツールが新しいウィンドウにドッキング解除されていることを確認してください。メニューからドッキング解除する必要がある場合があります。 Undock from menu

  3. 押す Command+Option+i againこの新しいウィンドウ。

  4. これにより、DevToolsでDevToolsが開きます。
    • 必要に応じて、ページのDevToolsを再ドッキングできます。
  5. まだない場合は、Elementsを選択します—これはインスペクターの上部にある最初のアイコンです。

質問の範囲を少し超えていますが、問題が発生している理由を理解するのに有効です Chrome開発者ツール：リモートデバッグ の仕組みを理解することで見つけることができます。

79
JDavis
  1. Chrome：// inspectを開きます
  2. そのページでインスペクターを開きます（cmd + alt + i）
  3. ページの一番下までスクロールし、Otherセクションの下にある検査リンクをクリックします

OtherセクションのURLは次のようになります。chrome-devtools：//devtools/devtools.html？docked = true＆dockSide = bottom＆toolbarColor = rgba（230,230,230,1…

編集：彼らはchrome：inspectページを空想したので、これを今すぐ機能させるには左側の「その他」ヘッダーをクリックする必要があります。

14
Helder Roem

これが機能するようになりました。重要なのは、「リモートデバッグ」モードでchromeを起動する必要があることです。

oSXでは、ターミナルウィンドウを開き、次を実行します。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windowsでは、その

chrome.exe --remote-debugging-port=9222

（より良いウィンドウの手順はこちらにあります： https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote ）

これにより、chromeのインスタンスが起動し、ポート9222でローカルWebサーバーにデバッグメッセージが送信されます。

そのWebサービスにアクセスすると、インスペクターを使用して、実行中のchromeウィンドウを検査できます。インスペクターを検査するため、インスペクターウィンドウを開始する必要があります。最初（上記のようにショートカットキーを使用します。Macの場合はCommand + option + iです。）

さあ、先に進んで

http://localhost:9222

デバッガーに表示するウィンドウのリストが表示されます。 「開発ツール」で始まるウィンドウを選択すると、インスペクターのcssを検査できます。

下の画像では見づらいですが、左側にchromeウィンドウがあり、ツールバーのラベルの1つを強調表示して、リモートデバッガーを指し示しています。右側に、ウェブページをデバッグしているようなツールチップ。

Inspect the inspector

4
Mixologic

数週間前、誰かがstackoverflowの「javscript」チャットルームでこれを指摘しました。まず、非常に重要なこととして、インスペクタがブラウザウィンドウからドッキング解除されていることを確認します。次に、インスペクターウィンドウを開いて、そのウィンドウを検査するだけです。 Windowsでは CtrlShiftI （編集：私は言った、 CtrlShiftI しかし、それはコンソールを起動します検査コンソール...キーボードショートカットのために前後にナビゲートできるはずです。 （他のオプションとOS用の他のキーボードコンボ here および here 。）それを2回行うだけで良いです。

編集：わかりました、おそらくウィンドウのドッキング解除に関して混乱しているでしょう。これは、ドッキングされている場合にクリックするものです。enter image description here

編集II：なぜ検査できないのかよくわかりません。 JDavisの答えは、GoogleドキュメントのAppleコンピュータ。Linuxを使用している場合はWindowsと同じように見えます。フォーカスがインスペクターウィンドウ。

3
JayC