Verwenden der Seitenprüfung in Visual Studio 2012

von Web Camps Team

In dieser praktischen Übung entdecken Sie ein neues Tool zum Suchen und Beheben von Webseitenproblemen in Visual Studio – dem Seitenprüfung.

Seitenprüfung ist ein neues Tool, das Browserdiagnosetools 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 in 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 ganz einfach dekompilieren, Seiten schnell von Grund auf erstellen und Probleme schnell diagnostizieren.

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

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 Bereitstellungs- und Cachereinigung jedes Mal, wenn Sie ein Problem reproduzieren möchten.

Seitenprüfung eine Lücke bei der Webentwicklung zwischen dem Client (Browsertools) und dem Server (ASP.NET und Quellcode) überbrücken, indem das Beste aus beiden Welten kombiniert wird.

Mit Seitenprüfung können Sie sehen, welche Elemente in den Quelldateien (einschließlich serverseitigem Code) das HTML-Markup erstellt 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.

Diese praktische Übung führt Sie durch die Seitenprüfung Features und zeigt Ihnen, wie Sie diese verwenden können, um Probleme in Webanwendungen zu beheben. Dieses Labor enthält zwei Übungen mit ähnlichen Flüssen, aber für unterschiedliche Technologien. Wenn Sie ein ASP.NET MVC-Entwickler sind, führen Sie eine Übung aus. Wenn Sie WebForms-Entwickler sind, befolgen Sie übung zwei.

Diese Übung führt Sie durch die Verbesserungen und neuen Features, die zuvor beschrieben wurden, indem kleinere Änderungen auf eine Beispielwebanwendung angewendet werden, die im Quellordner bereitgestellt wird.

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

• Dekompilieren einer Website mithilfe von Seitenprüfung
• Änderungen der CSS-Formatvorlagen mit Seitenprüfung prüfen und in der Vorschau anzeigen
• Erkennen und Beheben von Problemen auf Ihren Webseiten mithilfe von Seitenprüfung

Voraussetzungen

Sie müssen über die folgenden Elemente verfügen, um diese Übung abzuschließen:

• Microsoft Visual Studio Express 2012 für Web oder höher (lesen Sie Anhang A , um Anweisungen zur Installation zu erhalten).
• Internet Explorer 9 oder höher

Übungen

Dieses praktische Labor umfasst die folgenden Übungen:

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

Geschätzte Zeit zum Abschließen dieser Übung: 30 Minuten.

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

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

Aufgabe 1 – Erkunden von Seitenprüfung

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

1. Öffnen Sie die Begin-Lösung 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 Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie alle erforderlichen Bibliotheken beim ersten Ausführen des Projekts herunterladen, indem Sie die Paketversionen in der Datei "Packages.config" angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus dieser Übung geöffnet haben.

2. Suchen Sie in der Projektmappen-Explorer die Ansicht "Index.cshtml" im Ordner "/Views/Home", klicken Sie mit der rechten Maustaste darauf, und wählen Sie "Ansicht" in Seitenprüfung aus.

   

   Auswählen einer Datei, die in Seitenprüfung in der Vorschau angezeigt werden soll

3. Im fenster Seitenprüfung wird die /Home/Index-URL angezeigt, die der ausgewählten Quellansicht zugeordnet ist.

   

   Der erste Kontakt mit Seitenprüfung

   Das Seitenprüfung Tool ist in Ihre Visual Studio-Umgebung integriert. Der Inspektor enthält einen eingebetteten Browser zusammen mit einem leistungsfähigen 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 des 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.

4. Klicken Sie in Seitenprüfung auf die Registerkarte "Dateien".

   Alle Quelldateien, die die Indexseite erstellen, werden angezeigt. Dieses Feature hilft dabei, 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"

5. 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"

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

   

   Inspektionsmodus in Aktion

   Hinweis

   Maximieren Sie nicht das Seitenprüfung Fenster, oder Sie können die Vorschauregisterkarte mit dem Quellcode nicht sehen. Wenn Sie auf das Element in Seitenprüfung klicken, wenn es maximiert ist, wird der Quellcode der Auswahl angezeigt, aber es blendet das Seitenprüfung Fenster aus.

   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 eine direkte und schnelle Möglichkeit für den Zugriff auf den Code.

   

   Überprüfen von Elementen

