Verwenden der Seitenprüfung in Visual Studio 2012

Artikel
07/13/2023

In diesem praktischen Lab entdecken Sie ein neues Tool zum Suchen und Beheben von Webseitenproblemen in Visual Studio – das Seitenprüfung.

Seitenprüfung ist ein neues Tool, das Browser- Diagnose-Tools in Visual Studio bereitstellt und eine integrierte Benutzeroberfläche zwischen Browser, ASP.NET und Quellcode bietet. Es rendert eine Webseite (HTML, Web Forms, ASP.NET MVC oder Webseiten) direkt innerhalb der Visual Studio-IDE und ermöglicht es Ihnen, sowohl den Quellcode als auch die resultierende Ausgabe zu untersuchen. mit Seitenprüfung können Sie eine Website einfach zerlegen, Seiten schnell von Grund auf erstellen und Probleme schnell diagnostizieren.

Heutzutage verfügen wir über eine Reihe von Webframeworks, die flexible und skalierbare Websites rechtzeitig erstellen, z. B. ASP.NET MVC und WebForms. Andererseits wird es schwieriger, Probleme auf den Seiten zu finden, da die IDE die Designeransicht auf vorlagenbasierten Seiten und dynamischen Inhalten nicht unterstützt. Daher müssen diese Websites in einem Browser geöffnet werden, um zu sehen, wie sie für einen Benutzer erscheinen.

Webentwickler verwenden externe Tools, um Probleme zu finden, die regelmäßig im Browser ausgeführt werden. Anschließend kehren sie zur IDE zurück und beginnen mit der Behebung. Diese Hin- und Her-Aktivität zwischen der IDE, dem Browser und den Profilerstellungstools kann ineffizient sein und erfordert manchmal eine neue Bereitstellung und Cachereinigung, wenn Sie ein Problem reproduzieren möchten.

Seitenprüfung schließt eine Lücke in der Webentwicklung zwischen Dem Client (Browsertools) und dem Server (ASP.NET und Quellcode), indem das Beste aus beiden Welten mithilfe einer kombinierten Reihe von Features zusammengeführt wird.

Mithilfe Seitenprüfung können Sie sehen, welche Elemente in den Quelldateien (einschließlich serverseitigem Code) das HTML-Markup erzeugt haben, das im Browser gerendert werden soll. Seitenprüfung können Sie auch CSS-Eigenschaften und DOM-Elementattribute ändern, um die Änderungen sofort im Browser anzuzeigen.

Dieses praktische Lab führt Sie durch die Seitenprüfung Features und zeigt Ihnen, wie Sie damit Probleme in Webanwendungen beheben können. Dieses Lab enthält zwei Übungen mit ähnlichen Flows, aber für unterschiedliche Technologien. Wenn Sie ein ASP.NET MVC-Entwickler sind, folgen Sie der ersten Übung. Wenn Sie WebForms-Entwickler sind, befolgen Sie Übung 2.

Dieses Lab führt Sie durch die zuvor beschriebenen Verbesserungen und neuen Features, indem geringfügige Änderungen an einer Beispielwebanwendung angewendet werden, die im Ordner Quelle bereitgestellt wird.

Ziele

In diesem praktischen Lab erfahren Sie, wie Sie:

Zerlegen einer Website mithilfe von Seitenprüfung
Überprüfen und Anzeigen von CSS-Formatvorlagenänderungen mit Seitenprüfung
Erkennen und Beheben von Problemen auf Ihren Webseiten mithilfe von Seitenprüfung

Voraussetzungen

Sie müssen über die folgenden Elemente verfügen, um dieses Lab abzuschließen:

Microsoft Visual Studio Express 2012 für Web oder höher (Anweisungen zur Installation finden Sie in Anhang A).
Internet Explorer 9 oder höher

Übungen

Dieses praktische Lab umfasst die folgenden Übungen:

Übung 1: Verwenden von Seitenprüfung in ASP.NET MVC-Projekten
Übung 2: Verwenden von Seitenprüfung in WebForms-Projekten

Hinweis

