Menüerklärung der IE8-Entwicklertools_HTML/Xhtml_Webseitenproduktion

In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.

Detaillierte Erklärung zur Verwendung der „Entwicklertools“ von IE8 (detaillierte Erklärung der Menüs auf allen Ebenen)
Die offizielle Version von IE8 wurde veröffentlicht. Dieser Artikel wird keine sehr unsinnige Bewertung sein und dann etwas geben wie „Die Fähigkeit von Chrome, JavaScript auszuführen, ist 15-mal so hoch wie die von IE8“, „Die Geschwindigkeit beim Rendern von IE8-Seiten ist 2,456-mal so hoch wie die von Safari“ und „Die Fähigkeit von IE8 zur Vergewaltigungsbekämpfung“. 1,235-mal höher als FireFox“ ist eine verdammte Schlussfolgerung. Es ist mir egal, wer besser ist als wer? Ich weiß nur: Wenn Windows 7 veröffentlicht wird, wird der Marktanteil des IE8-Browsers es Front-End-Entwicklern unmöglich machen zu sagen: „Mach dir keine Sorgen um IE8, nicht viele Leute verwenden ihn.“ Daher wird in diesem Artikel auf sehr pragmatische Weise erklärt, dass IE8 möglicherweise das einzige „Entwicklertool“ ist, das Entwicklern ein freundliches Gefühl vermittelt. Gleichzeitig werden wir einige relevante Informationen und Kenntnisse erweitern. Geben Sie also bitte Ihre Vorurteile gegenüber IE8 auf und lesen Sie geduldig weiter.

Haben Sie IE8 noch nicht installiert?

Wenn Sie ein Front-End-Entwickler sind, dann installieren Sie bitte dieses Ding. Weil die offizielle Version veröffentlicht wurde. Anders als bei der vorherigen Beta-Version müssen wir dieses Mal ernsthaft darauf achten. Laden Sie eines herunter und installieren Sie es. Hier ist die Download-Adresse –

Downloadliste für die chinesische IE8-Version

Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64-Bit
Windows Vista 64-Bit
Windows Server 2003 64-Bit
Windows Server 2008 64- bisschen

Downloadliste für die englische IE8-Version

Windows XP
Windows XP 64 Bit
Windows Vista
Windows Vista 64 Bit
Windows Server 2003
Windows Server 2003 64 Bit
Windows Server 2008
Windows Server 2008 64 Bit

Oh, vielleicht machen Sie sich Sorgen, dass IE6 oder IE7 in Ihrem System fertig ist. Nun ja, das ist tatsächlich möglich. Sie können jedoch die folgenden Tools ausprobieren. Es ermöglicht Ihnen die Koexistenz mit mehreren Versionen von IE – der Lösung für die Koexistenz mehrerer Versionen von IE – IETester
Microsoft Webentwicklungs- und Debugging-Tool SuperPreview (mit Download)
Lernen Sie „Developer Tools“ kennen

Obwohl dieses Ding seinen modischen Namen geändert hat, ist es nichts Neues. Sein Vorgänger war „IEdevtoolbar“. Früher war es jedoch nur ein Plug-in für den IE. Im IE8 hat der Browser dieses Ding automatisch integriert. Es hat nicht nur seinen Namen etwas rustikal geändert, sondern auch seine Funktionen wurden erheblich verbessert.
Die Entwicklertools können im Tools-Menü von IE8 oder durch direktes Klicken auf die Tastenkombination F12 aufgerufen werden.

Bevor wir es vorstellen, sprechen wir zunächst darüber, was genau dieses Ding kann? Wenn Sie zum Durchsuchen der Website nur einen Browser verwenden, müssen Sie sich keine Gedanken darüber machen, wie die Seite erstellt wird. Dann denke ich, dass Sie diese Seite verlassen können.
Im Allgemeinen sind Entwicklertools Tools, die für Frontend-Entwickler zum Entwickeln von Seiten entwickelt wurden. Bietet eine Reihe kleiner Tools, mit denen Sie Seitenfehler leicht finden können, einschließlich HTML-Code, CSS-Code und JavaScript-Code. Gleichzeitig stellt er auch einige geschmacklose, aber dennoch nützliche Gadgets zur Verfügung, wie z. B. Farbauswahl, Bildschirmlineal usw.
OK, wir haben es gesehen und wissen, was es kann. Dann stellen wir sie der Reihe nach in der Reihenfolge des Menüs vor –

In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
Menü [Datei]