7. Klicken Sie auf die Schaltfläche " Inspektionsmodus umschalten" ( ), um den Cursor zu deaktivieren.

8. Wählen Sie die HTML-Registerkarte aus, um den im Seitenprüfung Browser gerenderten HTML-Code anzuzeigen.

9. Suchen Sie im HTML-Markup das Listenelement mit dem Koala-Link, und wählen Sie es aus.

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

   

   Auswählen eines HTML-Elements auf der Seite

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

    Hinweis

    Da die Kopfzeile Teil des Websitelayouts ist, wird Seitenprüfung auch _Layout.cshtml-Datei geöffnet und das Segment des betroffenen Codes hervorgehoben.

    

    Ermitteln von Formatvorlagen und Quelldateien eines ausgewählten Elements

11. Bewegen Sie mit aktiviertem Umschaltzeiger den Mauszeiger unter dem blauen hervorgehobenen Balken, und klicken Sie auf den halben Kreis.

    

    Auswählen eines Elements

12. Suchen Sie im Bereich "Formatvorlagen" das Hintergrundbildelement unter der Gruppe ".main-content ". 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

13. Klicken Sie nun im Überprüfungsmodus auf den Text "Ihr Logo hier".

14. Suchen Sie auf der Registerkarte "Formatvorlagen " das CSS-Attribut "Schriftgrad " unter der Gruppe " .site-title ". Doppelklicken Sie auf den Attributwert, und 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

15. Klicken Sie im rechten Bereich von Seitenprüfung auf die Registerkarte "Ablaufverfolgungsarten". Dies ist eine alternative Möglichkeit, alle auf die Auswahl angewendeten Formatvorlagen anzuzeigen, sortiert nach Attributname.

    

    CSS-Formatvorlagenablaufverfolgung des ausgewählten Elements

16. Ein weiteres Feature von Seitenprüfung ist der Layoutbereich. Wählen Sie im Inspektionsmodus die Navigationsleiste aus, und klicken Sie dann im rechten Bereich auf die Registerkarte "Layout ". Die genaue Größe des ausgewählten Elements sowie deren Offset, Rand, Abstand und Rahmengröße werden angezeigt. Beachten Sie, dass Sie die Werte aus dieser Ansicht auch ändern können.

    

    Elementlayout in Seitenprüfung

Aufgabe 2 – Suchen und Beheben von Formatproblemen in der Fotogalerie

Wie würden Sie Webseitenprobleme mit früheren Versionen von Visual Studio diagnostizieren? Wahrscheinlich sind Sie mit Webdebuggingtools vertraut, die außerhalb der Visual Studio-IDE ausgeführt werden, z. B. Internet Explorer-Entwicklertools oder Firebug. Browser verstehen nur HTML, Skripting 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 hatten wahrscheinlich diese Schritte ausgeführt, wenn Sie ein Problem in Ihrer Website erkennen und beheben wollten:

1. Führen Sie die Projektmappe aus Visual Studio aus, oder stellen Sie die Seite auf dem Webserver bereit.
2. Öffnen Sie im Browser die 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 Formatvorlagenklassen verwendet.
3. Nachdem der Fehler erkannt wurde, beenden Sie den Webbrowser und den Server.
4. Löschen Sie den Browsercache.
5. Kehren Sie zu Visual Studio zurück, um einen Fix anzuwenden. Wiederholen Sie alle zu testenden Schritte.

Da es in ASP.NET MVC 4 keine echte WYSIWYG gibt, werden die meisten Stilprobleme in einer späteren Phase erkannt, nachdem die Webanwendung ausgeführt oder bereitgestellt wurde. Jetzt ist es mit Seitenprüfung 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 der Fotogalerieanwendung.

