<br />In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
Detaillierte Erklärung zur Verwendung der IE8-„Entwicklertools“ (Detaillierte Erklärung jeder Menüebene)
Die offizielle Version von IE8 wurde veröffentlicht. In diesem Artikel werden keine absurden Bewertungen vorgenommen und absurde Schlussfolgerungen gezogen, wie etwa: „Chrome kann JavaScript 15-mal besser ausführen als IE8“, „IE8s Seiten-Rendering-Geschwindigkeit ist 2,456-mal so hoch wie die von Safari“ oder „IE8s Widerstandsfähigkeit gegen rohe Gewalt ist 1,235-mal höher als die von FireFox“. Warum sollte es mich interessieren, wer besser ist als wer? Ich weiß nur, dass es für Front-End-Entwickler mit der Veröffentlichung von Windows 7 aufgrund des Marktanteils von IE8 unmöglich sein wird, zu sagen: „Machen Sie sich keine Sorgen wegen IE8, ihn wird nur von wenigen Leuten verwendet.“ Daher wird in diesem Artikel auf sehr pragmatische Weise erklärt, dass IE8 möglicherweise das einzige „Entwicklertool“ ist, mit dem sich Entwickler vertraut fühlen. Gleichzeitig werden wir einige relevante Informationen und Kenntnisse weitergeben. Legen Sie also bitte Ihre Vorurteile gegenüber IE8 ab und lesen Sie geduldig weiter. Sie haben IE8 noch nicht installiert? Wenn Sie ein Front-End-Entwickler sind, installieren Sie dies bitte. Weil die offizielle Version veröffentlicht wurde. Anders als bei früheren Betaversionen müssen wir diesmal besonders darauf achten. Laden Sie eines herunter und installieren Sie es, hier ist die Download-Adresse—— Downloadliste für die chinesische Version von IE8 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
Downloadliste der englischen Version von IE8 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 befürchten Sie, dass der IE6 oder IE7 auf Ihrem System defekt ist. Nun ja, das ist möglich. Sie können jedoch die folgenden Tools ausprobieren. Es ermöglicht die Koexistenz mehrerer IE-Versionen - IE-Lösung für die Koexistenz mehrerer Versionen - IETester
Microsofts Webentwicklungs- und Debugging-Tool SuperPreview (im Download angehängt)
Lernen Sie Entwicklertools kennen
Obwohl dieses Ding einen trendigen Namen hat, ist es nicht neu. Sein Vorgänger ist „IEdevtoolbar“. Zuvor war es jedoch lediglich ein Plug-In für den Internet Explorer. Im IE8 hat der Browser dieses Ding automatisch integriert. Es hat nicht nur einen etwas rustikalen Namen bekommen, sondern auch seine Funktionen wurden deutlich erweitert.
Die Entwicklertools finden Sie im Menü „Tools“ von IE8 oder können durch einfaches Drücken der Tastenkombination F12 aufgerufen werden.
Bevor wir es vorstellen, wollen wir darüber sprechen, was dieses Ding kann. Wenn Sie einen Browser lediglich zum Durchsuchen der Website verwenden, müssen Sie sich über den Aufbau der Seite keine Gedanken machen. Dann können Sie diese Seite, denke ich, verlassen.
Im Allgemeinen sind Entwicklertools Werkzeuge, die für Front-End-Entwickler zum Entwickeln von Seiten konzipiert sind. Bietet eine Reihe kleiner Tools, mit denen Sie Fehler in Seiten, einschließlich HTML-Code, CSS-Code und JavaScript-Code, einfach finden können. Gleichzeitig bietet er auch einige kleine Tools, die relativ nutzlos, aber dennoch nützlich sind, wie z. B. Farbauswahl, Bildschirmlineal usw.
OK, wir haben es gesehen und wissen, was es macht. Lassen Sie uns sie nacheinander in der Reihenfolge des Menüs vorstellen -
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
【Datei】Menü
【Alles abbrechen】
Alle vorherigen Vorgänge in den Entwicklertools werden abgebrochen und die Seiten- und DOM-Struktur aktualisiert.
[Internet Explorer-Quelltext anpassen]
【Versuchte Quelle】Was für ein verdammtes Substantiv. Eine populärere Art, es auszudrücken, ist: „Welcher Editor soll zum Anzeigen der Quelldatei der Webseite verwendet werden?“ Beispiel: Ich verwende EditPlus.
【aufhören】
Um Ihre Intelligenz nicht zu beleidigen, werde ich dazu nicht mehr sagen. Nun, F12 ist eine Tastenkombination für gerade und ungerade Zahlen, erwähnen Sie das nebenbei.
Klicken Sie im Menü [Suchen], um das Element auszuwählen
Die Tastenkombination Strg B hat die gleiche Wirkung wie das Klicken mit der Maustaste ICO im Bild. Die am häufigsten verwendete Funktion. Auch ein Gerade-Ungerade-Schalter. Wenn die Seite geöffnet ist und Sie mit der Maus auf ein Element auf der Seite klicken, wird das Element ausgewählt und seine DOM-Struktur, sein CSS-Stil und andere Informationen werden aufgelistet.
Beispielsweise das Bild oben. Der linke Bereich zeigt die DOM-Informationen dieses Hyperlink-Elements. Sie können das übergeordnete Element sowie die untergeordneten Elemente und Geschwisterelemente deutlich erkennen.
Der rechte Bereich zeigt die Stilinformationen des Elements. Die mit einer Linie durchgestrichenen Stile weisen darauf hin, dass der Stil nicht länger wirksam ist, da seine Priorität nicht hoch genug ist. Beim Debuggen können Sie das Kontrollkästchen davor deaktivieren. Wenn Sie es deaktivieren, wird dieser Stil zwangsweise gelöscht. Darüber hinaus können die Eigenschaften jedes Stils sofort per Mausklick geändert werden. Dadurch können Sie die Auswirkungen der geänderten Seite sofort sehen, was sehr praktisch ist.
Freunde, die FireBug in FireFox verwendet haben, werden damit sicherlich vertraut sein. Der einzige Unterschied besteht darin, dass FireBug die Stile mit niedrigerer Priorität unten anordnet, das ist alles.
Die Funktionen der Ansichten [Tracking-Stil] und [Stil] sind identisch. Beide dienen zum Anzeigen der Stilinformationen des ausgewählten Elements. Der einzige Unterschied besteht in einer Änderung der Anzeigemethode. Welche Ansicht Sie gewohnt sind, hängt von Ihren Vorlieben ab.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
In der Ansicht [Layout] können die Boxmodellinformationen des ausgewählten Elements angezeigt werden. Obwohl es mehr Informationen anzeigen kann als FireBug, bevorzuge ich immer noch die Art und Weise, wie FireBug diese mit Farbblöcken direkt auf der Seite anzeigt.
In der Ansicht [Eigenschaften] können Sie die Eigenschaftsinformationen des ausgewählten Elements anzeigen. Das Schöne ist, dass Sie Eigenschaften sofort hinzufügen oder entfernen können, wodurch Sie Ihre Seite schnell debuggen können.
Oh, richtig. Es ist zu beachten, dass es sich bei den Änderungen des Stils oder der Attribute des ausgewählten Elements in den Entwicklertools nur um eine vorübergehende Fehlerbehebung handelt und der Quellcode Ihrer Webseite nicht geändert wird.
Menü [Deaktivieren]
【Skript】
Untersagt die Verwendung von JavaScript- oder VBScript-Skripten auf der Seite. Warum es deaktivieren? Um die Robustheit der Seite zu testen. Manche Kunden, die hohe Ansprüche an die Seitengestaltung haben, fragen sich vielleicht: „Wenn der Kunde Skripte deaktiviert, kann diese Seite dann noch genutzt werden?“ Nun ja, diese Funktion dient dazu, die perversen Bedürfnisse dieser verkorksten Kunden zu testen.
Popup-Blocker
Filter für Popup-Fenster. Wird zum Testen der Art „Wie kann ich verhindern, dass mein Browser oder meine Sicherheitssoftware meine Popup-Fenster filtert.“ verwendet.
【CSS】
Das „CSS Naked Festival“ ist da! Verwenden Sie dies, um das Verhalten Ihrer Seite zu testen, wenn CSS nackt ist. Dies ist auch ein wichtiger Test, um die Robustheit und Zugänglichkeit der Seite zu überprüfen. Allerdings gibt es in China nicht viele Blinde, die auf das Internet zugreifen können.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
【Ansicht】Menü
【Klassen- und ID-Informationen】
Die Tastenkombination ist Strg+I, Umschalten zwischen geraden und ungeraden Zahlen. Nach dem Öffnen sehen Sie, dass die Seite mit dichten roten Blöcken bedeckt ist. Außerdem wird der Klassenname bzw. der ID-Name angezeigt. Ja, dies ist der Effekt der Anzeige von Klassen- und ID-Informationen. Aber mal ehrlich: Wen interessieren schon diese roten Kothaufen? Dadurch sieht die Seite nicht nur aus wie geflickte Bettlerkleidung, sondern es ist auch völlig unklar-_-b...
【Linkpfad】
Das Gleiche wie oben. Alle Hyperlinks auf der Seite werden mit roten Kästen umrahmt und ihre Linkadressen angezeigt.
【Link-Bericht】
Mithilfe der Linkberichtsfunktion der Entwicklertools können Sie einen Linkbericht für diese Seite erstellen. Enthält Informationen wie beispielsweise die Anzahl der Links, Linkadressen und ob ein neues Fenster geöffnet wird. Aber was ist der konkrete Nutzen dieses Dings? Ich weiß es auch nicht.
Registerkartenindex
Hebt alle Elemente hervor, die über ein Tabindex-Attribut verfügen. Durch das Festlegen des Tabindex-Attributs kann die Reihenfolge geändert werden, in der Webseitenelemente den Fokus erhalten.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
【Zugriffsschlüssel】
Markieren Sie alle Elemente, die ein „Accesskey-Attribut“ enthalten. Durch Festlegen des Accesskey-Attributs können Sie die Tastenkombination festlegen, mit der das Element den Fokus erhält.
[Quelldatei] „Elementquelle mit Stil“
Erstellen Sie eine Quelldatei, die den ausgewählten Elementstil, den HTML-Code und Informationen auf Webseitenebene enthält.
Damit dieser Befehl funktioniert, muss ein Element ausgewählt sein. Und die generierten Quelldateien beziehen sich nur auf die ausgewählten Elemente.
[Quelldatei] „DOM (Element)“
Die Tastenkombination ist Strg+T. Generieren Sie eine Quelldatei. Diese Quelldatei enthält nur die DOM-Strukturinformationen des ausgewählten Elements. Freunde, die FireBug verwendet haben, denken vielleicht an den Befehl „Element-HTML-Code kopieren“. Tatsächlich ist das hier dem anderen ähnlich. Der einzige Unterschied besteht darin, dass dies in einem Fenster generiert wird, während FireBug es direkt in die Zwischenablage kopiert.
[Quelldatei] „DOM (Seite)“
Tastenkombination Strg G. Generieren Sie eine Quelldatei. Diese Quelldatei enthält die DOM-Informationsstruktur der gesamten Seite. Dies ist eine sehr nervige Funktion. Ich weiß nicht, ob es sich um einen Fehler handelt, aber diese Funktion dient eigentlich dazu, „den Quellcode der Webseite anzuzeigen“. Denn der generierte Quellcode besteht nicht nur aus DOM-Informationen, sondern beinhaltet auch CSS- und Skriptinformationen.
[Quelldatei] „Originalzustand“
Dies ist eine äußerst nervige Funktion, die eigentlich nur zum „Anzeigen des Quellcodes der Webseite“ dient. Ich glaube, jeder bevorzugt es, mit der rechten Maustaste direkt auf die Webseite zu klicken.
[Übersicht] Menü
Das Menü [Umriss] ist offensichtlich ein Befehl zum Umreißen und Anzeigen der Elemente, die die Bedingungen erfüllen.
Tabellenzelle
Umrahmen Sie einfach jede Zelle des Formulars mit einer orangefarbenen Linie . Nur damit du es weißt – oh. Es stellt sich heraus, dass dies die Zelle der Tabelle ist.
【Oberfläche】
Umrahmen Sie das Formular einfach mit einer orangefarbenen Linie . Nur damit du es weißt – oh. Es stellt sich heraus, dass dies die Form ist.
[DIV-Element]
Umrahmen Sie einfach alle Div-Elemente auf der Seite mit grünen Linien . Nur damit du es weißt – oh. Es stellt sich heraus, dass dies alles Div-Elemente sind.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
【Bild】
Umrahmen Sie einfach alle Bildelemente auf der Seite mit violetten Linien . Nur damit du es weißt – oh. Es stellt sich heraus, dass dies alles IMG-Elemente sind.
Jedes Element
Dieses hier ist leistungsstärker. Sie können alle Beschriftungen anpassen und die Farbe für die Umrandung festlegen. Klicken Sie auf dieses Menü. Das folgende Dialogfeld wird angezeigt. Es ist ganz einfach. Keine weitere Erklärung.
[Positionierungselemente] - "Relativ"
Alle Elemente mit dem Stil „position:relative“ werden grün umrandet .
[Positionierungselemente] „Absolut“
Alle Elemente mit der Position „absoluter Stil“ werden schwarz umrandet .
[Positionierungselemente] - "Fest"
Alle Elemente mit dem Stil „position:static“ werden blau umrandet .
[Positionierungselemente] - "Schweben"
Alle Elemente im Float-Stil werden gelb umrandet .
【Klare Gliederung】
Wenn Ihre Seite durch Linien in verschiedenen Farben wie eine Excel-Tabelle gestaltet ist, können Sie mit diesem Befehl alle Linien löschen.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
【Bild】Menü
Offensichtlich wird dieser Befehl verwendet, um verschiedene Bilder auf der Seite zu steuern.
Bilder deaktivieren
Um Ihre Intelligenz nicht zu beleidigen, werde ich nicht darüber sprechen. Es muss lediglich erklärt werden, dass nicht nur das img-Element, sondern auch das Hintergrundbild des Elements deaktiviert wird.
【Bildgröße anzeigen】
Sehr nette Funktion. Sie können die Größe jedes Bildes schnell ermitteln, ohne die Bildeigenschaften zu überprüfen. Die Einheit ist natürlich Pixel.
[Bilddateigröße anzeigen]
Sehr nette Funktion. Sie können die Dateigröße jedes Bildes schnell ermitteln, ohne die Bildeigenschaften zu überprüfen. Die Einheit ist natürlich Bytes.
【Bildpfad anzeigen】
Sehr nette Funktion. Sie können den URL-Pfad jedes Bildes schnell ermitteln, ohne die Bildeigenschaften zu überprüfen, und Sie können ihn auch kopieren.
【Alternativen Text anzeigen】
Kann den Text des Alt-Attributs des Img-Elements anzeigen. Übrigens: Das Alt des Bildes sollte nie mit Keywords vollgestopft werden, sonst wird das schnell als SEO-Überoptimierung gewertet.
【Bildbericht anzeigen】
Erstellt einen detaillierten grafischen Bericht der geänderten Seiten. Enthält sehr detaillierte Informationen zu jedem Bild.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
Menü [Cache]
Menügruppe zur Verwaltung von Cache und Cookies. Dies wird eine sehr spannende Funktion für Entwickler sein.
【Immer vom Server aktualisieren】
Es scheint ein sehr tiefgründiger Befehl zu sein. Mit anderen Worten bedeutet es: „Deaktivieren Sie die Verwendung des Browser-Cache.“
【Browser-Cache leeren】
Tastenkombination Strg R. Dazu gibt es nicht viel zu sagen, es vereinfacht lediglich die bisherigen Bedienschritte.
Ich weiß nicht, ob Ihnen die drei Punkte nach [Browser-Cache leeren] im Menü aufgefallen sind. Dies bedeutet, dass nach dem Klicken auf dieses Menü ein Bestätigungsdialogfeld angezeigt wird.
Leeren Sie den Browser-Cache für diese Domain
Tastenkombination Strg D. Dazu gibt es nicht viel zu sagen, leeren Sie einfach den Browser-Cache unter dieser Domain.
【Cookies deaktivieren】
Es gibt nichts Gutes zu sagen. Keine Cookies mehr.
【Sitzungscookies löschen】
Löschen Sie alle Cookies aus Ihrem Browser. Ihre Foren und Communities warten wahrscheinlich darauf, dass Sie sich erneut anmelden.
Domänen-Cookies löschen
Cookies nur für diese Domain löschen.
【Cookie-Informationen anzeigen】
Informieren Sie sich über die auf dieser Seite enthaltenen Cookies. Denken Sie nicht einmal daran, Sie werden das Passwort nicht bekommen.
【Tools】Menü
Die Entwicklertools umfassen einige nützliche kleine Tools, die im Vergleich zu anderen spezialisierten Tools allerdings etwas schwach sind. Für den Notfall reicht es aber.
【Größe ändern】
Sehr nützliches kleines Werkzeug. Das Browserfenster lässt sich schnell auf die jeweilige Größe anpassen. Dadurch lässt sich die Kompatibilität der Webseitenauflösung viel einfacher testen.
【Lineal anzeigen】
Ein einfaches Linealwerkzeug. Damit können Längen, Entfernungen und andere Informationen gemessen werden. Die Farbe der Linie kann geändert werden. Es ist auch möglich, mehrere Titel anzulegen. Ist der Bereich zu klein, kann die Lupenfunktion genutzt werden.
Farbwähler anzeigen
Ein einfaches Werkzeug zur Farbauswahl. Klicken Sie mit der Maus, um eine Farbe auszuwählen. Ich empfehle dir jedoch ein anderes Tool - "My Work Toolbox - Color Picker (ColorPic)". Im Vergleich dazu ist dieses in den Entwicklertools zu einfach.
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
【Überprüfung】Menü
Das Menü wird in der Kampfkunstwelt sicherlich einen blutigen Sturm auslösen (danke, Xiaoqi, dass du mich an diese Redewendung erinnert hast, die ich plötzlich vergessen hatte. Leider liegt es vielleicht daran, dass ich in letzter Zeit nicht viele Kampfkunstromane gelesen habe. Aber in letzter Zeit scheinen mir Redewendungen wie „nach Luft schnappen“ 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-Validierungstool des W3C gesendet und es wird ein Validierungsbericht abgerufen.
【CSS】
Validieren Sie den CSS-Code der Seite. Diese Seite wird an das CSS-Validierungstool des W3C gesendet und es wird ein Validierungsbericht abgerufen.
【Quelle】
Überprüfen Sie den Quellcode der Seite. Diese Seite wird an das Validierungstool feedvalidator.org gesendet und ein Validierungsbericht wird abgerufen.
【Link】
Ein Link zur Bestätigungsseite. Diese Seite wird an das W3C-Validierungstool gesendet und es wird ein Validierungsbericht abgerufen.
【Lokales HTML】
Öffnen Sie das W3C-HTML-Validierungstool, um die lokale Seite zu validieren.
Lokales CSS
Öffnen Sie das W3C-CSS-Validierungstool, um die lokale Seite zu validieren.
【Zugänglichkeit】WCAG-Checkliste
Überprüfen Sie den WCAG (Web Content Accessibility Report) der Seite. Diese Seite wird an das Validierungstool contentquality.com gesendet und ein Validierungsbericht wird abgerufen.
[Zugänglichkeit] Checkliste zu Abschnitt 508
Überprüfen Sie, ob die Seite den Standards 508 entspricht. Diese Seite wird an das Validierungstool contentquality.com gesendet und ein Validierungsbericht wird abgerufen.
【Mehrfache Überprüfung】
Bei der simultanen Validierung wird die Seite anhand mehrerer Spezifikationen überprüft.
Zur Seitenverifizierung möchte ich zwei Dinge sagen: Muss die Seite eigentlich auch eine Verifizierung durchlaufen, bevor sie online gehen kann? Ich persönlich halte es für völlig unnötig. Wenn Sie Student sind, sitzen Sie im Elfenbeinturm. Sie können mit Ihrer Seite machen was Sie wollen, denn Sie sind der Kunde und Sie haben die Zeit. Bei kommerziellen Projekten besteht allerdings absolut keine Notwendigkeit, wertvolle Projektressourcen nur für ein „PASS“ zu verschwenden. Denn keinen Kunden wird das interessieren: „Sehen Sie, diese Seite, die ich erstellt habe, wurde in vielerlei Hinsicht vom W3C überprüft.“ Wenn es wirklich Kunden gibt, denen das wichtig ist, dann kann ich nur sagen, dass ich Ihre Fähigkeit bewundere, „herumzualbern“.
Freut euch auf die nächste Folge
In diesem Artikel wurden die verschiedenen Menüs der Entwicklertools kurz erläutert. Ich bin davon überzeugt, dass jeder dieses leistungsstarke Tool bereits problemlos nutzen kann.
Aber wir haben die leistungsstärkeren Funktionen noch nicht einmal erwähnt. Freuen Sie sich also auf unseren nächsten Artikel. Im nächsten Artikel wird die Verwendung von JavaScript-Debugging, Browsermodus, Textmodus und anderen Funktionen ausführlich erläutert.
|