Jede Übung wird von einer Startlösung begleitet, die sich im Ordner Begin der Übung befindet, mit der Sie jede Übung unabhängig von den anderen ausführen können. Im Quellcode für eine Übung finden Sie auch einen Ordner End, der eine Visual Studio-Projektmappe mit dem Code enthält, der sich aus dem Ausführen der Schritte in der entsprechenden Übung ergibt. Sie können diese Lösungen als Leitfaden verwenden, wenn Sie zusätzliche Hilfe benötigen, während Sie dieses praktische Lab durchlaufen.

Geschätzte Zeit zum Abschließen dieses Labs: 30 Minuten.

Übung 1: Verwenden von Seitenprüfung in ASP.NET MVC-Projekten

In dieser Übung erfahren Sie, wie Sie eine Vorschau anzeigen und eine ASP.NET MVC 4-Lösung mithilfe von Seitenprüfung debuggen. Zunächst führen Sie eine kurze Runde durch das Tool, um die Features kennenzulernen, die den Webdebugprozess erleichtern. Anschließend arbeiten Sie in einer Webseite, die Formatierungsprobleme enthält. Sie erfahren, wie Sie Seitenprüfung verwenden, um den Quellcode zu finden, der das Problem generiert, und es zu beheben.

Aufgabe 1: Untersuchen Seitenprüfung

In dieser Aufgabe erfahren Sie, wie Sie die Seitenprüfung im Kontext eines ASP.NET MVC 4-Projekts verwenden, das eine Fotogalerie zeigt.

Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex1-MVC4/Begin/.
1. Sie müssen einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.
2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.
3. Erstellen Sie schließlich die Projektmappe, indem Sie auf Projektmappe | erstellen klicken.
  
  Hinweis
  
  Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt bereitstellen müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie bei der ersten Ausführung des Projekts alle erforderlichen Bibliotheken herunterladen, indem Sie die Paketversionen in der Packages.config-Datei angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.
Suchen Sie im Projektmappen-Explorer unter dem Projektordner /Views/Home nach der Ansicht Index.cshtml, klicken Sie mit der rechten Maustaste darauf, und wählen Sie In Seitenprüfung anzeigen aus.

Auswählen einer Datei für die Vorschau in Seitenprüfung
Im fenster Seitenprüfung wird die /Home/Index-URL angezeigt, die der ausgewählten Quellansicht zugeordnet ist.

Der erste Kontakt mit Seitenprüfung

Das tool Seitenprüfung ist in Ihre Visual Studio-Umgebung integriert. Der Inspektor enthält einen eingebetteten Browser zusammen mit einem leistungsstarken HTML-Profiler. Beachten Sie, dass Sie die Lösung nicht ausführen müssen, um zu sehen, wie Ihre Seiten aussehen.

Hinweis

Wenn die Breite von Seitenprüfung Browser kleiner als die Breite der geöffneten Seite ist, wird die Seite nicht ordnungsgemäß angezeigt. Passen Sie in diesem Fall die Breite der Seitenprüfung an.
Klicken Sie in Seitenprüfung auf die Registerkarte Dateien.

Sie sehen alle Quelldateien, die die Seite Index verfassen. Dieses Feature hilft ihnen, alle Elemente auf einen Blick zu identifizieren, insbesondere wenn Sie mit Teilansichten und Vorlagen arbeiten. Beachten Sie, dass Sie auch jede der Dateien öffnen können, wenn Sie auf die Links klicken.

Registerkarte "Dateien"
Klicken Sie auf die Schaltfläche Inspektionsmodus umschalten , die sich links neben den Registerkarten befindet.

Mit diesem Tool können Sie ein beliebiges Element der Seite auswählen und dessen HTML- und Razor-Code anzeigen.

Schaltfläche "Inspektionsmodus umschalten"
Bewegen Sie im Seitenprüfung Browser den Mauszeiger auf die Seitenelemente. Während Sie den Mauszeiger über einen beliebigen Teil der gerenderten Seite bewegen, wird der Elementtyp angezeigt, und der entsprechende Quellmarkup oder -code wird im Visual Studio-Editor hervorgehoben.

Inspektionsmodus in Aktion

Hinweis

Maximieren Sie nicht das Seitenprüfung Fensters, andernfalls wird die Vorschauregisterkarte mit dem Quellcode nicht angezeigt. Wenn Sie auf das Element in Seitenprüfung klicken, wenn es maximiert wird, wird der Quellcode der Auswahl angezeigt, aber das fenster Seitenprüfung ausgeblendet.