1. Suchen Sie mithilfe von Seitenprüfung die Verknüpfungen "Register" und "Anmelden" auf der linken Seite der Kopfzeile.

   Beachten Sie, dass die Links nicht an der erwarteten Stelle auf der rechten Seite angezeigt werden und wie eine Aufzählung angezeigt werden. Sie werden die Links jetzt rechtsbündig ausrichten und entsprechend umgestalten.

   

   Suchen von Register- und Anmeldelinks

2. Wenn der Überprüfungsmodus aktiviert ist, klicken Sie in der Nähe, aber nicht 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 "_Layout.cshtml". Dies sind die Stellen, an denen Sie möglicherweise zuerst suchen. Sie wurden direkt in die richtige Quelldatei eingefügt.

3. Suchen Und klicken Sie auf der Registerkarte "Formatvorlagen " auf den <Abschnitt> #login Elements, bei dem es sich um den HTML-Container für diese Links handelt.

   Beachten Sie, dass sich die #login Formatvorlage nach dem Klicken automatisch in Site.css befindet. Darüber hinaus ist der Code jetzt hervorgehoben.

   

   Auswählen der CSS-Formatvorlagen

4. Heben Sie die Kommentare des Textausrichtungs-Attributs im hervorgehobenen Code auf, indem Sie die öffnenden und schließenden Zeichen entfernen und die Site.css Datei speichern.

   Seitenprüfung ist allen verschiedenen Dateien bekannt, die die aktuelle Seite verfassen, und sie kann erkennen, wann sich eine dieser Dateien ändert. Sie werden benachrichtigt, wenn die aktuelle Seite im Browser nicht mit den Quelldateien synchronisiert ist.

5. Klicken Sie im Seitenprüfung Browser auf die Leiste unterhalb der Adressleiste, um die Seite neu zu laden.

   

   Erneutes Laden der Seite

   Die Links befinden sich jetzt rechts, sehen aber trotzdem wie eine Aufzählung aus. Nun entfernen Sie die Aufzählungszeichen und richten die Verknüpfungen horizontal aus.

   

   Seite aktualisiert

6. 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 der Formatvorlage

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

   

   Restyling der Anmeldelinks

8. Speichern Sie Style.css Datei, und klicken Sie einmal auf der Leiste unter der Adresse, um die Seite neu zu laden. Beachten Sie, dass die Verknüpfungen korrekt angezeigt werden.

   

   Links rechtsbündig ausgerichtet

9. Schließlich ändern Sie den Kopfzeilentitel. Verwenden Sie den Inspektionsmodus, um hier auf Ihren Logotext zu klicken und zum Quellcode zu gelangen, der es generiert.

10. Jetzt befinden Sie sich in _Layout.cshtml, ersetzen Sie "Ihr Logo hier" durch "Fotogalerie". Speichern und aktualisieren Sie den Seitenprüfung Browser.

    

    Zuweisen eines neuen Titels

    

    Fotogalerieseite aktualisiert

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

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

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

Aufgabe 1 – Erkunden von Seitenprüfung

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

1. Öffnen Sie die Begin-Lösung 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 schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.

      Hinweis

      Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie alle erforderlichen Bibliotheken beim ersten Ausführen des Projekts herunterladen, indem Sie die Paketversionen in der Datei "Packages.config" angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus dieser Übung geöffnet haben.

2. Suchen Sie in der Projektmappen-Explorer nach Default.aspx Seite, klicken Sie mit der rechten Maustaste darauf, und wählen Sie in Seitenprüfung "Ansicht" aus.

   

   Öffnen von Default.aspx mit Seitenprüfung

3. Im fenster Seitenprüfung werden 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 leistungsfähigen 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 des 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.

4. Klicken Sie in Seitenprüfung auf die Registerkarte "Dateien".

   Alle Quelldateien, die die gerenderte Standardseite erstellen, werden angezeigt. 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"

5. 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-Code und .aspx Quelle anzeigen.

   

   Schaltfläche "Inspektionsmodus umschalten"

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

   

   Inspektionsmodus in Aktion

   Hinweis

   Maximieren Sie nicht das Seitenprüfung Fenster, oder Sie können die Vorschauregisterkarte mit dem Quellcode nicht sehen. Wenn Sie auf das Element in Seitenprüfung klicken, wenn es maximiert ist, wird der Quellcode der Auswahl angezeigt, aber es blendet das Seitenprüfung Fenster aus.

   Wenn Sie auf Default.aspx Datei 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 für den Zugriff auf den Code.

   

   Überprüfen von Elementen

