Menü Erläuterung von IE8 -Entwickler -Tools

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

Detaillierte Erläuterung der Verwendung von IE8 -Entwicklerwerkzeugen (detaillierte Erläuterung der Menüs auf allen Ebenen)

Die offizielle Version von IE8 wurde veröffentlicht. Dieser Artikel wird in einem sehr Unsinn keine Kommentare abgeben und dann die Schlussfolgerung geben, dass Chrome die Fähigkeit hat, JavaScript zu betreiben, das 15 -mal so hoch ist wie IE8, das IE8 das 2,456 -fache des Safari hat und was IE8 1,235 -mal höher als Firefox hat. Wen kümmert ich mich besser als wer? Ich weiß nur: Wenn Windows 7 veröffentlicht wird, wird der Marktanteil des IE8-Browsers die Front-End-Entwickler nicht sagen: Mach dir keine Sorgen um IE8, nur wenige Leute benutzen es. Dieser Artikel erklärt ihn also sehr pragmatisch. IE8 ist möglicherweise das einzige Entwickler -Tool, mit dem sich Entwickler freundlich fühlen. Gleichzeitig werden wir einige relevante Informationen und Kenntnisse erweitern. Bitte geben Sie Ihre Vorurteile gegen IE8 auf und schauen Sie sich geduldig an.

Haben IE8 noch nicht installiert?

Wenn Sie ein Front-End-Entwickler sind, installieren Sie bitte dieses Ding. Weil die offizielle Version veröffentlicht wurde. Im Gegensatz zur vorherigen Beta -Version müssen wir diesmal ernsthaft darauf achten. Gehen Sie und laden Sie ein und installieren Sie eine. Folgendes ist die Download-Adresse-

IE8 Chinesische Versionsliste für chinesische 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-Bit

IE8 English Version Downloadliste

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 werden Sie sich Sorgen machen, dass IE6 oder IE7 in Ihrem System vorbei ist. Ja, das ist in der Tat möglich. Sie können jedoch das folgende Tool ausprobieren. Es ermöglicht Ihnen, mit mehreren Versionen von IE - Lösungen für die Koexistenz mehrerer Versionen von IE - IETESTER zusammenzuarbeiten

SuperPreview (mit Download)

Obwohl dieses Ding ihren modischen Namen geändert hat, ist es keine neue Sache. Sein Vorgänger war iedevtoolbar. Früher war es jedoch nur ein Plug-In für IE. In IE8 hat der Browser dieses Ding automatisch integriert, was nicht nur den Namen von etwas rustikal geändert hat, sondern auch eine große Verbesserung der Funktionen hat.

Entwicklertools können auch im Menü "Tools" von IE8 aufgerufen werden oder direkt auf die Taste F12 -Verknüpfung klicken.

Bevor wir es vorstellen, sprechen wir darüber, was dieses Ding tun kann? Wenn Sie nur einen Browser verwenden, um die Website zu durchsuchen, ohne sich darüber Sorgen zu machen, wie die Seite hergestellt wird. Dann denke ich, dass Sie diese Seite verlassen können.

Insgesamt sind Entwicklerwerkzeuge Tools, die für Front-End-Entwickler entwickelt wurden, um Seiten zu entwickeln. Geben Sie eine Reihe von Geräten an, mit denen Sie einfach Seitenfehler finden können, einschließlich HTML -Code, CSS -Code und JavaScript -Code. Gleichzeitig bietet er auch einige kleine Werkzeuge, die ziemlich nutzlos sind, aber dennoch den Geruch schlagen können, z. B. Farbpicken, Bildschirmlineer usw.

Ok, wir haben es gesehen und wissen, was es kann. Dann stellen wir es eins nach dem anderen gemäß der Reihenfolge der Speisekarte vor.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

【All】 widerrufen】

Alle in den Entwicklertools ausgeführten Vorgänge wurden abgebrochen und die Seite und DOM -Strukturen werden aktualisiert.

【Benutzerdefinierte Internet -Explorer -Versuchsquelle】

【Versuchen Sie Quelle】 Was für ein verdammtes Substantiv. Auf einfache Weise ist es: Mit welchem ​​Editor Sie die Web -Quelldatei anzeigen müssen. Zum Beispiel: Ich verwende EditPlus.