Wenn Sie auf die Datei Index.cshtml achten, werden Sie feststellen, dass der Teil des Quellcodes, der das ausgewählte Element generiert, hervorgehoben ist. Dieses Feature erleichtert die Bearbeitung langer Quelldateien und bietet einen direkten und schnellen Zugriff auf den Code.

Überprüfen von Elementen
Klicken Sie auf die Schaltfläche Inspektionsmodus umschalten ( ), um den Cursor zu deaktivieren.
Wählen Sie die Registerkarte HTML aus, um den html-Code anzuzeigen, der im Seitenprüfung-Browser gerendert wird.
Suchen Sie im HTML-Markup nach dem Listenelement mit dem Koala-Link, und wählen Sie es aus.

Beachten Sie, dass beim Auswählen des Codes die entsprechende Ausgabe automatisch im Browser hervorgehoben wird. Dieses Feature ist nützlich, um zu sehen, wie ein HTML-Block auf der Seite gerendert wird.

Auswählen des HTML-Elements auf der Seite
Klicken Sie auf die Schaltfläche Inspektionsmodus umschalten , um den Inspektionsmodus zu aktivieren, und klicken Sie auf die Navigationsleiste. Rechts neben dem HTML-Code wird im Bereich Formatvorlagen eine Liste mit den auf das ausgewählte Element angewendeten CSS-Formatvorlagen angezeigt.

Hinweis

Da der Header Teil des Websitelayouts ist, öffnen Seitenprüfung auch _Layout.cshtml-Datei und markieren das betroffene Codesegment.

Ermitteln von Formatvorlagen und Quelldateien eines ausgewählten Elements
Bewegen Sie den Mauszeiger bei aktiviertem Umschalter unter die blaue Leiste, und klicken Sie auf den halben Kreis.

Auswählen eines Elements
Suchen Sie im Bereich Formatvorlagen das Element hintergrundbild unter der Standard-inhaltsgruppe. Deaktivieren Sie das Hintergrundbild , und sehen Sie, was passiert. Sie werden feststellen, dass der Browser die Änderungen sofort widerspiegelt und der Kreis ausgeblendet ist.

Hinweis

Die Änderungen, die Sie auf der Registerkarte Seitenprüfung Formatvorlagen anwenden, wirken sich nicht auf das ursprüngliche Stylesheet aus. Sie können Formatvorlagen deaktivieren oder deren Werte beliebig oft ändern, sie werden jedoch nach dem Aktualisieren der Seite wiederhergestellt.

Aktivieren und Deaktivieren von CSS-Formatvorlagen
Klicken Sie nun im Überprüfungsmodus auf den Text "Ihr Logo hier".
Suchen Sie auf der Registerkarte Formatvorlagen unter der Gruppe .site-title nach dem CSS-Attribut für Schriftgrad. Doppelklicken Sie auf den Attributwert, ersetzen Sie den Wert 2,3 em durch 3 em, und drücken Sie dann die EINGABETASTE. Beachten Sie, dass der Titel größer aussieht.

Ändern von CSS-Werten im Seitenprüfung
Klicken Sie im rechten Bereich von Seitenprüfung auf die Registerkarte Ablaufverfolgungsstile. Dies ist eine alternative Möglichkeit, alle auf die Auswahl angewendeten Stile nach Attributnamen anzuzeigen.

CSS-Formatvorlagenablaufverfolgung des ausgewählten Elements
Ein weiteres Feature von Seitenprüfung ist der Layoutbereich. Wählen Sie im Überprüfungsmodus die Navigationsleiste aus, und klicken Sie dann im rechten Bereich auf die Registerkarte Layout . Sie sehen die genaue Größe des ausgewählten Elements sowie den Offset, den Rand, die Auffüllung und die Rahmengröße. Beachten Sie, dass Sie auch die Werte aus dieser Ansicht ändern können.

Elementlayout in Seitenprüfung

Aufgabe 2 : Suchen und Beheben von Stilproblemen in der Fotogalerie

