Wie überprüfen Sie den Webinspektor in Chrome?

Laut Google kann dies durch Aufrufen von "chrome-devtools: //devtools/devtools.html" in Chrome erreicht werden. Wenn Sie diese Seite jetzt in der stabilen Version von Chrome (oder Canary) besuchen, wird nur eine zu 99% abgespeckte Version des Inspektors angezeigt .

Um meinen "Titel" zu wiederholen, bezieht sich dies auf die "Inspektion" des Inspektors. Nicht nur eine normale Webseite inspizieren.

Und obwohl ich nicht denke, dass es notwendig ist, das Problem zu lösen, inspiziere ich den Inspektor, damit ich es so gestalten kann, wie es von Paul Irish und hier besprochen wurde: https://darcyclarke.me/articles/development/skin-your -chrome-inspector /

Befolgen Sie diese einfachen Schritte!

1. Drücken Sie Command+ Option+ i( Ctrl+ Shift+ iunter Windows) zu öffnen DevTools.

2. Stellen Sie sicher, dass die Entwicklertools in einem neuen Fenster abgedockt sind. Möglicherweise müssen Sie das Menü abdocken:

3. Drücken Sie in diesem neuen Fenster erneutCommand + Option+ .i

4. Dadurch werden die DevTools auf den DevTools geöffnet.

• Sie können die DevTools der Seite erneut ankoppeln, wenn Sie möchten.

1. Wenn dies noch nicht geschehen ist, wählen Sie Elemente aus. Dies ist das erste Symbol oben im Inspektor.

Ein wenig außerhalb des Rahmens Ihrer Frage, aber immer noch gültig, um zu verstehen, warum Ihr Problem auftritt, können Sie anhand der Funktionsweise von Chrome Developer Tools: Remote-Debugging ermitteln .

1. Öffnen Sie chrom: // inspizieren
2. Öffnen Sie den Inspektor auf dieser Seite (cmd + alt + i).
3. Scrollen Sie zum Ende der Seite und Otherklicken Sie unter dem Abschnitt auf den Link Inspizieren

Die URL in diesem OtherAbschnitt sollte ungefähr so ​​aussehen: chrome-devtools: //devtools/devtools.html? Docked = true & dockSide = bottom & toolbarColor = rgba (230,230,230,1…

BEARBEITEN: Sie haben sich die Seite "chrome: inspect" ausgedacht, sodass Sie links auf die Überschrift "Andere" klicken müssen, damit dies jetzt funktioniert.

Ich habe das gerade zum Laufen gebracht. Der Schlüssel ist, dass Sie Chrome im 'Remote Debugging'-Modus starten müssen.

Öffnen Sie unter OSX ein Terminalfenster und führen Sie Folgendes aus:

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

Auf Fenstern ist es

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

(Bessere Windows-Anweisungen finden Sie hier: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote )

Dadurch wird eine Chrome-Instanz gestartet, die Debugging-Nachrichten an einen lokalen Webserver an Port 9222 sendet.

Wenn Sie auf diesen Webdienst zugreifen, können Sie mit dem Inspektor alle laufenden Chrome-Fenster überprüfen. Da wir den Inspektor überprüfen möchten, müssen wir zuerst ein Inspektorfenster starten (wie oben Verwenden Sie die Tastenkombinationen; für Mac ist es Befehl + Option + i.)

Gehen Sie jetzt weiter und navigieren Sie zu

http://localhost:9222

Daraufhin wird eine Liste der Fenster angezeigt, die im Debugger angezeigt werden sollen. Wählen Sie das Fenster aus, das mit "Entwicklertools" beginnt, und Sie können das CSS auf den Inspektor überprüfen.

Im Bild unten ist es schwer zu sehen, aber links zeigt mein Chromfenster auf den Remote-Debugger und hebt eine der Beschriftungen in der Symbolleiste hervor. Rechts sehen Sie, dass es mit dem Tooltip so leuchtet, als würden wir eine Webseite debuggen.

Vor ein paar Wochen hat jemand im "Javscript" -Chatroom von stackoverflow darauf hingewiesen. Stellen Sie zunächst und vor allem sicher, dass der Inspektor in Ihrem Browserfenster nicht angedockt ist . Dann geht es nur noch darum, ein Inspektorfenster zu öffnen und dieses Fenster dann zu inspizieren. In Windows ist es CtrlShiftI(Bearbeiten: Ich sagte, CtrlShiftIaber das bringt die Konsole dazu, die Konsole zu inspizieren ... Sie sollten in der Lage sein, hin und her zu navigieren.) Für die Tastenkombination. (Andere Tastaturkombinationen für andere Optionen und Betriebssysteme hier und hier .) Tun Sie das einfach zweimal und Sie sind gut.

Edit: ok, du bist wahrscheinlich verwirrt, das Fenster abzudocken. Dies ist, was Sie klicken würden, wenn es angedockt ist.

Edit II: Ich bin mir nicht ganz sicher, warum Sie nicht inspizieren können. Die Antwort von JDavis stimmt mit den Google Text & Tabellen für Apple-Computer überein. Wenn Sie Linux verwenden, scheint es dasselbe zu sein wie Windows. Sie sollten die Inspektortastenkombination drücken, während der Fokus über dem Inspektorfenster liegt.