7. Klicken Sie auf die Schaltfläche "Inspektionsmodus umschalten" ( ), die sich auf Seitenprüfung Registerkarten befindet, um den Cursor zu deaktivieren.

8. Wählen Sie die HTML-Registerkarte aus, um den im Seitenprüfung Browser gerenderten HTML-Code anzuzeigen.

9. Suchen Sie im HTML-Code das Listenelement mit dem Koala-Link, und wählen Sie es aus.

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

   

   Auswählen eines HTML-Elements auf der Seite

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

    Hinweis

    da die Kopfzeile Teil des Websitelayouts ist, wird Seitenprüfung auch die Datei "Site.Master" öffnen und das betroffene Codesegment hervorheben.

    

    Ermitteln von Formatvorlagen und Quelldateien eines ausgewählten Elements

11. Bewegen Sie mit aktivierter Umschaltfläche den Mauszeiger unter der Menüleiste, und klicken Sie auf den leeren halben Kreis.

    

    Auswählen eines Elements

12. Suchen Sie im Bereich "Formatvorlagen" das Hintergrundbildelement unter der Gruppe ".main-content ". 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

13. Klicken Sie nun im Überprüfungsmodus auf den Text "Ihr Logo hier" .

14. Suchen Sie auf der Registerkarte "Formatvorlagen " das CSS-Attribut "Schriftgrad " unter der Gruppe " .site-title ". 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

15. Klicken Sie im rechten Bereich von Seitenprüfung auf die Registerkarte "Ablaufverfolgungsarten". Dies ist eine alternative Möglichkeit, alle auf die Auswahl angewendeten Formatvorlagen anzuzeigen, sortiert nach Attributname.

    

    CSS-Formatvorlagenablaufverfolgung des ausgewählten Elements

16. Ein weiteres Feature von Seitenprüfung ist der Layoutbereich. Wählen Sie im Inspektionsmodus die Navigationsleiste aus, und klicken Sie dann im rechten Bereich auf die Registerkarte "Layout ". Die genaue Größe des ausgewählten Elements sowie deren Offset, Rand, Abstand und Rahmengröße werden angezeigt. Beachten Sie, dass Sie die Werte aus dieser Ansicht auch ändern können.

    

    Elementlayout in Seitenprüfung

Aufgabe 2 – Suchen und Beheben von Formatproblemen in der Fotogalerie

Wie würden Sie Webseitenprobleme mit früheren Versionen von Visual Studio diagnostizieren? Wahrscheinlich sind Sie mit Webdebuggingtools vertraut, die außerhalb der Visual Studio-IDE ausgeführt werden, z. B. Internet Explorer-Entwicklertools oder Firebug. Browser verstehen nur HTML, Skripting 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 hatten wahrscheinlich diese Schritte ausgeführt, wenn Sie ein Problem in Ihrer Website erkennen und beheben wollten:

1. Führen Sie die Projektmappe aus Visual Studio aus, oder stellen Sie die Seite auf dem Webserver bereit.
2. Öffnen Sie im Browser die 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 Formatvorlagenklassen verwendet.
3. Nachdem der Fehler erkannt wurde, beenden Sie den Webbrowser und den Server.
4. Löschen Sie den Browsercache.
5. Kehren Sie zu Visual Studio zurück, um einen Fix anzuwenden. Wiederholen Sie alle zu testenden Schritte.

Da es in ASP.NET WebForms keine echte WYSIWYG gibt, werden einige Stilprobleme nach der Ausführung oder Bereitstellung in einer späteren Phase erkannt. Jetzt ist es mit Seitenprüfung 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 Fotogalerieanwendung zu beheben. In den folgenden Schritten werden Sie einige einfache Formatierungsproblem in der Kopfzeile erkennen und schnell beheben.