Wie würden Sie Probleme mit Webseiten mit früheren Versionen von Visual Studio diagnostizieren? Sie sind wahrscheinlich mit Webdebugtools vertraut, die außerhalb der Visual Studio-IDE ausgeführt werden, z. B. Internet Explorer Developer Tools oder Firebug. Browser verstehen nur HTML, Skripterstellung und Stile, während ein zugrunde liegendes Framework den HTML-Code generiert, der gerendert wird. Aus diesem Grund müssen Sie häufig die gesamte Website bereitstellen, um zu sehen, wie Webseiten aussehen.

Sie haben wahrscheinlich die folgenden Schritte ausgeführt, als Sie ein Problem auf Ihrer Website erkennen und beheben wollten:

Führen Sie die Projektmappe in Visual Studio aus, oder stellen Sie die Seite auf dem Webserver bereit.
Öffnen Sie im Browser die von Ihnen verwendeten Entwicklertools, oder öffnen Sie einfach den Quellcode und die Formatvorlagen, und versuchen Sie, das Problem zu beheben. Um die beteiligten Dateien zu finden, hätten Sie die Features "Suchen" oder "In Dateien suchen" mit dem Namen der Formatklassen verwendet.
Sobald der Fehler erkannt wurde, beenden Sie den Webbrowser und den Server.
Löschen Sie den Browsercache.
Kehren Sie zu Visual Studio zurück, um eine Korrektur anzuwenden. Wiederholen Sie alle zu testenden Schritte.

Da in ASP.NET MVC 4 kein echtes WYSIWYG vorhanden ist, werden die meisten Stilprobleme zu einem späteren Zeitpunkt erkannt, nachdem die Webanwendung ausgeführt oder bereitgestellt wurde. Mit Seitenprüfung ist es nun möglich, eine Vorschau einer beliebigen Seite anzuzeigen, ohne die Lösung auszuführen.

In dieser Aufgabe verwenden Sie den Seiteninspektor und beheben einige Probleme mit der Fotokataloganwendung.

Suchen Sie mit Seitenprüfung links im Header nach den Links Registrieren und Anmelden.

Beachten Sie, dass die Links nicht an der erwarteten Stelle auf der rechten Seite angezeigt werden, und sie werden wie eine Aufzählung angezeigt. Sie richten nun die Links nach rechts aus und ändern sie entsprechend.

Suchen der Links "Registrieren" und "Anmelden"
Klicken Sie bei ausgewählter Option Inspektionsmodus umschalten auf den Link Registrieren, um den Code zu öffnen.

Beachten Sie, dass sich der Quellcode der Links in der Datei _LoginPartial.cshtml befindet, nicht in der Datei Index.cshtml oder im _Layout.cshtml. Dies sind die Orte, an denen Sie möglicherweise zuerst suchen. Sie wurden direkt in die richtige Quelldatei eingefügt.
Suchen Sie auf der Registerkarte Formatvorlagen nach dem <Abschnitt> #login Element, das den HTML-Container für diese Links darstellt, und klicken Sie darauf.

Beachten Sie, dass sich die #login Stils automatisch in Site.css befindet, nachdem Sie darauf geklickt haben. Darüber hinaus ist der Code jetzt hervorgehoben.

Auswählen der CSS-Formatvorlagen
Heben Sie die Auskommentierung des textbündigen Attributs im hervorgehobenen Code auf, indem Sie die öffnenden und schließenden Zeichen entfernen, und speichern Sie die Datei Site.css .

Seitenprüfung kennt alle verschiedenen Dateien, aus denen die aktuelle Seite besteht, und kann erkennen, wenn sich eine dieser Dateien ändert. Sie werden benachrichtigt, wenn die aktuelle Seite im Browser nicht mit den Quelldateien synchronisiert ist.
Klicken Sie im Seitenprüfung Browser auf die Leiste unterhalb der Adressleiste, um die Seite erneut zu laden.

Erneutes Laden der Seite

Die Links befinden sich jetzt auf der rechten Seite, sehen aber trotzdem wie eine Aufzählung aus. Nun entfernen Sie die Aufzählungszeichen und richten die Links horizontal aus.

Seite aktualisiert
Wählen Sie im Überprüfungsmodus eines der li-Elemente> aus, die< die Links "Registrieren" und "Anmelden" enthalten. Klicken Sie dann auf den <Abschnitt> #login Element, um auf Styles.css-Code zuzugreifen.