[Alles rückgängig machen]
Alle vorherigen Vorgänge in den Entwicklertools abbrechen und die Seite und die DOM-Struktur aktualisieren.
[Angepasste Internet Explorer-Versuchsquelle]
[Versuchsquelle] ist so ein verdammter Begriff. Einfacher ausgedrückt: „Welchen Editor sollte ich verwenden, um die Quelldatei der Webseite anzuzeigen?“ Beispiel: Ich verwende EditPlus.
【Exit】
Um Ihre Intelligenz nicht zu beleidigen, werde ich nicht mehr dazu sagen. Nun, F12 ist eine ungerade-gerade Tastenkombination, das möchte ich übrigens erwähnen.
Menü „Suchen“
Klicken Sie, um das Element auszuwählen

Die Tastenkombination Strg B hat den gleichen Effekt wie das Klicken mit der ICO-Taste im Bild. Die am häufigsten verwendeten Funktionen. Auch ein Paritätsschalter. Wenn Sie beim Öffnen mit der Maus auf ein Element auf der Seite klicken, wird das Element ausgewählt und die DOM-Struktur, der CSS-Stil und andere Informationen des Elements werden aufgelistet.

Zum Beispiel das Bild oben. Im linken Bereich werden die DOM-Informationen dieses Hyperlink-Elements angezeigt. Sie können die übergeordneten Elemente, untergeordneten Elemente und Geschwisterelemente deutlich erkennen.
Im rechten Bereich werden die Informationen zum Elementstil angezeigt. Der durchgestrichene Stil bedeutet, dass der Stil nicht mehr wirksam ist, weil seine Priorität nicht hoch genug ist. Während des Debuggens kann das vorherige Häkchen deaktiviert werden. Wenn es deaktiviert ist, bedeutet dies, dass dieser Stil zwangsweise gelöscht wird. Darüber hinaus können die Eigenschaften jedes Stils sofort per Mausklick geändert werden. Es ist sehr praktisch, den geänderten Seiteneffekt sofort zu sehen.
Freunde, die FireBug von Firefox verwendet haben, werden damit vertraut sein. Der einzige Unterschied besteht darin, dass FireBug die Stile mit niedrigerer Priorität unten anordnet, das ist alles.

Die Ansicht [Spurstil] und die Ansicht [Stil] haben die gleiche Funktion. Beide werden zum Anzeigen der Stilinformationen des ausgewählten Elements verwendet. Der einzige Unterschied besteht darin, dass der Ansichtsmodus geändert wird. Welche Ansicht Sie gewohnt sind, hängt von Ihren Vorlieben ab.

In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.


Die [Layout]-Ansicht kann die geschachtelten Modellinformationen des ausgewählten Elements anzeigen. Obwohl es mehr Informationen als FireBug anzeigen kann, bevorzuge ich immer noch die Art und Weise, wie FireBug sie mit Farbblöcken direkt auf der Seite anzeigt.

Die Ansicht [Attribut] kann die Attributinformationen des ausgewählten Elements anzeigen. Das Schöne ist, dass Sie einige Eigenschaften sofort hinzufügen oder entfernen können, um die Seite schnell zu debuggen.
Oh, richtig. Beachten Sie, dass unabhängig davon, ob Sie den Stil oder die Attribute des ausgewählten Elements in den Entwicklertools ändern, diese nur zum vorübergehenden Debuggen dienen und den Quellcode Ihrer Webseite nicht ändern. Das Menü
【Deaktivieren】

【Skript】
deaktiviert die Verwendung von JavaScript- oder VBScript-Skripten auf der Seite. Warum es deaktivieren? Um die Robustheit der Seite zu testen. Einige Kunden, die hohe Anforderungen an das Seitendesign haben, werden fragen: „Kann diese Seite trotzdem verwendet werden, wenn der Kunde Skripte deaktiviert?“ Nun ja, diese Funktion wird verwendet, um die ungewöhnlichen Bedürfnisse dieser beschissenen Kunden zu testen.
【Pop-up-Blocker】
Filter für Pop-ups. Wird verwendet, um zu testen: „Wie kann ich verhindern, dass der Browser oder die Sicherheitssoftware meine Popup-Fenster herausfiltert?“
【CSS】
Das „CSS Streaking Festival“ ist da! Verwenden Sie dies, um zu testen, wie Ihre Seite aussieht, wenn CSS Streifen aufweist. Dies ist auch ein wichtiger Test, um die Robustheit und Zugänglichkeit der Seite zu überprüfen. Allerdings gibt es in China derzeit nicht viele Blinde, die Zugang zum Internet haben.