【aufhören】

Um Ihren IQ nicht zu beleidigen, werde ich nicht viel dazu sagen. Nun, F12 ist ein Paritätskürzelschlüssel. Erwähnen wir dies übrigens.

【Suchen Sie】 Menü

Klicken Sie auf, um Element auszuwählen

Die Abkürzungstaste Strg B hat den gleichen Effekt wie das Klicken auf die Maus -ICO -Schaltfläche im Bild. Die am häufigsten verwendete Funktion. Es ist auch ein Paritätsschalter. Beim Öffnen wird beim Klicken auf ein Element auf der Seite mit der Maus das modifizierte Element ausgewählt und die DOM -Struktur, der CSS -Stil und andere Informationen des geänderten Elements werden aufgeführt.

Zum Beispiel das obige Bild. Der Bereich links zeigt die DOM -Informationen für dieses Hyperlink -Element. Seine Eltern-, Kinder- und Geschwisterelemente sind deutlich zu sehen.

Der Bereich rechts zeigt die Informationen zum Elementstil. Der Stil, der durch die Linie gekreuzt wird, bedeutet, dass der Stil nicht mehr funktioniert, da die Priorität nicht hoch genug ist. Während des Debuggens kann der vorherige Haken abgelöst werden. Wenn dieser Stil abgeschlossen ist, ist dies gezwungen, gelöscht zu werden. Darüber hinaus können die Eigenschaften jedes Stils sofort nach dem Klicken mit der Maus geändert werden. Dies wird sofort den modifizierten Seiteneffekt sehen, der sehr bequem ist.

Freunde, die Firefox 'Firebug benutzt haben, müssen damit vertraut sein. Der einzige Unterschied ist: Firebug arrangiert Stile mit niedrigerer Priorität unten, das ist alles.

Die Funktion von [Tracing Style] und [Style] -Ansicht ist gleich und wird verwendet, um die Stilinformationen des ausgewählten Elements anzuzeigen. Der einzige Unterschied ist: Es hat seine Betrachtungsmethode geändert. Die spezifische Sicht Ihrer Gewohnheit hängt von Ihren eigenen Vorlieben ab.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

[Layout] In der Ansicht können Boxed -Modellinformationen aus ausgewählten Elementen angezeigt werden. Obwohl es mehr Informationen als Firebug anzeigen kann, bevorzuge ich den Weg in Firebug immer noch, um sie direkt auf der Seite mit Farbblöcken auszudrücken.

[Eigenschaften] Die Ansicht kann die Attributinformationen des ausgewählten Elements anzeigen. Es ist sehr erfreulich: Sie können einige Eigenschaften sofort hinzufügen oder löschen, um die Seite schnell zu debuggen.

Oh, richtig. Es ist zu beachten, dass unabhängig davon, ob Sie den Stil oder die Attribute des ausgewählten Elements im Entwickler -Tool ändern, sie nur vorübergehend debuggen und Ihren Webseiten -Quellcode nicht ändern.

【Deaktivieren Sie】 Menü

【Skript】

JavaScript- oder VBScript -Skripte auf der Seite sind verboten. Warum es deaktivieren? Um die Robustheit der Seite zu testen. Einige Kunden, die hohe Anforderungen an das Seitendesign haben, fragen: Wenn der Kunde das Skript deaktiviert, kann diese Seite noch verwendet werden? Ja, diese Funktion wird verwendet, um die perversen Anforderungen dieser verdammten Kunden zu testen.

【Popup-Fensterblocker】】

Filter für Popup -Fenster. Wird verwendet, um zu testen, welcher Browser oder die Sicherheitssoftware in meinem Popup -Fenster herausgefiltert werden kann.

【CSS】

CSS Nude Festival kommt! Verwenden Sie dies, um die Haltung Ihrer Seite zu testen, wenn Sie nackt in CSS ausgeführt werden. Dies ist auch ein wichtiger Test, um die Robustheit und Zugänglichkeit der Seite zu überprüfen. Es gibt jedoch nicht viele Blinde, die jetzt auf Webseiten in China zugreifen können.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

【Klassen- und ID -Informationen】