Suchen des Stils
Heben Sie in Style.css die Auskommentierung des Codes für #login li-Elemente auf . Der von Ihnen hinzugefügte Stil blendet das Aufzählungszeichen aus und zeigt die Elemente horizontal an.

Neu erstellen der Anmeldelinks
Speichern Sie die Datei Style.css , und klicken Sie einmal auf die Leiste unterhalb der Adresse, um die Seite neu zu laden. Beachten Sie, dass die Links ordnungsgemäß angezeigt werden.

Links, die auf der rechten Seite ausgerichtet sind
Schließlich ändern Sie den Headertitel. Verwenden Sie den Überprüfungsmodus, um hier auf Ihren Logotext zu klicken und zum Quellcode zu gelangen, der es generiert.
Jetzt befinden Sie sich in _Layout.cshtml, ersetzen Sie den Text "Ihr Logo hier" durch "Fotogalerie". Speichern und aktualisieren Sie den Seitenprüfung-Browser.

Zuweisen eines neuen Titels

Fotogalerieseite aktualisiert
Wählen Sie schließlich das PhotoGallery-Projekt aus, und drücken Sie F5 , um die App auszuführen. Sehen Sie sich alle Änderungen an, die wie erwartet funktionieren.

Übung 2: Verwenden Seitenprüfung in WebForms-Projekten

In dieser Übung erfahren Sie, wie Sie eine Vorschau anzeigen und eine WebForms-Lösung mithilfe von Seitenprüfung debuggen. Sie führen zunächst eine kurze Runde mit dem Tool durch, um die Seitenprüfung Features kennenzulernen, die den Webdebuggingprozess erleichtern. Anschließend arbeiten Sie in einer Webseite, die Formatierungsprobleme enthält. Sie erfahren, wie Sie Seitenprüfung verwenden, um den Quellcode zu finden, der das Problem generiert, und es zu beheben.

Aufgabe 1: Untersuchen Seitenprüfung

In dieser Aufgabe erfahren Sie, wie Sie die Seitenprüfung Features im Kontext eines WebForms-Projekts verwenden, das eine Fotogalerie zeigt.

Öffnen Sie die Begin-Projektmappe im Ordner Source/Ex2-WebForms/Begin/.
1. Sie müssen einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü Projekt , und wählen Sie NuGet-Pakete verwalten aus.
2. Klicken Sie im Dialogfeld NuGet-Pakete verwalten auf Wiederherstellen , um fehlende Pakete herunterzuladen.
3. Erstellen Sie abschließend die Projektmappe, indem Sie aufBuild Solution (Projektmappe erstellen) | klicken.
  
  Hinweis
  
  Einer der Vorteile der Verwendung von NuGet ist, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Wenn Sie mit NuGet Power Tools die Paketversionen in der Packages.config-Datei angeben, können Sie alle erforderlichen Bibliotheken herunterladen, wenn Sie das Projekt zum ersten Mal ausführen. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus diesem Lab geöffnet haben.
Suchen Sie auf der Projektmappen-Explorer nach der Seite Default.aspx, klicken Sie mit der rechten Maustaste darauf, und wählen Sie In Seitenprüfung anzeigen aus.

Öffnen von Default.aspx mit Seitenprüfung
Im Seitenprüfung Fenster wird Default.aspx angezeigt.

Anzeigen von Default.aspx in Seitenprüfung

Das Seitenprüfung-Tool ist in Ihre Visual Studio-Umgebung integriert. Der Inspektor enthält einen eingebetteten Browser zusammen mit einem leistungsstarken HTML-Profiler, der den ausgewählten Code anzeigt. Beachten Sie, dass Sie die Lösung nicht ausführen müssen, um zu sehen, wie Ihre Seiten aussehen.

Hinweis

Wenn die Breite Seitenprüfung Browsers kleiner als die Breite der geöffneten Seite ist, wird die Seite nicht ordnungsgemäß angezeigt. Passen Sie in diesem Fall die Breite des Seitenprüfung an.
Klicken Sie in Seitenprüfung auf die Registerkarte Dateien.