In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
Menü [Ansicht]

[Klassen- und ID-Informationen]
Die Tastenkombination ist Strg I, Paritätsschalter. Nach dem Öffnen werden Sie feststellen, dass die Seite mit dichten roten Farbblöcken bedeckt ist. Gleichzeitig wird der Klassenname bzw. ID-Name angezeigt. Ja, das ist der Effekt der Anzeige von Klassen- und ID-Informationen. Aber mal ehrlich: Wer hätte Interesse an dieser roten Kacke? Dadurch sieht die Seite nicht nur wie eine geflickte Bettleruniform aus, sondern ist auch völlig unklar -_-b...

[Linkpfad]
Das Gleiche wie oben. Alle Hyperlinks auf der Seite werden in roten Kästchen hervorgehoben und ihre Linkadressen angezeigt.

[Link-Bericht]
Mit der Link-Bericht-Funktion helfen Ihnen die Entwicklertools, einen Link-Bericht für diese Seite zu erstellen. Enthält Informationen wie die Anzahl der Links, Linkadresse, ob ein neues Fenster geöffnet wird usw. Was ist jedoch der konkrete Nutzen dieses Dings? Ich weiß es auch nicht.

[Tab Index]
Hebt alle Elemente hervor, die das Tabindex-Attribut enthalten. Durch das Festlegen des Tabindex-Attributs kann die Reihenfolge geändert werden, in der Webseitenelemente den Fokus erhalten.

In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
[Zugriffsschlüssel]
Markieren Sie alle Elemente, die das „Accesskey-Attribut“ enthalten. Legen Sie das Attribut „accesskey“ fest, um die Tastenkombination festzulegen, mit der das Element den Fokus erhält.

【Quelldatei】"Elementquelle mit Stil"
Generieren Sie eine Quelldatei, die den ausgewählten Elementstil, den HTML-Code und Informationen auf Webseitenebene enthält.
Zuerst muss ein Element ausgewählt werden, damit dieser Befehl wirksam wird. Darüber hinaus bezieht sich die generierte Quelldatei nur auf das ausgewählte Element.
[Quelldatei] „DOM (Element)“
Die Tastenkombination ist Strg T. Generieren Sie eine Quelldatei. Diese Quelldatei enthält nur die DOM-Strukturinformationen des ausgewählten Elements. Freunden, die FireBug verwendet haben, fällt der Befehl „Element-HTML-Code kopieren“ ein. Tatsächlich ist dieser fast derselbe wie jener. Dies wird lediglich in einem Fenster generiert und FireBug kopiert es direkt in die Zwischenablage.
[Quelldatei] „DOM (Seite)“
Tastenkombination Strg G. Generieren Sie eine Quelldatei. Diese Quelldatei enthält die DOM-Informationsstruktur der gesamten Seite. Es ist eine sehr beschissene Funktion. Ich weiß nicht, ob es an einem Fehler liegt. Diese Funktion ist eigentlich „Quellcode der Webseite anzeigen“. Denn der generierte Quellcode besteht nicht nur aus DOM-Informationen, sondern enthält auch CSS- und Skriptinformationen.
Der „Originalzustand“ von [Quelldatei]
Die äußerst verdammte Funktion ist eigentlich „Den Quellcode der Webseite anzeigen“. Wahrscheinlich klickt jeder lieber mit der rechten Maustaste direkt auf die Webseite.
Menü [Gliederung]

Das Menü [Gliederung] ist offensichtlich ein Befehl zum Umreißen und Anzeigen von Elementen, die die Bedingungen erfüllen.
【Tabellenzelle】
Verwenden Sie einfach orangefarbene Linien , um jede Zelle in der Formulartabelle einzurahmen. Nur um dich wissen zu lassen – oh. Es stellt sich heraus, dass dies die Zelle der Tabelle ist.

【Formular】
besteht darin, das Formular mit orangefarbenen Linien einzurahmen. Nur um dich wissen zu lassen – oh. Es stellt sich heraus, dass dies die Form ist.
[DIV-Element]
besteht darin, grüne Linien zu verwenden, um alle div-Elemente auf der Seite einzurahmen. Nur um dich wissen zu lassen – oh. Es stellt sich heraus, dass dies alles div-Elemente sind.


In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
【Bild】
besteht darin, violette Linien zu verwenden, um alle Bildelemente auf der Seite einzurahmen. Nur um dich wissen zu lassen – oh. Es stellt sich heraus, dass dies alles img-Elemente sind.