Der Abkürzungschlüssel ist Strg I, der Paritätsschalter. Nach dem Öffnen sehen Sie, dass die Seite mit dichten roten Farbblöcken bedeckt ist. Der Klassenname oder der ID -Name werden angezeigt. Ja, dies ist der Effekt der Anzeige von Klassen- und ID -Informationen. Aber um ehrlich zu sein, wer würde sich für diesen roten Stuhl interessieren? Die Seite sieht nicht nur wie die Kleidung eines Bettlers voller Patches aus, sondern ist auch völlig nicht bekannt---_-B ...

【Linkpfad】

Gleich wie oben. Es wird alle Hyperlinks in der Seite rot gefasst und seine Linkadresse angewiesen.

【Verknüpfungsbericht】

Mit der Funktion "Link -Bericht" hilft Ihnen das Entwickler -Tool, einen Linkbericht für diese Seite zu generieren. Enthält Informationen wie die Anzahl der Links, die Linkadresse, ob ein neues Fenster geöffnet usw. Aber wie nutzt dieses Ding? Ich weiß es auch nicht.

【Registerkarte Index】

Markieren Sie alle Elemente, die Tabindex -Attribute enthalten. Die Einstellung der Tabindex -Eigenschaft kann die Reihenfolge ändern, in der Webseitenelemente den Fokus erhalten.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

【Zugangstaste】

Markieren Sie alle Elemente, die das AccessKey -Attribut enthalten. Legen Sie das AccessKey -Attribut fest, um die Verknüpfungsschlüssel für Elemente festzulegen, um den Fokus zu erhalten.

【Quelldatei】 Elementquelle mit Stil

Generieren Sie eine Quelldatei mit ausgewählten Elementstilen, HTML-Code und Informationen auf Web-Ebene.

Ein Element muss ausgewählt werden, bevor dieser Befehl gültig ist. Darüber hinaus hängt die generierte Quelldatei nur mit den ausgewählten Elementen zusammen.

【Quelldatei】 DOM (Element)

Der Abkürzungschlüssel ist Strg T. Generieren Sie eine Quelldatei. Diese Quelldatei enthält nur DOM -Strukturinformationen für das ausgewählte Element. Freunde, die Firebug verwendet haben, können sich den HTML -Code des Befehlskopie -Elements vorstellen. Eigentlich ähnelt dieser. Es ist nur so, dass dies in ein Fenster erzeugt wird und Firebug direkt in die Zwischenablage kopiert wird.

【Quelldatei】 DOM (Seite)

Kurzschlussschlüssel Strg G. Generieren Sie eine Quelldatei. Diese Quelldatei enthält die DOM -Informationsstruktur der gesamten Seite. Es ist ein sehr verdammtes Feature. Ich weiß nicht, ob es am Fehler liegt. Diese Funktion soll den Webseiten -Quellcode angezeigt werden. Da der generierte Quellcode nicht nur DOM -Informationen, sondern auch CSS- und Skriptinformationen ist.

Ursprünglicher Status von 【Quelldatei】

Die extrem verdammte Funktion besteht tatsächlich darin, den Webseiten -Quellcode anzuzeigen. Jeder sollte es vorziehen, die rechte Maustaste zu verwenden, um direkt auf die Webseite zu klicken.

[SUCKLINE] Menü ist offensichtlich ein Befehl, um Elemente zu skizzieren, die den Bedingungen erfüllen und sie anzeigen.

【Tabellenzelle】

Es soll jede Zelle der Form Tabelle mit Orangendrahtrahmen rahmen. Lass dich wissen. Es stellt sich heraus, dass dies die Zelle der Tabelle ist.

【Oberfläche】

Es soll die Form in Orangendrahtrahmen rahmen. Lass dich wissen. Es stellt sich heraus, dass dies die Form der Form ist.

【Divelelemente】

Für alle Divelemente auf der Seite sollen grüne Wireframes verwendet werden. Lass dich wissen. Es stellt sich heraus, dass dies Divelelemente sind.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

【Bild】

Es soll alle IMG -Elemente in der Seite im lila Drahtmodell rahmen. Lass dich wissen. Es stellt sich heraus, dass dies alles IMG -Elemente sind.

