Praktische Funktionen der Chrome Developer Console, die Sie vielleicht noch nicht kennen. Google Chrome Developer Console: Zehn nicht offensichtliche Nützlichkeiten

Google Chrome,

HTML,

JavaScript,

Webseitenentwicklung

Übersetzung

So verwenden Sie die Entwicklerkonsole zum Einschalten Google Chrome im Gleichnis Texteditor? Welche Bedeutung hat das Icon, das vielen aus jQuery bekannt ist? $ ? Wie kann ich eine Reihe von Werten in der Konsole anzeigen, formatiert als ziemlich anständige Tabelle? Wenn Ihnen die Antworten auf diese Fragen nicht sofort in den Sinn kommen, dann ist der Tab Konsole der Chrome-Entwicklertools hat sich Ihnen noch nicht in seiner ganzen Pracht offenbart.

Auf den ersten Blick haben wir eine ganz gewöhnliche JavaScript-Konsole vor uns, die nur zur Anzeige von Server-Antwortprotokollen oder Variablenwerten geeignet ist. So habe ich es übrigens auch verwendet, als ich mit dem Programmieren angefangen habe. Mit der Zeit sammelte ich jedoch Erfahrungen, lernte etwas mehr und entdeckte unerwartet, dass die Chrome-Konsole viele Dinge kann, von denen ich keine Ahnung hatte. Darüber möchte ich heute sprechen. Ja, wenn Sie gerade nicht auf einem Mobiltelefon lesen, können Sie das alles gleich ausprobieren.

1. DOM-Elemente auswählen

Wenn Sie mit jQuery vertraut sind, ist es nicht meine Aufgabe, Ihnen die Bedeutung von Konstrukten wie zu erklären $('.class') Und $('id'). Für diejenigen, die es nicht wissen: Sie ermöglichen die Auswahl von DOM-Elementen durch Angabe der ihnen zugewiesenen Klassen und Bezeichner. Die Entwicklerkonsole verfügt über ähnliche Funktionen. Hier hat „$“ jedoch nichts mit jQuery zu tun, obwohl es im Wesentlichen dasselbe tut. Dies ist ein Alias für die Funktion document.querySelector().