[Jedes Element]
Dies ist relativ mächtig. Sie können jedes Etikett und die gewünschte Farbe des Drahtmodells anpassen. Klicken Sie auf dieses Menü und das folgende Dialogfeld wird angezeigt. Ganz einfach. Keine Erklärung mehr.

Das „Relative“ von [Positioniertes Element]
wird mit einer grünen Linie für alle Elemente mit dem Stil „position:relative“ umrandet.
[Positioniertes Element]s „absolutes“
wird für alle Elemente mit dem Stil „position:absolute“ mit einer schwarzen Linie umrandet.
[Positioniertes Element]s „festes“
wird für alle Elemente mit dem Stil „position:static“ mit einer blauen Linie umrandet. Das „schwebende“
von
[Positioniertes Element] wird für alle Elemente mit Float-Stil mit einer gelben Linie umrandet.
【Umrisse löschen】
Wenn Ihre Seite aus Zeilen in verschiedenen Farben wie eine Excel-Tabelle erstellt wurde, können Sie mit diesem Befehl alle Zeilen löschen.


In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
Menü [Bild]

Natürlich steuert dieser Befehl verschiedene Bilder auf der Seite.
【Deaktivierte Bilder】
Um Ihre Intelligenz nicht zu beleidigen, werde ich das nicht sagen. Das Einzige, was erklärt werden muss, ist, dass nicht nur das img-Element, sondern auch das Hintergrundbild des Elements deaktiviert wird.
【Bildgröße anzeigen】
Sehr gute Funktion. Sie können die Größe jedes Bildes schnell ermitteln, ohne die Bildeigenschaften überprüfen zu müssen. Die Einheit ist natürlich Pixel.

[Bilddateigröße anzeigen]
Eine sehr gute Funktion. Sie können die Dateigröße jedes Bildes schnell ermitteln, ohne die Bildeigenschaften überprüfen zu müssen. Die Einheit ist natürlich Byte.

[Bildpfad anzeigen]
Eine sehr gute Funktion. Sie können den URL-Pfad jedes Bildes schnell ermitteln, ohne die Bildeigenschaften überprüfen zu müssen, und Sie können ihn auch kopieren.

[Alt-Text anzeigen]
Sie können den Text des Alt-Attributs des img-Elements anzeigen. Übrigens: Verwenden Sie keine Keywords im Alt-Bild, da es sonst leicht als SEO-Überoptimierung erkannt wird.

【Bildbericht anzeigen】
Erstellen Sie einen detaillierten Bildbericht der geänderten Seite. Enthält sehr detaillierte Informationen zu jedem Bild.


In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
Menü [Cache]

Menügruppe zum Verwalten von Cache und Cookies. Dies wird für Entwickler eine sehr willkommene Funktion sein.
【Immer vom Server aktualisieren】
Es scheint ein sehr tiefgründiger Befehl zu sein. Mit anderen Worten: „Deaktivieren Sie die Verwendung des Browser-Cache.“
【Browser-Cache leeren】
Tastenkombination Strg R. Es gibt nicht viel zu sagen, es ist nur eine Vereinfachung der vorherigen Schritte.
Ich frage mich, ob Ihnen aufgefallen ist, dass im Menü nach [Browser-Cache leeren] drei Punkte angezeigt werden. Das bedeutet, dass beim Klicken auf dieses Menü ein Bestätigungsdialogfeld angezeigt wird.
【Browser-Cache für diese Domain leeren】
Tastenkombination Strg D. Es gibt nicht viel zu sagen, leeren Sie einfach den Browser-Cache für diese Domain.
【Cookies deaktivieren】
Es gibt keinen Vorteil. Keine Kekse mehr.
【Sitzungscookies löschen】
Alle Cookies im Browser löschen. Ihre Foren und Communities warten alle darauf, wieder angemeldet zu werden.
【Domain-Cookies löschen】
Nur ​​Cookies für diese Domain löschen.
【Cookie-Informationen anzeigen】
Zeigen Sie die auf dieser Seite enthaltenen Cookie-Informationen an. Denken Sie nicht einmal darüber nach, Sie werden das Passwort nicht bekommen.
Menü [Extras]

