Page Inspector (Visual Studio)
Seitenprüfung ist ein Webentwicklungstool mit einem integrierten Browser und Browsertools. Der Browser rendert eine Webseite (HTML, Web Forms, ASP.NET MVC oder Web Pages) direkt in der Visual Studio-IDE. Der Einsatz des Browsers in der IDE macht es möglich, die gerenderte Ausgabe und den Quellcode nebeneinander anzuzeigen. Wenn Sie die Prüffunktion der Seitenprüfung verwenden, um ein beliebiges Element im integrierten Browser der Seitenprüfung auszuwählen, werden die Quelle des Elements und die zugehörigen Cascading Stylesheets (CSS) hervorgehoben. Diese Funktion unterstützt die Suche und Korrektur von HTML- und CSS-Codefehlern, die sonst schwer zu finden sind. Die Seitenprüfung verfügt auch über Browsertools, die Sie direkt innerhalb der Visual Studio-Umgebung verwenden können.
Voraussetzungen
Erforderliche Komponenten für die Seitenprüfung:
Visual Studio 2012.
Das Framework .NET Framework 4.5
Eine Webanwendung, die .NET Framework 4 oder höher als Zielframework verwendet.
Internet Explorer 9 oder höher für vollständige Funktionalität (Seitenprüfung hostet die aktuelle Version von Internet Explorer in Visual Studio).
JavaScript muss in Internet Explorer aktiviert sein. Weitere Informationen finden Sie unter Aktivieren von JavaScript in einem Webbrowser.
Weitere Informationen finden Sie unter Fehlermeldungen der Seitenprüfung.
Grundlegende Aufgaben
Aufgabe |
Vorgehensweise |
|---|---|
Anzeigen eines Projekts oder einer Projektdatei in der Seitenprüfung |
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt oder die Projektdatei, und wählen Sie im Kontextmenü In Seitenprüfung anzeigen aus. |
Ausführen eines Projekts und Anzeige in der Seitenprüfung |
Wählen Sie im Projektmappen-Explorer das Projekt aus. Wählen Sie im Visual Studio-Menü aus der Browser-Dropdownliste Seitenprüfung aus, und klicken Sie dann auf den grünen Pfeil, um das Projekt auszuführen. |
Zuordnen von Elementen zur ihrer Position im Quellcode |
Klicken Sie im Toolbereich der Seitenprüfung auf Prüfen. Bewegen Sie den Mauszeiger über ein Element im Browser der Seitenprüfung. Das entsprechende Markup wird in der Quelldatei und in den Bereichen HTML und Formatvorlagen hervorgehoben. |
Suchen der Quelle einer CSS-Regel |
Klicken Sie in den Bereichen Formvorlagen oder Formatvorlagen verfolgen auf eine CSS-Regel. Die Regel wird in der Stylesheetdatei in der Quelle hervorgehoben. |
Speichern der Änderungen in der Quelldatei und Aktualisieren des Browsers in der Seitenprüfung |
Drücken Sie STRG+ALT+EINGABE, oder klicken Sie auf die Update-Leiste. |
Festlegen der Seitenprüfung als Standardbrowser für das Debuggen |
Wählen Sie im Visual Studio-Menü aus der Browser-Dropdownliste die Option Browserauswahl aus. Wählen Sie im Dialogfeld Browserauswahl die Option Seitenprüfung, und wählen Sie dann Als Standard festlegen aus. |
Festlegen der Seitenprüfung als einer von mehreren Browsern für das Debuggen |
Sie können die Seitenprüfung als einen von mehreren Browsern festlegen, die durch Drücken von F5 oder STRG+F5 gleichzeitig gestartet werden können. Weitere Informationen finden Sie im Abschnitt zur Unterstützung mehrerer Browser unter ASP.NET 5 and Visual Studio 2015. |
Lernressourcen
Seitenprüfung für Visual Studio (MSDN-Blog)
Seitenprüfung – Einführung (Video)
Verwenden der Seitenprüfung in ASP.NET MVC (Lernprogramm)
Verwenden der Seitenprüfung in ASP.NET-Web Forms (Lernprogramm)
Effizienztools für Webentwickler in Visual Studio 2012 (Video)
Benutzeroberflächenelemente
Prüfen
Über die Schaltfläche Prüfen können Sie Elemente problemlos wieder ihrer Position im Quellcode zuordnen.
Um die Seitenprüfung in den Überprüfungsmodus zu schalten, klicken Sie im Toolbereich der Seitenprüfung auf die Schaltfläche Prüfen. Wenn Sie den Mauszeiger im Überprüfungsmodus auf einen Teil der gerenderten Seite bewegen, wird das entsprechende Quellmarkup oder der Code hervorgehoben. Zusätzlich wird die entsprechende Quelldatei im Projektmappen-Explorer hervorgehoben. Wenn Sie das Markup dagegen in der Quelle auswählen, wird die entsprechende Ausgabe automatisch im Browser der Seitenprüfung hervorgehoben. Weitere Informationen finden Sie unter Verwenden der Seitenprüfung in ASP.NET MVC oder Verwenden der Seitenprüfung in ASP.NET-Web Forms.
Hinweis
Die Schaltfläche Prüfen ist eine Umschalttaste.Bei aktiviertem Überprüfungsmodus ist die Schaltfläche Prüfen von einer dünnen gepunkteten blauen Linie umgeben.
Die übrigen Benutzeroberflächenelemente in unteren Bereich der Seitenprüfung sind Browsertools, deren Funktionsweise vergleichbar mit den F12-Tools in Internet Explorer ist. Weitere Informationen über die F12-Tools in Internet Explorer finden Sie unter Verwenden der Entwicklertools (F12) zum Debuggen von HTML und CSS.
HTML
Die HTML-Bereichsansicht enthält eine Strukturansicht (DOM-Struktur) der aktuellen Seite, wie sie vom Browser der Seitenprüfung im Arbeitsspeicher abgebildet wird. Sie können direkt mithilfe der Maus oder Tastatur in der Struktur navigieren, Attribute anzeigen und Werte zu Testzwecken ändern. Sie können die Eigenschaften eines Elements in der DOM-Struktur erweitern oder reduzieren, indem Sie auf den kleinen Pfeil neben jedem übergeordneten Element klicken.
Während Sie den Mauszeiger bei aktiviertem Überprüfungsmodus im Browser der Seitenprüfung über die Seite bewegen, wird das Markup des ausgewählten Elements sowohl im Bereich HTML als auch im Quellmarkup hervorgehoben.
Im Bereich HTML können Sie Teständerungen an DOM-Elementattributen vornehmen und die Änderungen sofort im Browser wiedergeben. Doppelklicken Sie im Bereich HTML auf eine beliebige Eigenschaft oder ein beliebiges Attribut, die bzw. das Sie bearbeiten möchten. Zum Hinzufügen eines Attributs klicken Sie mit der rechten Maustaste auf ein Element und wählen entweder Attribut hinzufügen aus oder verwenden den Bereich Attribute. Diese Änderungen werden nicht beibehalten, und die ursprünglichen Quelldateien bleiben unverändert. Da das ausgewählte Markup in der Quelldatei ebenfalls hervorgehoben wird, ist einfach zu erkennen, wo sich die Quelle befindet, um Änderungen vorzunehmen und diese zu speichern.
Wenn Sie eine Quelldatei bearbeiten, wird die Update-Leiste in der Seitenprüfung angezeigt, und Sie werden aufgefordert, STRG+ALT+EINGABE zu drücken (oder auf die Leiste zu klicken) um die vorgenommenen Änderungen zu speichern und die Seite im Browser der Seitenprüfung zu aktualisieren.
Kontextmenüoptionen im Bereich "HTML"
Klicken Sie mit der rechten Maustaste auf ein Element im Bereich HTML, um auf die folgenden Kontextmenüoptionen zuzugreifen.
Menüelement |
Zweck |
|---|---|
Attribut hinzufügen |
Fügt einem Tag oder einem Element ein neues Attribut hinzu. |
Kopieren |
Kopiert das Tag und die Attribute in die Zwischenablage. |
InnerHTML kopieren |
Kopiert den InnerHTML-Inhalt eines Elements, z. B. untergeordnete(n) Text, Elemente und Attribute, in die Zwischenablage. |
OuterHTML kopieren |
Kopiert den OuterHTML-Inhalt eines Elements, z. B. untergeordnete(n) Text, Elemente und Attribute, in die Zwischenablage. |
Weitere Informationen finden Sie unter Verwenden der Seitenprüfung in ASP.NET MVC oder Verwenden der Seitenprüfung in ASP.NET-Web Forms.
Formatvorlagen
Im Bereich Formatvorlagen werden die Regeln und Formatvorlagen für ein Element angezeigt, das Sie in der Strukturansicht auswählen. Es wird nach den hierarchischen CSS-Regeln gruppiert und enthält geerbte und überschriebene Attribute. Die Regel am Anfang der Liste ist die erste, die auf das ausgewählte Element angewendet wird. Die Regel am Ende ist diejenige, die aktuell die Stileigenschaften eines ausgewählten Elements definiert.
Um Änderungen an CSS zu testen, können Sie die CSS-Eigenschaften im Bereich Formatvorlagen ändern. Die Änderungen werden sofort im Browser angezeigt. Doppelklicken Sie auf die Eigenschaftswerte, um sie zu bearbeiten. Sie können das Kontrollkästchen neben einer Eigenschaft deaktivieren und wieder aktivieren, um zu überprüfen, wie sich das Vorhandensein bzw. Fehlen der Eigenschaft auf die gerenderte Seite auswirkt. Diese Änderungen werden nicht beibehalten, und die ursprünglichen Quelldateien bleiben unverändert. Weitere Informationen finden Sie im Abschnitt "Vorschau von CSS-Änderungen im Fenster 'Formatvorlagen'" in Verwenden der Seitenprüfung in ASP.NET MVC oder Verwenden der Seitenprüfung in ASP.NET-Web Forms.
Um eine Änderung am Quellcode vorzunehmen, klicken Sie im Bereich Formatvorlagen oder Formatvorlagen verfolgen auf eine CSS-Regel. Die Seitenprüfung öffnet die CSS-Datei, in der die Regel definiert ist, und wählt die vollständige Regel für Sie aus. Wenn Sie die Quelle bearbeiten, wird die Update-Leiste in der Seitenprüfung angezeigt, und Sie werden aufgefordert, STRG+ALT+EINGABE zu drücken (oder auf die Leiste zu klicken), um die vorgenommenen Änderungen zu speichern und die Seite im Browser der Seitenprüfung zu aktualisieren.
Kontextmenüoptionen im Bereich "Formatvorlagen"
Klicken Sie mit der rechten Maustaste auf ein Element im Bereich Formatvorlagen, um auf die folgenden Kontextmenüoptionen zuzugreifen.
Menüelement |
Zweck |
|---|---|
Neue Regel hinzufügen |
Fügt eine CSS-Regel hinzu. |
Neue Eigenschaft hinzufügen |
Fügt eine CSS-Eigenschaft hinzu. |
Element entfernen |
Entfernt das ausgewählte Element. |
Kopieren |
Kopiert das ausgewählte Element. |
CSS-Regel kopieren |
Kopiert die ausgewählte CSS-Regel. |
CSS-Eigenschaft kopieren |
Kopiert die ausgewählte CSS-Eigenschaft. |
Formatvorlagen verfolgen
Im Bereich Formatvorlagen verfolgen werden die gleichen Informationen wie im Bereich Formatvorlagen angezeigt, allerdings ist der Bereich nach Eigenschaften in alphabetischer Reihenfolge gruppiert und nicht nach Regeln. Möglicherweise ziehen Sie den Bereich Formatvorlagen verfolgen dem Bereich Formatvorlagen bei der Problembehandlung vor, da Sie in vielen Fällen den Namen der CSS-Eigenschaft, aber nicht das übergeordnete Element kennen.
Layout
Im Bereich Layout wird das Verschachtelungsmodell eines ausgewählten Elements angezeigt.
Um das Verschachtelungsmodell für ein Element anzuzeigen, klicken Sie auf die Registerkarte Layout und klicken dann auf die Schaltfläche Prüfen. Bewegen Sie den Mauszeiger über das Element im Browser, oder klicken Sie im Bereich HTML auf ein Element, um es auszuwählen. Im Bereich Layout werden die genaue Größe des ausgewählten Elements sowie Offset, Außenabstand, Innenabstand und Rahmenstärke angezeigt.
Sie können den Bereich Layout verwenden, um Teständerungen vorzunehmen. Um eine Vorschau der Änderung anzuzeigen, doppelklicken Sie im Bereich Layout auf einen Pixelwert und bearbeiten den Wert. Die Änderungen werden sofort im Browser angezeigt. Diese Änderungen werden nicht beibehalten, und die ursprünglichen Quelldateien bleiben unverändert.
Attribute
Im Bereich Attribute werden die Attribute für das derzeit ausgewählte Element angezeigt.
Sie können den Bereich Attribute verwenden, um Teständerungen vorzunehmen. Doppelklicken Sie auf einen Attributwert, um ihn zu bearbeiten. Sie können die Schaltflächen Attribut hinzufügen und Attribut entfernen verwenden, um Attribute vorübergehend hinzuzufügen oder zu entfernen. Die vorgenommenen Änderungen werden sofort im Browser der Seitenprüfung im Bereich HTML angezeigt. Diese Änderungen werden nicht beibehalten, und die ursprünglichen Quelldateien bleiben unverändert.
Dateien
Die Registerkarte Dateien in den Tools der Seitenprüfung enthält Links zu allen Quelldateien, aus denen die aktuelle Seite besteht. Diese Funktion ist hilfreich, da alle zugehörigen Dateien auf einen Blick angezeigt werden. Das ist insbesondere dann von Vorteil, wenn Sie mit Teilansichten und Vorlagen arbeiten oder wenn Sie Anwendungen wie Orchard oder Umbraco einsetzen.
Um eine der Dateien im Visual Studio-Editor zu öffnen, klicken Sie auf den entsprechenden Link.
Die Update-Leiste
Wenn Sie den Quellcode für die Seite ändern, wird eine Update-Leiste oben im Browser der Seitenprüfung angezeigt. Über die Update-Leiste werden Sie aufgefordert, STRG+ALT-EINGABE zu drücken oder auf die Leiste zu klicken, um die Änderungen zu speichern und den Browser zu aktualisieren.