【Jedes Element】

Dieser ist mächtiger. Sie können jedes Etikett anpassen und welche Farbe sie verwenden möchten, um zu verdrahten. Klicken Sie auf dieses Menü und das folgende Dialogfeld wird angezeigt. Sehr einfach. Keine Erklärungen mehr.

【Positionierungselemente】 Relativ

Es wird grün umrahmt , alle Elemente mit Position: relativer Stil.

【Positionierungselement】 Absolut

Es wird mit schwarzem Wireframe umrahmt, alle Elemente mit Position: absoluter Stil.

【Positionierungselement】 Behoben

Es wird blau gerahmt , alle Elemente mit Position: statischer Stil.

【Positionierungselement】 Float

Es wird mit gelben Drahtrahmen umrahmt, alle Elemente mit Schwimmerstil.

【Klarer Umriss】

Wenn Ihre Seite mit verschiedenen Farben von Linien wie Excel -Tabellen hergestellt wurde, können Sie diesen Befehl verwenden, um alle Zeilen zu löschen.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

Offensichtlich steuert dieser Befehl verschiedene Bilder auf der Seite.

【Bilder deaktivieren】】

Um Ihren IQ nicht zu beleidigen, werde ich das nicht sagen. Das einzige, was zu erklären 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 kennen, ohne die Bildattribute zu überprüfen. Natürlich sind das Gerät Pixel.

【Bilddateigröße anzeigen】

Sehr gute Funktion. Sie können die Dateigröße jedes Bildes schnell kennen, ohne die Bildeigenschaften zu überprüfen. Natürlich ist das Gerät Bytes.

【Bildpfad anzeigen】

Sehr gute Funktion. Sie können den URL -Pfad jedes Bildes schnell kennen, ohne die Bildattribute zu überprüfen, und Sie können es auch kopieren.

【Alt -Text anzeigen】】

Der Text des ALT -Attributs des IMG -Elements kann angezeigt werden. Übrigens: Stapeln Sie Schlüsselwörter nicht für Bilder, da es sonst leicht als SEO -Übergangsoptimierung angesehen wird.

【Bildbericht anzeigen】

Generieren Sie einen detaillierten Bildbericht zum Ändern der Seite. Enthält sehr detaillierte Informationen für jedes Bild.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

Verwalten Sie die Menügruppen von Caches und Cookies. Dies wird ein sehr angenehmes Merkmal für Entwickler sein.

【Immer vom Server aktualisieren】

Es scheint ein sehr tiefgreifender Befehl zu sein. Mit anderen Worten, es ist verboten, den Browser -Cache zu verwenden.

【Browser -Cache löschen】

Verknüpfungstaste Strg R. Es gibt nichts zu sagen, es vereinfacht nur die vorherigen Betriebsschritte.

Ich weiß nicht, ob Sie bemerkt haben, dass im Menü drei Punkte hinter [Clear Browser -Cache] stehen. Dies bedeutet, dass das Dialogfeld nach Klicken auf dieses Menü bestätigt wird.

【Löschen Sie den Browser -Cache für diese Domäne】】

Verknüpfungstaste Strg D. Es gibt nichts zu sagen. Löschen Sie einfach den Browser -Cache in dieser Domäne.

【Cookies deaktivieren】

Es gibt keinen Nutzen zu sagen. Keine Kekse erlaubt.

【Clear Session Cookies】】

Löschen Sie alle Kekse in Ihrem Browser. Ihr Forum und Ihre Community warten darauf, sich wieder anzumelden.

【Löschen Sie die Domänenkekse】】】

Nur Kekse in dieser Domäne.

【Cookie -Informationen anzeigen】

Sehen Sie sich die auf dieser Seite enthaltenen Cookie -Informationen an. Denken Sie nicht einmal darüber nach, Sie erhalten das Passwort nicht.

Einige nützliche Geräte sind in den Entwickler -Tools enthalten, obwohl sie etwas schwächer sind als andere spezialisierte verwandte Tools. Die Notfallreaktion reicht jedoch immer noch aus.

【Größe der Größe】】

Sehr nützliches Gerät. Sie können das Browserfenster schnell auf die relevante Größe einstellen. Auf diese Weise wird es viel bequemer sein, die Kompatibilität der Webauflösung zu testen.