Sie sehen alle Quelldateien, die die gerenderte Standardseite komponieren. Dies ist ein nützliches Feature, um alle Elemente auf einen Blick zu identifizieren, insbesondere wenn Sie mit Benutzersteuerelementen und Gestaltungsvorlagen arbeiten. Beachten Sie, dass Sie auch zu den einzelnen Dateien navigieren können.

Registerkarte "Dateien"
Klicken Sie links neben den Registerkarten auf die Schaltfläche Inspektionsmodus umschalten.

Mit diesem Tool können Sie ein beliebiges Element der Seite auswählen und den HTML-Code und die ASPX-Quelle anzeigen.

Schaltfläche "Inspektionsmodus" umschalten
Bewegen Sie im Seitenprüfung Browser die Maus auf die Seitenelemente. Während Sie den Mauszeiger über einen beliebigen Teil der gerenderten Seite bewegen, wird der Elementtyp angezeigt, und der entsprechende Quellmarkup oder Code wird im Visual Studio-Editor hervorgehoben.

Inspektionsmodus in Aktion

Hinweis

Maximieren Sie nicht das Seitenprüfung Fensters, da die Vorschauregisterkarte mit dem Quellcode nicht angezeigt wird. Wenn Sie auf das Element in Seitenprüfung klicken, wenn es maximiert ist, wird der Quellcode der Auswahl angezeigt, aber das Seitenprüfung Fenster ausgeblendet.

Wenn Sie auf die Datei Default.aspx achten, werden Sie feststellen, dass der Teil des Quellcodes, der das ausgewählte Element generiert, hervorgehoben ist. Dieses Feature erleichtert die Edition langer Quelldateien und bietet eine direkte und schnelle Möglichkeit, auf den Code zuzugreifen.

Überprüfen von Elementen
Klicken Sie auf die Schaltfläche Inspektionsmodus umschalten ( ), befindet sich auf Seitenprüfung Registerkarten, um den Cursor zu deaktivieren.
Wählen Sie die Registerkarte HTML aus, um den im Seitenprüfung Browser gerenderten HTML-Code anzuzeigen.
Suchen Sie im HTML-Code nach dem Listenelement mit dem Koala-Link, und wählen Sie es aus.

Beachten Sie, dass beim Auswählen des Codes die entsprechende Ausgabe automatisch im Browser hervorgehoben wird. Dieses Feature ist nützlich, um zu sehen, wie ein HTML-Block auf der Seite gerendert wird.

Auswählen eines HTML-Elements auf der Seite
Klicken Sie auf die Schaltfläche Inspektionsmodus umschalten, um den Inspektionsmodus zu aktivieren, und klicken Sie auf die Navigationsleiste. Rechts neben dem HTML-Code wird im Bereich Formatvorlagen eine Liste mit den CSS-Formatvorlagen angezeigt, die auf das ausgewählte Element angewendet werden.

Hinweis

da der Header Teil des Websitelayouts ist, öffnen Seitenprüfung auch die Datei Site.Master und markieren das betroffene Codesegment.

Ermitteln von Formatvorlagen und Quelldateien eines ausgewählten Elements
Wenn der Zeiger der Umschalterüberprüfung aktiviert ist, bewegen Sie den Mauszeiger unter die Menüleiste, und klicken Sie auf den leeren Halbkreis.

Auswählen eines Elements
Suchen Sie im Bereich Formatvorlagen das Element hintergrundbild unter der Standard-inhaltsgruppe. Deaktivieren Sie das Hintergrundbild , und sehen Sie, was passiert. Sie werden feststellen, dass der Browser die Änderungen sofort widerspiegelt und der Kreis ausgeblendet ist.

Hinweis

Die Änderungen, die Sie auf der Registerkarte Seitenprüfung Formatvorlagen anwenden, wirken sich nicht auf das ursprüngliche Stylesheet aus. Sie können Formatvorlagen deaktivieren oder deren Werte beliebig oft ändern, sie werden jedoch nach dem Aktualisieren der Seite wiederhergestellt.