1. Suchen Sie mithilfe der Seitenüberprüfung das Register und die Anmeldelinks auf der linken Seite der Kopfzeile.

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

   

   Link "Anmelden" links positioniert

2. Wenn der Überprüfungsmodus aktiviert ist, wählen Sie den Link "Anmelden" aus, um den Code zu öffnen.

   Beachten Sie, dass sich der Linkquellcode in der Datei "Site.Master " befindet, nicht auf der Seite Default.aspx, die an erster Stelle angezeigt wird. Sie wurden direkt in die richtige Quelldatei eingefügt.

3. Suchen Und klicken Sie auf der Registerkarte "Formatvorlagen " auf den <Abschnitt> #login Elements, bei dem es sich um den HTML-Container für diese Links handelt.

   Beachten Sie, dass sich die #login Formatvorlage nach dem Klicken automatisch in Site.css befindet. Darüber hinaus ist der Code jetzt hervorgehoben.

   

   Auswählen der CSS-Formatvorlagen

4. Heben Sie die Kommentare des Textausrichtungs-Attributs im hervorgehobenen Code auf, indem Sie die öffnenden und schließenden Zeichen entfernen und die Site.css Datei speichern.

   Seitenprüfung ist allen verschiedenen Dateien bekannt, die die aktuelle Seite verfassen, und sie kann erkennen, wann sich eine dieser Dateien ändert. Sie werden benachrichtigt, wenn die aktuelle Seite im Browser nicht mit den Quelldateien synchronisiert ist.

5. Klicken Sie im Seitenprüfung Browser auf die Leiste unterhalb der Adressleiste, um die Änderungen zu speichern und die Seite neu zu laden.

   

   Erneutes Laden der Seite

   Die Links befinden sich jetzt rechts, sehen aber trotzdem wie eine Aufzählung aus. Nun entfernen Sie die Aufzählungszeichen und richten die Verknüpfungen horizontal aus.

   

   Seite aktualisiert

6. 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 der Formatvorlage

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

   

   Restyling der Anmeldelinks

8. Speichern Sie Style.css Datei, und klicken Sie einmal auf der Leiste unter der Adresse, um die Seite neu zu laden. Beachten Sie, dass die Verknüpfungen korrekt angezeigt werden.

   

   Links rechtsbündig ausgerichtet

9. Schließlich ändern Sie den Kopfzeilentitel. 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

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

    

    Fotogalerieseite aktualisiert

11. Drücken Sie schließlich F5 , um die App auszuführen, um alle Änderungen wie erwartet auszuchecken.

Zusammenfassung

Wenn Sie diese Praktische Übung abschließen, haben Sie erfahren, wie Sie Seitenprüfung verwenden, um eine Vorschau Ihrer Webanwendung anzuzeigen, ohne die Website in einem Browser neu erstellen und ausführen zu müssen. Darüber hinaus haben Sie gelernt, wie Sie Fehler schnell finden und beheben können, 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 mit dem Microsoft-Webplattform Installer installieren. Die folgenden Anweisungen führen Sie durch die Schritte, die zum Installieren von Visual Studio Express 2012 für Web mit Microsoft-Webplattform Installer erforderlich sind.

1. Wechseln Sie zu [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Wenn Sie das Webplattform-Installationsprogramm bereits installiert haben, können Sie es öffnen und nach dem Produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" suchen.

2. Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.

3. Klicken Sie nach dem Öffnen des Webplattform-Installers auf "Installieren ", um das Setup zu starten.

   

   Installieren von Visual Studio Express

4. Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf "Ich stimme zu", um den Vorgang fortzusetzen.

   

   Akzeptieren der Lizenzbedingungen

5. Warten Sie, bis der Download- und Installationsprozess abgeschlossen ist.

   

   Installationsfortschritt

6. Wenn die Installation abgeschlossen ist, klicken Sie auf "Fertig stellen".

   

   Installation abgeschlossen

7. Klicken Sie auf "Beenden ", um den Webplattform-Installer zu schließen.

8. 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 VS Express für Webkachel.

   

   VS Express für Webkachel