In den Entwicklertools sind einige nützliche Gadgets enthalten, die jedoch im Vergleich zu anderen spezialisierten Tools etwas schwach sind. Aber Notfallmaßnahmen reichen aus.
【Größe ändern】
Sehr nützliches Gadget. Sie können das Browserfenster schnell auf die entsprechende Größe anpassen. Auf diese Weise lässt sich die Kompatibilität der Webseitenauflösung viel bequemer testen.
【Lineal anzeigen】
Ein einfaches Lineal-Tool. Verwenden Sie es, um Länge, Entfernung und andere Informationen zu messen. Die Farbe des Fadens kann geändert werden. Es können auch mehrere Titel erstellt werden. Sollte der Bereich zu klein sein, können Sie die Lupe-Funktion nutzen.

【Farbauswahl anzeigen】
Ein einfaches Farbauswahltool. Farben können per Mausklick ausgewählt werden. Ich empfehle Ihnen jedoch ein anderes Tool – „My Work Toolbox – Color Picking Tool (ColorPic)“. Im Vergleich dazu ist dieses in den Entwicklertools zu einfach.


In diesem Artikel wurde jedes Menü der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
[Bestätigung]-Menü

Es wird definitiv einen blutigen Sturm auf der Welt auslösen (Danke, Xiaoqi, dass du mich an diese Redewendung erinnert hast, die ich plötzlich vergessen habe. Leider ~ Vielleicht ist der neueste Kampfkunstroman, den ich gelesen habe, wahrscheinlicher, weil er fehlt. Aber in letzter Zeit scheine ich mit der Redewendung „immer wieder keuchen“ vertrauter zu sein. In naher Zukunft wird es unzählige Kong Yijis geben.
【HTML】
Überprüfen Sie den HTML-Code der Seite. Diese Seite wird an das HTML-Überprüfungstool von w3c gesendet und ein Überprüfungsbericht wird abgerufen.
【CSS】
Überprüfen Sie den CSS-Code der Seite. Diese Seite wird an das CSS-Überprüfungstool von w3c gesendet und ein Überprüfungsbericht wird abgerufen.
【Quelle】
Überprüfen Sie den Quelldateicode der Seite. Diese Seite wird an das Überprüfungstool von feedvalidator.org gesendet und ein Überprüfungsbericht wird erstellt.
[Link]
Link zur Verifizierungsseite. Diese Seite wird an das Verifizierungstool von w3c gesendet und ein Verifizierungsbericht wird erhalten.
[Lokales HTML]
Öffnen Sie das HTML-Verifizierungstool von w3c, um lokale Seiten zu überprüfen.
[Lokales CSS]
Öffnen Sie das CSS-Verifizierungstool von w3c, um lokale Seiten zu überprüfen.
[Barrierefreiheit] „WCAG-Checkliste“
Überprüfen Sie die WCAG (Web Content Accessibility Report – Seitenzugänglichkeit) der Seite. Diese Seite wird an das Verifizierungstool von contentquality.com gesendet und ein Verifizierungsbericht wird erstellt.
【Barrierefreiheit】"508-Liste"
Überprüfen Sie die 508-Standards der Seite. Diese Seite wird an das Verifizierungstool von contentquality.com gesendet und ein Verifizierungsbericht wird erstellt.
【Mehrfache Überprüfungen】
Bei der gleichzeitigen Überprüfung werden mehrere Standardüberprüfungen auf der Seite durchgeführt.

Zur Seitenverifizierung möchte ich zwei Dinge sagen: Müssen Seiten tatsächlich auch die Verifizierung bestehen, bevor sie online gehen können? Ich persönlich halte es für völlig unnötig. Wenn Sie Student sind, liegen Sie im Elfenbeinturm. Sie können mit Ihrer Seite machen, was Sie wollen, denn Sie sind der Kunde und haben Zeit. Aber bei kommerziellen Projekten besteht keine Notwendigkeit, wertvolle Projektressourcen nur für ein „PASS“ zu verschwenden. Weil es keinen Kunden interessiert: „Sehen Sie, diese Seite, die ich erstellt habe, wurde in vielerlei Hinsicht vom W3C überprüft.“ Wenn es Kunden gibt, die sich wirklich darum kümmern, dann kann ich nur sagen, dass ich Ihre Fähigkeit zum „Täuschen“ bewundere.

Bitte freuen Sie sich auf die nächste Folge

In diesem Artikel wurden die einzelnen Menüs der Entwicklertools kurz erläutert. Ich glaube, dass jeder dieses leistungsstarke Tool problemlos nutzen kann.
Aber über die leistungsstärkeren Funktionen haben wir noch nicht gesprochen. Alle freuen sich bitte auf unseren nächsten Artikel. Im nächsten Artikel werden die Verwendung von JavaScript-Debugging, Browsermodus, Textmodus und anderen Funktionen ausführlich erläutert.