77

Google によると、これは Chrome で「chrome-devtools://devtools/devtools.html」にアクセスすることで実現できますが、現在は Chrome (または Canary) の安定バージョンでそのページにアクセスすると、99% 削除されたバージョンのインスペクターが表示されます。 .

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

問題を解決するために知る必要はないと思いますが、私はインスペクターを調べているので、ポール・アイリッシュとここで議論されているようにスタイリングできます: https://darcyclarke.me/articles/development/skin-your -chrome-inspector/

4

4 に答える 4

102

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

  1. Command+ Option+ i( Windows ではCtrl+ Shift+ ) を押しiて DevTools を開きます。

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

  3. この新しいウィンドウでCommand+ Option+i をもう一度押します。

  4. これにより、DevTools で DevTools が開きます。

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

質問の範囲を少し超えていますが、 Chrome Developer Tools: Remote Debuggingの仕組みを理解することで、問題が発生している理由を理解するのに有効です。

于 2012-09-05T23:34:11.870 に答える
17
  1. chrome://inspect を開く
  2. そのページでインスペクターを開きます (cmd + alt + i)
  3. ページの一番下までスクロールし、Otherセクションの下にある検査リンクをクリックします。

このセクションの URL は次のOtherようになります: chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…

編集: 彼らは chrome:inspect ページを思いついたので、これを機能させるには、左側の [その他] ヘッダーをクリックする必要があります。

于 2012-11-26T16:24:39.073 に答える
4

私はこれを機能させました。重要なのは、Chrome を「リモート デバッグ」モードで起動する必要があることです。

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

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

Windows では、その

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

(より良い Windows の手順はこちらにあります: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote )

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

その Web サービスにアクセスすると、インスペクターを使用して実行中の chrome ウィンドウを調べることができます。インスペクターを調べたいので、まずインスペクター ウィンドウを起動する必要があります (上記のようにショートカット キーを使用します。Mac の場合は Command+option+i です)。

では、先に進んで次の場所に移動してください

http://localhost:9222

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

下の画像ではわかりにくいですが、左側では、Chrome ウィンドウがリモート デバッガーを指しており、ツールバー ラベルの 1 つが強調表示されています。右側には、Web ページをデバッグしているかのように、ツールチップが表示されています。

インスペクタを検査する

于 2012-11-20T20:25:48.690 に答える
3

数週間前、誰かがスタックオーバーフローの「javscript」チャットルームでこれを指摘しました。まず、非常に重要なことですが、インスペクタがブラウザ ウィンドウから切り離されていることを確認してください。次に、インスペクタ ウィンドウを開いて、そのウィンドウを調べるだけです。WindowsではCtrlShiftI（編集：言っCtrlShiftIたが、コンソールを検査するコンソールが表示される...前後にナビゲートできるはずです）キーボードショートカット用です。(他のオプションと OS の他のキーボード コンボは、こことここにあります。) これを 2 回実行するだけで問題ありません。

編集: わかりました。おそらく、ウィンドウをドッキング解除することについて混乱しているでしょう。これは、ドッキングされている場合にクリックするものです..ここに画像の説明を入力

編集 II: 検査できない理由がよくわかりません。JDavis の回答は、Apple コンピューター用の Google ドキュメントと一致しています。Linux を使用している場合は、Windows と同じように見えます。フォーカスがインスペクター ウィンドウ上にあるときに、インスペクター キーの組み合わせを押す必要がありました。

于 2012-09-05T23:38:52.760 に答える