【Zeigen Sie Herrscher】】

Ein einfaches Herrscherwerkzeug. Verwenden Sie es, um Länge, Entfernung und andere Informationen zu messen. Die Farbe der Linie kann geändert werden. Es können auch mehrere Titel erstellt werden. Wenn es zu dünn ist, können Sie die Vergrößerungsglasfunktion verwenden.

【Color Picker anzeigen】

Ein einfaches Farbausfassungswerkzeug. Klicken Sie auf die Maus, um die Farbe auszuwählen. Ich empfehle Ihnen jedoch ein weiteres Tool - meine Work Toolbox - Colorpic, was in den Entwicklerwerkzeugen zu einfach ist.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

Es wird definitiv blutige Stürme in der Welt verursachen (danke Xiaoqi, dass ich mich an diese Idiom erinnert habe, die ich plötzlich vergessen habe, leider, weil ich in letzter Zeit weniger neueste Kampfkunstromane gelesen habe. In naher Zukunft wird unzählige Kong Yiji sicherlich produziert.

【Html】

Überprüfen Sie den HTML -Code der Seite. Diese Seite wird an das HTML -Verifizierungstool von W3C gesendet und ein Überprüfungsbericht wird erhalten.

【CSS】

Überprüfen Sie den CSS -Code der Seite. Diese Seite wird an das CSS -Verifizierungstool von W3C gesendet und ein Überprüfungsbericht wird erhalten.

【Quelle】

Überprüfen Sie den Quelldateicode der Seite. Diese Seite wird an das Verifizierungstool feedvalidator.org gesendet und ein Überprüfungsbericht wird erhalten.

【Link】

Überprüfen Sie den Link zur Seite. Diese Seite wird an das Bestätigungswerkzeug von W3C gesendet und ein Überprüfungsbericht wird erhalten.

【Lokale HTML】

Öffnen Sie das HTML -Verifizierungstool von W3C, um die lokale Seite zu überprüfen.

【Lokale CSS】

Öffnen Sie das CSS -Verifizierungstool von W3C, um die lokale Seite zu überprüfen.

【Zugriffsfunktionen】 WCAG -Liste

Überprüfen Sie die WCAG der Seite (Webinhaltsbericht auf der Barrierefreiheit). Diese Seite wird an das Verifizierungstool von contentQuality.com gesendet und ein Überprüfungsbericht wird erstellt.

Liste der [Zugriffsfunktionen]

Überprüfen Sie die Standards der Seite 508. Diese Seite wird an das Verifizierungstool von contentQuality.com gesendet und ein Überprüfungsbericht wird erstellt.

【Mehrere Überprüfungen】

Überprüfen Sie die Seite gleichzeitig, um mehrere Spezifikationen zu überprüfen.

In Bezug auf die Seitenüberprüfung möchte ich ein paar Wörter sagen: Muss die Seite die Überprüfung bestehen, bevor sie gestartet werden kann? Ich persönlich habe das Gefühl, dass es völlig unnötig ist. Wenn Sie Student sind, liegen Sie im Elfenbeinturm. Sie können Ihre Seite jederzeit werfen, da Sie der Kunde sind und nur Zeit haben. Es besteht jedoch keine Notwendigkeit, wertvolle Projektressourcen für einen Pass für kommerzielle Projekte zu verschwenden. Da sich kein Kunde um Sie kümmert, wurde die Seite, die ich gemacht habe, von W3C in vielen Aspekten überprüft. Wenn sich ein Kunde wirklich interessiert, kann ich nur sagen, dass ich Ihre Fähigkeit zu täuschen habe.

Dieser Artikel hat kurz die verschiedenen Menüs der Entwicklerwerkzeuge erläutert. Ich glaube, dass jeder dieses leistungsstarke Werkzeug leicht verwenden kann.

Aber wir haben die leistungsstärkeren Funktionen überhaupt nicht erwähnt. Alles, bitte freuen Sie sich auf unseren nächsten Artikel. Im nächsten Artikel werden wir die Verwendung von JavaScript -Debugging, Browsermodus, Textmodus und anderen Funktionen ausführlich erläutern.