Aktivieren und Deaktivieren von CSS-Formatvorlagen
Klicken Sie nun im Überprüfungsmodus auf den Text "IhrLogo hier" .
Suchen Sie auf der Registerkarte Formatvorlagen unter der Gruppe .site-title nach dem CSS-Attribut für Schriftgrad. Doppelklicken Sie einmal auf das Attribut, um den Wert zu bearbeiten. Ersetzen Sie den Wert 2,3em durch 3em, und drücken Sie dann die EINGABETASTE. Beachten Sie, dass der Titel größer aussieht.

Ändern von CSS-Werten im Seitenprüfung
Klicken Sie im rechten Bereich von Seitenprüfung auf die Registerkarte Ablaufverfolgungsstile. Dies ist eine alternative Möglichkeit, alle auf die Auswahl angewendeten Stile nach Attributnamen anzuzeigen.

CSS-Formatvorlagenablaufverfolgung des ausgewählten Elements
Ein weiteres Feature von Seitenprüfung ist der Layoutbereich. Wählen Sie im Überprüfungsmodus die Navigationsleiste aus, und klicken Sie dann im rechten Bereich auf die Registerkarte Layout . Sie sehen die genaue Größe des ausgewählten Elements sowie den Offset, den Rand, die Auffüllung und die Rahmengröße. Beachten Sie, dass Sie auch die Werte aus dieser Ansicht ändern können.

Elementlayout in Seitenprüfung

Aufgabe 2 : Suchen und Beheben von Stilproblemen in der Fotogalerie

Sie haben wahrscheinlich die folgenden Schritte ausgeführt, als Sie ein Problem auf Ihrer Website erkennen und beheben wollten:

Führen Sie die Projektmappe in Visual Studio aus, oder stellen Sie die Seite auf dem Webserver bereit.
Öffnen Sie im Browser die von Ihnen verwendeten Entwicklertools, oder öffnen Sie einfach den Quellcode und die Formatvorlagen, und versuchen Sie, das Problem zu beheben. Um die beteiligten Dateien zu finden, hätten Sie die Features "Suchen" oder "In Dateien suchen" mit dem Namen der Formatklassen verwendet.
Sobald der Fehler erkannt wurde, beenden Sie den Webbrowser und den Server.
Löschen Sie den Browsercache.
Kehren Sie zu Visual Studio zurück, um eine Korrektur anzuwenden. Wiederholen Sie alle zu testenden Schritte.

Da in ASP.NET WebForms kein echtes WYSIWYG vorhanden ist, werden einige Stilprobleme in einer späteren Phase nach dem Ausführen oder Bereitstellen erkannt. Mit Seitenprüfung ist es nun möglich, eine Vorschau einer beliebigen Seite anzuzeigen, ohne die Lösung auszuführen.

In dieser Aufgabe verwenden Sie den Seiteninspektor, um einige Probleme der Fotokataloganwendung zu beheben. In den folgenden Schritten werden Sie ein einfaches Stylingproblem im Header erkennen und schnell beheben.

Suchen Sie mithilfe der Seitenüberprüfung auf der linken Seite der Kopfzeile nach den Links Registrieren und Anmelden.

Beachten Sie, dass der Link nicht an der erwarteten Stelle auf der rechten Seite angezeigt wird. Sie richten den Link nun rechts aus und gestalten ihn entsprechend neu.

Seite "Link anmelden"

Link "Anmelden" auf der linken Seite
Wählen Sie bei Ausgewählter Option Inspektionsmodus umschalten den Link Anmelden aus, um den zugehörigen Code zu öffnen.

Beachten Sie, dass sich der Linkquellcode in der Datei Site.Master und nicht auf der Seite Default.aspx befindet, an der Sie möglicherweise zuerst suchen. Sie wurden direkt in die richtige Quelldatei eingefügt.
Suchen Sie auf der Registerkarte Formatvorlagen den <Abschnitt> #login Element, bei dem es sich um den HTML-Container für diese Links handelt, und klicken Sie darauf.

Beachten Sie, dass sich die #login Stil automatisch in Site.css befindet, nachdem Sie darauf klicken. Darüber hinaus ist der Code jetzt hervorgehoben.

Auswählen der CSS-Formatvorlagen
Heben Sie die Auskommentierung des text-align-Attributs im hervorgehobenen Code auf, indem Sie die öffnenden und schließenden Zeichen entfernen und die Datei Site.css speichern.

