Wir verwenden etwa Chrome DevTools

  1. Schnelle Bearbeitung von HTML-Elementen
  2. Erweitern Sie alle untergeordneten Elemente
  3. Umzug des Inspektors
  4. DOM-Elementsuche
  5. Paletten
  6. Mehrere Cursor
  7. Codiere das base64-Bild
  8. Pseudo-Class-Switching
  9. Spaltenauswahl
  10. Kopieranforderung für cURL
  11. Bildschirmtastatur
  12. Screenshot der gesamten Seite
  13. Emulation von Touchgeräten
  14. Nützliche Funktionen

Wie der Name schon sagt, ist Chrome DevTools oder Web Inspector ein Tool, das für Webentwickler und damit verbundene Personen entwickelt wurde. Mit dem Webinspektor können Sie Folgendes tun:

  • Überprüfen Sie die Richtigkeit der Anzeige.
  • Verfolgen Sie die Ausführung von Skripten in JavaScript.
  • Netzwerkaktivitäten anzeigen.

Beim Schreiben dieses Artikels habe ich verwendet Kanarienvogel - Version von Chrome, in der neue Funktionen getestet werden, die dann zu einer stabilen Version von Chrome gehören.

Um den Inspektor zu starten, können Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken und "Artikelcode anzeigen" auswählen. Sie können auch einfach Strg + Umschalt + C drücken.

Schnelle Bearbeitung von HTML-Elementen

Beginnen wir mit dem Einfachsten: Bearbeiten von Elementen.

Beginnen wir mit dem Einfachsten: Bearbeiten von Elementen

So prüfen Sie:

  • Wählen Sie die Registerkarte Elemente.
  • Wählen Sie ein beliebiges HTML-Element im Bedienfeld aus.
  • Doppelklicken Sie auf die Variable und ändern Sie beispielsweise den Variablennamen.

Nach Abschluss der Bearbeitung wird das schließende Tag automatisch aktualisiert.

Erweitern Sie alle untergeordneten Elemente

So prüfen Sie:

  • Wechseln Sie zum Bedienfeld Elemente.
  • Wählen Sie ein Element aus und klicken Sie bei gedrückter Alt-Taste auf den Pfeil links neben dem Element.

Umzug des Inspektors

Das Inspektorfenster kann sowohl nach unten als auch nach rechts gedrückt werden. Zum Beispiel ist die Position des Bedienfelds auf der rechten Seite praktisch, wenn Sie mit Breitbildmonitoren arbeiten. Das Inspector Panel kann auch in einem separaten Fenster platziert und beispielsweise auf einen anderen Monitor übertragen werden.

Das Inspector Panel kann auch in einem separaten Fenster platziert und beispielsweise auf einen anderen Monitor übertragen werden

So prüfen Sie:

  • Strg + Umschalt + D - Position umschalten

DOM-Elementsuche

Wahrscheinlich nicht viele, für die dies eine Entdeckung sein wird, aber in der Registerkarte "Elemente" können Sie nach DOM suchen.

Wahrscheinlich nicht viele, für die dies eine Entdeckung sein wird, aber in der Registerkarte Elemente können Sie nach DOM suchen

So prüfen Sie:

  • Drücken Sie Strg + F und geben Sie die vorgeschlagene Suchabfrage ein.

Paletten

Wählen Sie die Farbe aus der Palette

Die Farbauswahl in neueren Chrome-Versionen wurde geändert: Es wurden zwei Paletten hinzugefügt, um die Farbauswahl zu vereinfachen.

Mehrere Cursor

Bewegen Sie den Cursor und klicken Sie bei gedrückter Strg-Taste in den gewünschten Bereich, um einen Cursor hinzuzufügen. Sie können die Aktion mit Strg + U rückgängig machen. Ich persönlich war noch nie nützlich.

Codiere das base64-Bild

So prüfen Sie:

  • Wechseln Sie in das Netzwerkfenster.
  • Bild auswählen
  • Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "".

Pseudo-Class-Switching

Pseudoklassen spiegeln den Zustand der Elemente und ihre relative Position wider.

Pseudoklassen spiegeln den Zustand der Elemente und ihre relative Position wider

So prüfen Sie:

  • Klicken Sie im Bedienfeld Elemente mit der rechten Maustaste auf ein Element und wählen Sie in der Liste Elementstatus erzwingen eine Pseudoklasse aus.
  • Sie können auch eine Pseudoklasse auf der rechten Seite des Bedienfelds Elemente auswählen.

Spaltenauswahl

So prüfen Sie:

  • Gehen Sie zum Bereich "Quellen".
  • Wählen Sie eine beliebige Datei aus.
  • Wählen Sie den Text aus, indem Sie die Alt-Taste gedrückt halten.

Das Auswählen einer Spalte funktioniert auch, wenn HTML im Bedienfeld Elemente bearbeitet wird.

Kopieranforderung für cURL

Jede Anfrage auf der Registerkarte Netzwerk kann kopiert und dann zur Ausführung mit curl in das Terminal eingefügt werden.

Bildschirmtastatur

Wenn das Nexus 5X-Profil ausgewählt ist, können Sie sehen, wie die Site aussieht, wenn die Bildschirmtastatur aktiv ist.

Chrome DevTools: Bildschirmtastatur Chrome DevTools: Bildschirmtastatur

Screenshot der gesamten Seite

Ein Bild von der gesamten Seite zu machen ist sehr einfach. Brauche nur ...

  1. Öffnen Sie den Inspektor.
  2. Gehe zur Konsole.
  3. Drücken Sie Strg + Umschalt + P
  4. Tippe "screenshot" ein
  5. Wählen Sie "Screenshot in voller Größe aufnehmen"
Screenshot der ganzen Seite

Emulation von Touchgeräten

Sie können auch einige Sensoren simulieren:

  • Touchscreen
  • Koordinaten für die Geolokalisierung
  • Beschleunigungsmesser

Wie man es versucht:

  • Wählen Sie das Bedienfeld Elemente.
  • Drücken Sie "Esc" und wählen Sie "Emulation> Sensoren".

Nützliche Funktionen

Schlüssel und Werte

Mit den Tasten- und Wertefunktionen können Sie die Tasten bzw. Werte des Objekts auf der Konsole ausgeben. Mit den Tasten- und Wertefunktionen können Sie die Tasten bzw Schlüssel und Objektwerte getrennt anzeigen