Befehle des Formulars $('tagName'), $('.class'), $('#id') Und $(‘.class #id’) Gibt das erste DOM-Element zurück, das mit dem Selektor übereinstimmt. Wenn außerdem jQuery im Dokument verfügbar ist, wird sein „$“ durch diese Konsolenfunktionalität überschrieben.

Hier gibt es noch ein weiteres Design: $$ . Seine Verwendung sieht aus wie $$('tagName') oder $$('.class'). Damit können Sie alle DOM-Elemente auswählen, die einem Selektor entsprechen, und sie in einem Array platzieren. Die Arbeit damit unterscheidet sich nicht von anderen Arrays. Um ein bestimmtes Element auszuwählen, können Sie über den Index darauf zugreifen.

Zum Beispiel der Befehl $$(‘.className’) liefert uns ein Array aller Seitenelemente mit dem beim Aufruf angegebenen Klassennamen. Mannschaften $$(‘.className’) Und $$(‘.className’) gewährt Zugriff auf das erste bzw. zweite Element des resultierenden Arrays.

Experimentieren mit Befehlen $ Und $$

2. Verwandeln Sie den Browser in einen Texteditor

Haben Sie schon einmal darüber nachgedacht, dass es schön wäre, den Text der Webseite, die Sie debuggen, direkt im Browser zu bearbeiten? Wenn ja, dann wird Ihnen der unten gezeigte Befehl gefallen.

Document.body.contentEditable=true
Nach der Ausführung in der Konsole kann das im Browser geöffnete Dokument bearbeitet werden, ohne dass im HTML-Code nach dem gewünschten Fragment gesucht werden muss.

3. An ein Element gebundene Event-Handler finden

Während des Debuggens müssen Sie möglicherweise Ereignishandler finden, die an Elemente gebunden sind. Das geht ganz einfach über die Konsole. Alles was Sie tun müssen, ist diesen Befehl zu verwenden:

GetEventListeners($('selector'))
Als Ergebnis seiner Ausführung wird ein Array von Objekten erzeugt, das eine Liste von Ereignissen enthält, auf die das Element reagieren kann.

Ereignishandler

Um einen Handler für ein bestimmtes Ereignis zu finden, können Sie die folgende Konstruktion verwenden:

GetEventListeners($('selector')).eventName.listener
Dieser Befehl gibt den Funktionscode des Event-Handlers aus. Hier Veranstaltungsname ist ein Array, das alle Ereignisse eines bestimmten Typs enthält. In der Praxis könnte es beispielsweise so aussehen:

GetEventListeners($(‘#firstName’)).click.listener
Als Ergebnis erhalten wir den Code der Funktion, die dem Ereignis zugeordnet ist klicken Element mit ID Vorname.

4. Ereignisüberwachung

Wenn Sie das Auftreten von Ereignissen beobachten möchten, die an ein bestimmtes DOM-Element gebunden sind, kann die Konsole dabei helfen. Hier sind einige Befehle, mit denen Sie Ereignisse überwachen können.

Team monitorEvents($(‘selector’)) ermöglicht es Ihnen, die Überwachung aller Ereignisse zu organisieren, die mit dem Element verknüpft sind, dem der Selektor entspricht. Beim Eintreten eines Ereignisses erfolgt ein Eintrag in der Konsole. Zum Beispiel der Befehl monitorEvents($(‘#firstName’)) ermöglicht es Ihnen, alle Ereignisse zu protokollieren, die mit einem Element verknüpft sind, dessen Bezeichner ist Vorname.
Team monitorEvents($('selector'),'eventName')ähnelt dem vorherigen, ist jedoch auf ein bestimmtes Ereignis ausgerichtet. Hier wird neben dem Elementselektor auch der Ereignisname an die Funktion übergeben. Mit diesem Befehl können Sie Daten über das Auftreten eines Ereignisses auf der Konsole anzeigen. Zum Beispiel der Befehl monitorEvents($(‘#firstName’),’click’) zeigt nur Informationen zum Ereignis an klicken Element mit ID Vorname.
Team monitorEvents($('selector'),['eventName1','eventName3",….]) ermöglicht die Überwachung mehrerer ausgewählter Ereignisse. Hierbei wird der Funktion ein String-Array übergeben, das die Namen der Ereignisse enthält. Zum Beispiel dieser Befehl: monitorEvents($(‘#firstName’),[‘click’,’focus’]) gibt Ereignisinformationen an die Konsole aus klicken Und Fokus für Element mit ID Vorname.
Team unmonitorEvents($('selector')) ermöglicht Ihnen, die Überwachung und Protokollierung von Ereignissen in der Konsole zu stoppen.

5. Messung der Ausführungszeit eines Codefragments

IN Chrome-Konsole Ansichtsfunktion verfügbar console.time('labelName'), das eine Bezeichnung als Argument akzeptiert und einen Timer startet. Noch eine Funktion console.timeEnd('labelName'), stoppt den Timer, dem das ihm übergebene Label zugewiesen ist. Hier ist ein Beispiel für die Verwendung dieser Funktionen:

Console.time("myTime"); //Startet einen Timer mit der Bezeichnung myTime console.timeEnd("myTime"); //Stoppt den Timer mit der Bezeichnung myTime //Ausgabe: myTime:123.00 ms
Mit dem obigen Beispiel können Sie die Zeit zwischen dem Starten und Stoppen eines Timers ermitteln. Sie können dasselbe in einem JavaScript-Programm tun und die Ausführungszeit eines Codeabschnitts ermitteln.

Nehmen wir an, ich muss die Dauer einer Schleife herausfinden. Sie können es so machen:

Console.time("myTime"); // Startet einen Timer mit der Bezeichnung myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Anzeige der Werte von Variablen in Form von Tabellen

Nehmen wir an, wir haben ein Array von Objekten wie dieses:

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]
Wenn Sie es in der Konsole anzeigen, erhalten Sie eine hierarchische Struktur in Form eines Arrays von Objekten. Dies ist eine nützliche Funktion; Zweige der Struktur können erweitert werden, indem der Inhalt von Objekten angezeigt wird. Allerdings ist es bei diesem Ansatz schwierig, beispielsweise den Zusammenhang zwischen den Eigenschaften ähnlicher Elemente zu verstehen. Um die Arbeit mit solchen Daten zu vereinfachen, können sie in Tabellenform umgewandelt werden. Verwenden Sie dazu den folgenden Befehl:

Console.table(Variablenname)
Es ermöglicht Ihnen, eine Variable und alle ihre Eigenschaften in Form einer Tabelle anzuzeigen. So sieht es aus.

Ein Array von Objekten als Tabelle anzeigen

7. Sehen Sie sich den Elementcode an

Mit den folgenden Befehlen können Sie von der Konsole aus schnell auf den Elementcode zugreifen:

Team inspect($('selector')) ermöglicht es Ihnen, den Code des Elements zu öffnen, das dem Selektor im Panel entspricht Elemente Werkzeuge Google-Entwickler Chrom. Zum Beispiel der Befehl inspect($(‘#firstName’)) ermöglicht es Ihnen, den Code eines Elements mit einer Kennung anzuzeigen Vorname. Team inspect($$(‘a’))öffnet den Code für den vierten Link, der im DOM vorhanden ist.
Befehle des Formulars $0 , $1 , $2 Ermöglicht Ihnen die schnelle Navigation zu kürzlich angezeigten Elementen. Zum Beispiel, $0 öffnet den Code des zuletzt angezeigten Elements usw.

8. Anzeigen einer Liste der Elementeigenschaften

Wenn Sie die Liste der Eigenschaften eines Elements anzeigen müssen, hilft Ihnen die Konsole auch dabei. Hier kommt folgender Befehl zum Einsatz:

Dir($('selector'))
Es gibt ein Objekt zurück, das Eigenschaften enthält, die mit dem angegebenen DOM-Element verknüpft sind. Wie in anderen ähnlichen Fällen kann der Inhalt dieses Objekts durch Betrachtung seiner Baumstruktur untersucht werden.

9. Aufruf des zuletzt erhaltenen Ergebnisses

Wie wohl jeder weiß, kann die Konsole als Taschenrechner genutzt werden. Aber nur wenige wissen, dass es über integrierte Tools verfügt, mit denen Sie die Ergebnisse früherer Berechnungen in Befehlen verwenden können. Von Entwurf $_ Sie können das Ergebnis des vorherigen Ausdrucks aus dem Speicher abrufen. So sieht es aus:

2+3+4 9 //- Das Ergebnis der Summierung ist 9 $_ 9 // Das zuletzt erhaltene Ergebnis wird angezeigt $_ * $_ 81 // Da das letzte Ergebnis 9 ist, erhalten wir 81 Math.sqrt($ _) 9 // Quadratwurzel aus dem letzten Ergebnis, das 81 war. $_ 9 // Wir erhalten wieder 9 – das Ergebnis der vorherigen Berechnung

10. Konsole und Speicher reinigen

Wenn Sie die Konsole und den Speicher löschen müssen, verwenden Sie diesen einfachen Befehl:

Klar()
Nach dem Drücken der Eingabetaste ist die saubere Konsole für neue Experimente bereit.
Das ist alles.

11, 12, 13, 14…

Ehrlich gesagt ist das noch nicht alles. Ich habe nur einige der nicht offensichtlichen Möglichkeiten aufgezeigt Google-Konsole Chrom. Tatsächlich sind sie es

Jeder Browser hat seinen eigenen Entwicklertool ist das, was viele einfach als „Konsole“ bezeichnen Chrome-Browser. Es sieht aus wie das:

Tatsächlich ist die Konsole im Chrome-Browser ein Tool, mit dem Sie nicht nur den Inhalt der vom Browser angezeigten Seite sowie vorhandene Fehler anzeigen können (was Tester am häufigsten tun), sondern diese Fehler auch erheblich beheben können einfacher und schneller (was am häufigsten von Entwicklern durchgeführt wird), verschiedene Indikatoren messen und die Seite manipulieren.

So öffnen Sie die Konsole im Chrome-Browser:

- F12-Taste;

— durch gleichzeitiges Drücken der Tasten Strg + Umschalt + I;

— RMB auf einem Seitenelement –> Code anzeigen;

- Browsermenü -> Zusätzliche Tools -> Entwicklertools.

Es kann sich unten auf der Seite oder an der Seite befinden oder in einem separaten Fenster gelöst werden. Schauen wir uns also jede Registerkarte der geöffneten Konsole einzeln an.

Insgesamt verfügt es über 8 Registerkarten, auf denen jeweils bestimmte Daten angezeigt werden:

1 – Elemente(enthält den gesamten HTML-/CSS-Code der Seite und ermöglicht es Ihnen, Elemente für die Recherche auszuwählen und zu bearbeiten)

2 – Konsole(zeigt das Vorhandensein/Fehlen von Fehlern/Warnungen im Code an)

3 – Quellen(ermöglicht die Durchführung von Operationen am Seitencode)

4 – Netzwerk(verfolgt die Ausführungszeit bestimmter Anfragen und die Anfragen selbst)

5 – Zeitleiste(misst die Ladezeit der Seite)

6 – Profile(ermöglicht die Erstellung von JavaScript- und CPU-Profilen)

7 – Ressourcen ( ermöglicht es Ihnen, bestimmte gespeicherte Daten anzuzeigen)

8 – Audits(überprüft bestimmte Parameter)

Lassen Sie uns nun jeden einzelnen davon einzeln und detaillierter durchgehen:

Panel Elemente

Das Bedienfeld „Elemente“ zeigt das Seitenlayout genau so an, wie es im Browser gerendert würde. Sie können den Inhalt der Site visuell ändern, indem Sie den HTML-/CSS-Code im Elementbereich ändern. Wie Sie wahrscheinlich bemerkt haben (oder vielleicht auch nicht), zeigt das linke Fenster ein HTML-Dokument und das rechte Fenster CSS an. Durch einfache Manipulationen mit Daten können Sie den Inhalt und das Design der geöffneten Seite ändern. Sie können beispielsweise den Text im Fenster ändern, wenn Sie ihn im HTML-Text bearbeiten, und auch die Schriftart der Seite ändern, indem Sie ihren Wert im CSS-Feld ändern. Dies speichert jedoch nicht die eingegebenen Daten, sondern hilft lediglich dabei, die vorgenommenen Änderungen visuell zu bewerten. Darüber hinaus können Sie den Code eines bestimmten Seitenelements anzeigen. Klicken Sie dazu mit der rechten Maustaste darauf und wählen Sie den Befehl „Code anzeigen“.

Das Elements-Bedienfeld hat eine sehr coole Funktion. Sie können sehen, wie es aussehen würde Seite öffnen auf einem Gerät mit einer anderen Bildschirmerweiterung. Durch Klicken auf das Telefonsymbol links neben der Registerkarte „Elemente“ wird ein Fenster aufgerufen, in dem Sie die Größe des vorgesehenen Bildschirms ändern und so ein bestimmtes Gerät emulieren und die Anzeige der Seite darauf steuern können. Es sieht aus wie das:

Wenn Sie auf die Schaltfläche „Modell auswählen“ klicken, wird ein Dropdown-Menü mit einer riesigen Auswahl an Geräten angezeigt. Wählen Sie, was Sie brauchen – und voilà! Die Seite wird so angezeigt, als wäre es ein Gerät. Auf diese Weise kann das Elementebedienfeld nicht nur zum Anzeigen oder Bearbeiten einer Seite, sondern auch zum Emulieren von Anzeigegeräten verwendet werden. Alles ist einheitlich und in Chrome verfügbar!

Panel Konsole

Die beliebteste Registerkarte für Tester, da wir hier beim Ausführen des Skripts im Code gefundene Fehler sehen. In diesem Bereich werden auch verschiedene Arten von Warnungen und Empfehlungen angezeigt (wie im Bild oben). Alle im Tab angezeigten Nachrichten können gefiltert werden. Der Fehler zeigt auch seinen Speicherort an und wenn Sie darauf klicken, gelangen Sie zur Registerkarte „Quellen“, wo der Fehler im allgemeinen Design der Seite angezeigt wird.

Sie können den Inhalt des Registerkartenfelds „Konsole“ löschen (falls Sie Meldungen zu früheren Fehlern löschen müssen), indem Sie auf das durchgestrichene Kreissymbol klicken. Sie können Meldungen in der Konsole nach Typ filtern – Fehler, Warnungen, Informationen, Standardausgabe, Debugger-Meldungen, behoben –, indem Sie eine der verfügbaren Konsolenoptionen auswählen.

Panel Quellen

In der Regel ist diese Registerkarte der Ort, an dem Programmierer Code debuggen. Es hat 3 Fenster (von links nach rechts):

Zone Quelldaten. Es enthält alle mit der Seite verbundenen Dateien, einschließlich JS/CSS.
Textbereich. Es enthält den Text der Dateien.
Informations- und Kontrollzone.

Im Quelldateibereich wird das gewünschte Element ausgewählt, im Textbereich wird es direkt debuggt und im Informations- und Kontrollbereich können Sie den debuggten Code starten/stoppen.

Panel Netzwerk

Die Hauptfunktion dieser Registerkarte besteht darin, ein Netzwerkprotokoll aufzuzeichnen. Es bietet Echtzeit-Einblick in die angeforderten und geladenen Ressourcen. Sie können erkennen, welche Ressourcen mehr Zeit zum Laden und Verarbeiten benötigen, sodass Sie anschließend wissen, wo und auf welche Weise die Seite optimiert werden kann.

Es ist auch erwähnenswert, dass Sie auf dieser Registerkarte im Modus „Große Anforderungszeilen“ die an den Server gesendeten Anforderungen sowie die von ihm kommenden Antworten, deren Inhalt und Eigenschaften anzeigen können.

Leistungspanel

Diese Registerkarte wird bei Bedarf verwendet vollständige Rezension Zeitaufwand. Wofür wurde es ausgegeben, wie viel davon wurde für diesen oder jenen Prozess benötigt. Hier werden absolut alle Aktivitäten angezeigt, einschließlich des Ladens von Ressourcen und der Ausführung von Javascript.

Dieses Panel ermöglicht es, die Ausführungszeit und Speichernutzung einer Webanwendung oder Seite zu profilieren und so zu verstehen, wo genau viele Ressourcen ausgegeben werden und wie der Code optimiert werden kann.

CPUProfiler gibt Auskunft über die Zeit, die für die Ausführung von Javascript aufgewendet wurde.

Heap-Profiler Zeigt die Speicherzuordnung an.

JavaScript-Profil Details, wo genau die Zeit beim Ausführen von Skripten aufgewendet wurde.

Entwickelt, um belastete Elemente zu untersuchen. Ermöglicht die Interaktion mit HTML5-Datenbank, lokalem Speicher, Cookies, AppCache usw. Auf dieser Registerkarte können Sie Cookies löschen, indem Sie diese Registerkarte öffnen und auf das Symbol mit dem durchgestrichenen Kreis klicken

Panel Audits

Dieses Panel fungiert während des Ladens als Seitenanalysator. Als Ergebnis des Audits scheinen Empfehlungen zur Optimierung des Seitenladens und zur Erhöhung der Reaktionsgeschwindigkeit zu vorliegen. Beispiele für Optimierungsmethoden finden Sie im Fenster unten.

Sicherheitspanel

Das Sicherheitspanel zeigt Informationen zu jeder Anfrage an und hebt diejenigen hervor, aufgrund derer die Site nicht das begehrte grüne Symbol im Status erhält.

Darüber hinaus können Sie folgende Informationen erhalten:

über die Überprüfung des Zertifikats, ob die Site ihre Authentizität mit einem TLS-Zertifikat bestätigt hat;
TLS-Verbindung, die angibt, ob Ihre Site moderne sichere Protokolle verwendet;
Sicherheit geladener Sekundärquellen.

Tatsächlich sind die Entwicklertools (Konsole im Chrome-Browser) eine sehr nützliche Sache, die für uns Tester oft nützlich sein kann. Noch mehr nützliche Informationen auf der Website https://developers.google.com/web/tools/chrome-devtools/

Befehls-API Chromsaiten DevTools enthält zahlreiche praktische Funktionen zum Ausführen einfacher Aufgaben: Auswählen und Überprüfen von DOM-Elementen, Anzeigen von Daten in einem lesbaren Format, Ausführen und Validieren eines Profilers sowie Überwachen von DOM-Ereignissen.

Notiz: Diese API ist nur innerhalb der Konsole verfügbar. Zugriff bekommen auf Befehlszeile API von Skripten auf der Seite ist nicht möglich.

$_

$_ gibt den Wert des zuletzt ausgeführten Ausdrucks zurück.

Das folgende Beispiel ergibt den einfachen Ausdruck (2 + 2). Dann wird $_ ausgeführt und derselbe Wert zugewiesen:

In diesem Beispiel enthielt der ausgeführte Ausdruck ein Array von Namen. Die Ausführung von $_.length gibt die Länge des Arrays an, und der Ausdruck $_ selbst nimmt den Wert des zuletzt ausgeführten Ausdrucks an, nämlich 4:

$0 – $4

Die Befehle $0, $1, $2, $3 und $4 fungieren als Verweise auf die letzten 5 DOM-Elemente, die im Bedienfeld „Elemente“ angezeigt wurden, oder auf die letzten 5 JS-Objekte aus dem Heap, die im Bedienfeld „Profile“ ausgewählt wurden. $0 gibt das zuletzt ausgewählte Element oder Objekt zurück, $1 gibt das davor ausgewählte zurück und so weiter.

Im folgenden Beispiel ist im Bedienfeld „Elemente“ ein Element der Klasse „Medium“ ausgewählt. In der Konsole nahm $0 den gleichen Wert an:

Im Bild unten ist ein anderes Element auf derselben Seite ausgewählt. $0 bezieht sich nun auf dieses Element und $1 auf das vorherige:

$(Selektor)

$(selector) gibt einen Verweis auf das erste DOM-Element mit dem angegebenen CSS-Selektor zurück. Diese Funktion ist eine Abkürzung für die Funktion document.querySelector().

Klicken Sie mit der rechten Maustaste auf das Ergebnis und wählen Sie „Im Elementbereich anzeigen“, um im DOM nach dem Element zu suchen, oder „Zur Ansicht hineinscrollen“, um es auf der Seite anzuzeigen.

Notiz: Wenn Sie Bibliotheken wie jQuery verwenden, die das $-Symbol verwenden, wird die Funktionalität dieser Bibliothek genutzt.

$$(Selektor)

$$(selector) gibt ein Array von Elementen zurück, die den angegebenen Selektor enthalten. Dieser Befehl entspricht dem Aufruf von document.querySelectorAll() .

Das folgende Beispiel verwendet $$(), um ein Array aller Elemente zu erstellen im Dokument und gibt die src-Eigenschaft jedes Elements zurück:

Var images = $$("img"); for (jeweils in Bildern) ( console.log(images.src); )

Notiz: Drücken Sie in der Konsole Umschalt + Eingabetaste, um dorthin zu gelangen Neue Zeile ohne das Skript auszuführen.

$x(Pfad)

$x(path) gibt ein Array von Elementen zurück, die dem angegebenen XPath-Ausdruck entsprechen.

Dieses Beispiel gibt alle Elemente zurück

$x("//p")

Und dieses hier vereint alle Elemente

Enthaltendes Element :

$x("//p[a]")

Notiz: Profiler können gleichzeitig ausgeführt werden und müssen nicht in der Reihenfolge geschlossen werden, in der sie erstellt wurden.

Tabelle(Daten, )

Objektdaten im Tabellenformat ausgeben. Um beispielsweise eine Namensliste anzuzeigen, müssen Sie Folgendes tun:

Var-Namen = ( 0: ( Vorname: „John“, Nachname: „Smith“), 1: ( Vorname: „Jane“, Nachname: „Doe“ ) ); Tabelle(Namen);

undebug(Funktion)

undebug(function) stoppt das Debuggen der angegebenen Funktion.

Undebug(getData);

unmonitor(Funktion)

unmonitor(function) stoppt die Überwachung der angegebenen Funktion.

Unmonitor(getData);

unmonitorEvents(object, )

unmonitorEvents(object, ) stoppt die Überwachung des angegebenen Objekts und der angegebenen Ereignisse:

UnmonitorEvents(window);

Sie können die Überwachung einzelner Ereignisse auch beenden:

MonitorEvents($0, "mouse"); unmonitorEvents($0, "mousemove");

Werte(Objekt)

Werte(Objekt) gibt ein Array zurück, das die Werte aller Eigenschaften des angegebenen Objekts enthält.

Hallo liebe Freunde. Das Entwickler-Panel (Konsole) im Browser ist ein unverzichtbares Tool für jeden Website-Besitzer, mit dem man sich schnell einen Überblick verschaffen kann HTML Quelltext Seiten und CSS-Stile. Informieren Sie sich außerdem über Fehler, die beim Laden der Seite aufgetreten sind, und prüfen Sie die Seite auf Anpassungsfähigkeit.

Heute betrachten wir die Arbeit mit HTML-Code, CSS-Stilen und Anpassungsfähigkeit im Entwicklerpanel. Dies sind die Werkzeuge, die zur Lösung der meisten Probleme erforderlich sind.

Für ein allgemeines Verständnis des Bildes geben wir ein Beispiel, wann Sie möglicherweise das Entwicklerfenster benötigen.

Nehmen wir an, Sie sind auf meinen Blog gekommen und interessieren sich für die Schriftart, Farbe usw., die ich verwende. Im Allgemeinen kann dies jedes Element auf der Website sein. Und Sie wollten dasselbe auf Ihrer Website tun.

Anschließend schauen Sie im Browser über das Entwicklerfenster auf das gewünschte Element, wo Sie den HTML-Code und die CSS-Stile dafür sehen können.

Eine weitere Möglichkeit, das Panel zu verwenden, besteht darin, dass Sie etwas auf der Website tun möchten, aber noch nicht wissen, wie es aussehen wird.

In diesem Fall können Sie auch das Entwicklerpanel nutzen und sehen, wie Ihre Idee im Browser aussehen wird. Schließlich ist alles, was Sie im Entwicklerbereich tun, nur für Sie sichtbar. Und damit Besucher Ihre Experimente sehen können, müssen Sie Stile und Codes in die Site-Dateien übertragen.

Öffnen Sie das Webmaster-Panel und machen Sie sich mit der Benutzeroberfläche vertraut

Das Entwicklerpanel ist in jedem vorhanden moderner Browser. Um es zu öffnen, müssen Sie die Taste F12 auf Ihrer Tastatur drücken.

Panel-Schnittstelle in verschiedene Browser wird unterschiedlich sein, aber die Funktionsprinzipien sind ähnlich.

Ich bevorzuge das Panel im Firefox-Browser.

Das Panel selbst ist in zwei Hälften geteilt und enthält Registerkarten und Werkzeuge für die Arbeit.

Im Panel können Sie den HTML-Code der Seite anzeigen und direkt dort bearbeiten. Wählen Sie dazu das gewünschte Element aus und drücken Sie rechte Taste Maus und wählen Sie aus dem Menü „Bearbeiten alsHTML (BearbeitenalsHTML)“.

Um mit Stilen zu arbeiten, müssen Sie zum Abschnitt des CSS-Bedienfelds gehen, wo Sie Stile hinzufügen oder vorhandene deaktivieren können, indem Sie das Kontrollkästchen daneben entfernen. Alles kann geändert werden.

Hier erfahren Sie, in welcher Datei sich die Stile befinden und in welcher Zeile.

So analysieren Sie ein HTML-Element auf einer Website und finden seine CSS-Stile heraus

Schauen wir uns mein Beispiel an, das sich in jedem Artikel befindet.

Um das gewünschte Element zu analysieren, müssen Sie mit der rechten Maustaste darauf klicken und den Menüpunkt auswählen .

Das gesamte Prinzip der Arbeit mit Code im Panel besteht darin, dass Sie im linken Fenster den HTML-Code auswählen müssen und im rechten Fenster Stile für dieses Element angezeigt werden.

Und wenn mit Stilen alles ganz einfach ist, müssen Sie bei der Arbeit mit HTML-Code dessen Integrität verstehen. Das heißt, jedes Element hat Tags, in denen es sich befindet. Dies können Absätze, Links, Bilder usw. sein. Am häufigsten handelt es sich dabei um DIV-Blöcke mit einem öffnenden Tag < div> und schließen div>. Und das alles ist im Panel deutlich sichtbar.

Beim Kopieren oder Bearbeiten ist es wichtig zu verstehen, wo ein Block beginnt und wo er endet. Der kleinste Fehler hier kann das gesamte Layout der Vorlage zerstören.

Im Video-Tutorial gehe ich ausführlich auf diesen Punkt ein. Und wenn Sie sich schnell Grundkenntnisse in HTML und CSS aneignen möchten, empfehle ich Ihnen, auf die Seite zu gehen "Kostenlos" und laden Sie Kurse von Evgeniy Popov herunter.

So kopieren Sie HTML-Code vom Panel in Site-Dateien

Es gibt viele Ideen für die Verwendung des Entwicklerpanels. Nach dem Experimentieren im Panel muss das Ergebnis in die Site-Dateien übertragen werden. Und hier gibt es einige Schwierigkeiten. Tatsache ist, dass das Panel HTML-Code anzeigt und die meisten modernen Websites, einschließlich derjenigen auf der WordPress-Plattform, in dieser Sprache erstellt werden PHP-Programmierung. Und das ist wie Himmel und Erde.

Schauen wir uns also ein Beispiel für das Kopieren eines Banners aus meinem Blog und dessen Übertragung auf eine andere Website an.

Dazu müssen Sie das Entwicklerfenster öffnen und das gewünschte Element untersuchen. Nachdem Sie den Anfang des DIV-Blocks ermittelt haben, drücken Sie die rechte Taste des Korns und wählen Sie den Menüpunkt aus „Extern kopierenHTML"

Der Code wurde in die Zwischenablage kopiert und Sie müssen ihn nun an der Stelle einfügen, an der Sie dieses Banner sehen möchten.

Dieser Vorgang ist ziemlich schwer zu beschreiben, daher empfehle ich, sich ein Video-Tutorial anzusehen, in dem alles ausführlich erklärt und gezeigt wird.

So übertragen Sie Stile vom Entwicklerpanel in Site-Dateien

Sobald Sie sich für den Code und die Stile entschieden haben, können Sie mit der Übertragung dieser in die Site-Dateien beginnen. Da alle diese Änderungen vorerst nur für Sie im Browser sichtbar sind und Sie die Seite aktualisieren, verschwinden alle Änderungen.

, für mich ist es bequemer. Denn beim Arbeiten in Notepad++ gibt es Code-Hervorhebung und Zeilennummerierung. Und das hilft sehr, wenn Sie Stile nicht nur kopieren, sondern auch Änderungen an vorhandenen vornehmen müssen. Diese Stile sind anhand der Zeilennummer leicht zu finden.

So überprüfen Sie die Reaktionsfähigkeit der Vorlage im Entwicklerbereich

Um das Panel in den adaptiven Modus zu schalten, müssen Sie die Tastenkombination STRG+UMSCHALT+M oder die Schaltfläche im Entwicklerpanel drücken, die sich in verschiedenen Browsern unterschiedlich befindet.

Abschluss

In diesem Artikel habe ich nicht alle Tools des Entwicklerpanels betrachtet, sondern nur diejenigen, die nützlich sein können und von vielen Webmastern am häufigsten verwendet werden.

Die Verwendung des Panels und Kenntnisse im Umgang mit Code und Stilen sind bei der Arbeit mit Websites und Partnerprogrammen unverzichtbar.

Nehmen Sie das Werkzeug in Betrieb, es wird Ihnen noch viele Male nützlich sein.

Wenn Sie Fragen haben, beantworte ich diese gerne in den Kommentaren.

Freunde, ich wünsche euch viel Erfolg. Wir sehen uns in neuen Artikeln.

Mit freundlichen Grüßen, Maxim Zaitsev.