Seitenprüfung kennt alle verschiedenen Dateien, aus denen die aktuelle Seite besteht, und kann erkennen, wenn sich eine dieser Dateien ändert. Sie werden benachrichtigt, wenn die aktuelle Seite im Browser nicht mit den Quelldateien synchronisiert ist.
Klicken Sie im Seitenprüfung Browser auf die Leiste unterhalb der Adressleiste, um die Änderungen zu speichern und die Seite erneut zu laden.

Erneutes Laden der Seite

Die Links befinden sich jetzt auf der rechten Seite, sehen aber weiterhin wie eine Aufzählung aus. Nun entfernen Sie die Aufzählungszeichen und richten die Verknüpfungen horizontal aus.

Seite aktualisiert
Wählen Sie im Überprüfungsmodus alle li-Elemente> aus, die< die Links "Registrieren" und "Anmelden" enthalten. Klicken Sie dann auf den <Abschnitt> #login Element, um auf Styles.css-Code zuzugreifen.

Suchen des Stils
Heben Sie in Style.css die Auskommentierung des Codes für #login li-Elemente auf. Die Formatvorlage, die Sie hinzufügen, blendet das Aufzählungszeichen aus und zeigt die Elemente horizontal an.

Umsenden der Anmeldelinks
Speichern Sie die Datei Style.css , und klicken Sie einmal auf die Leiste unterhalb der Adresse, um die Seite erneut zu laden. Beachten Sie, dass die Links ordnungsgemäß angezeigt werden.

Links, die auf der rechten Seite ausgerichtet sind
Schließlich ändern Sie den Titel der Kopfzeile. Anstatt in allen Dateien nach dem Text "Ihr Logo hier" zu suchen, verwenden Sie den Überprüfungsmodus, um auf den Text zu klicken und zum Quellcode zu gelangen, der ihn generiert.

Suchen des Websitetitels
Jetzt befinden Sie sich in Site.Master, und ersetzen Sie den Text "Ihr Logo hier" durch "Fotogalerie". Speichern und aktualisieren Sie den Seitenprüfung Browser.

Seite "Fotogalerie" aktualisiert
Drücken Sie abschließend F5 , um die App auszuführen und alle Änderungen auszuchecken, wie erwartet.

Zusammenfassung

Durch Die Durchführung dieser Hands-On Lab haben Sie gelernt, wie Sie Seitenprüfung verwenden, um eine Vorschau Ihrer Webanwendung anzuzeigen, ohne die Website neu erstellen und in einem Browser ausführen zu müssen. Darüber hinaus haben Sie gelernt, wie Sie Fehler schnell finden und beheben, indem Sie direkt von der gerenderten Ausgabe auf den Quellcode zugreifen.

Anhang A: Installieren von Visual Studio Express 2012 für Web

Sie können Microsoft Visual Studio Express 2012 für Web oder eine andere Express-Version mithilfe der Microsoft-Webplattform-Installer installieren. Die folgenden Anweisungen führen Sie durch die erforderlichen Schritte zum Installieren von Visual Studio Express 2012 für Web mithilfe von Microsoft-Webplattform-Installer.

Wechseln Sie zu [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternativ können Sie den Webplattform-Installer öffnen und nach dem Produkt "Visual Studio Express 2012 für Web mit Windows Azure SDK" suchen.
Klicken Sie auf Jetzt installieren. Wenn Sie nicht über den Webplattform-Installer verfügen, werden Sie zuerst zum Herunterladen und Installieren weitergeleitet.
Sobald der Webplattform-Installer geöffnet ist, klicken Sie auf Installieren , um das Setup zu starten.

Installieren von Visual Studio Express
Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf Ich stimme zu, um fortzufahren.

Akzeptieren der Lizenzbedingungen
Warten Sie, bis der Download- und Installationsvorgang abgeschlossen ist.

Installationsstatus
Klicken Sie nach Abschluss der Installation auf Fertig stellen.

Installation abgeschlossen
Klicken Sie auf Beenden , um den Webplattform-Installer zu schließen.
Um Visual Studio Express für Web zu öffnen, wechseln Sie zum Startbildschirm, und beginnen Sie mit dem Schreiben von "VS Express", und klicken Sie dann auf die Kachel VS Express für Web.

VS Express für Web-Kachel