Verwenden des Page Inspector in Visual Studio 2012

von Web Camps Team

In diesem praktischen Lab entdecken Sie ein neues Tool zum Suchen und Beheben von Webseitenproblemen in Visual Studio – den Seiteninspektor.

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.

Page Inspector überbrückt eine Lücke in der Webentwicklung zwischen Client (Browser-Tools) und Server (ASP.NET und Quellcode), indem es die besten Merkmale beider Welten kombiniert.

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. Page Inspector ermöglicht es Ihnen auch, CSS-Eigenschaften und DOM-Elementattribute zu ändern, damit die Änderungen sofort im Browser sichtbar werden.

Diese praktische Laborübung führt Sie durch die Features des Page Inspectors und zeigt Ihnen, wie Sie diese verwenden können, um Probleme in Webanwendungen zu beheben. Dieses Übungslabor enthält zwei Übungen mit ähnlichen Abläufen, 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.

Dieses Lab führt Sie durch die zuvor beschriebenen Verbesserungen und neuen Funktionen, indem kleinere Änderungen an einer im Quellordner bereitgestellten Beispiel-Webanwendung vorgenommen werden.

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

• Zerlegen einer Website mithilfe des Page-Inspektors
• CSS-Stiländerungen mit dem Page Inspector 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 Gegenstände verfügen, um diese Übung zu absolvieren:

• 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 des Seiteninspektors 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 – Erforschen des Seiteninspektors

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 Erstellen | Lö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 durchführen, nachdem Sie eine vorhandene Lösung aus diesem Labor geöffnet haben.

2. Suchen Sie im Projektmappen-Explorer die Ansicht Index.cshtml im Ordner /Views/Home, klicken Sie mit der rechten Maustaste darauf, und wählen Sie Im Seiteninspektor anzeigen aus.

   

   Auswählen einer Datei zur Vorschau im Seiteninspektor

3. Im Fenster "Seiteninspektor" wird die /Home/Index-URL angezeigt, die der von Ihnen ausgewählten Quellansicht zugeordnet ist.

   

   Der erste Kontakt mit dem Page Inspector

   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 Seiteninspektors an.

4. Klicken Sie auf die Registerkarte Dateien im Seiteninspektor.

   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 Page Inspector-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üfungsfenster, da sonst der Vorschau-Tab mit dem Quellcode nicht sichtbar ist. Wenn Sie bei maximierter Ansicht auf das Element im Seiteninspektor klicken, wird der Quellcode der Auswahl angezeigt, aber das Fenster des Seiteninspektors wird 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 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 HTML-Code anzuzeigen, der im Browser Page Inspector gerendert wird.

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, öffnet der Page Inspector auch die _Layout.cshtml-Datei und hebt den betroffenen Codeabschnitt hervor.

    

    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 'Page Inspector' → 'Styles' vornehmen, wirken sich nicht auf das ursprüngliche Stylesheet aus. Sie können die Stile deaktivieren oder deren Werte beliebig oft ändern, wobei sie jedoch nach dem Aktualisieren der Seite wiederhergestellt werden.

    

    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 Seiteninspektor

15. Klicken Sie im rechten Bereich des Seiten-Inspektors auf die Registerkarte "Stilverfolgung". Dies ist eine alternative Möglichkeit, alle auf die Auswahl angewendeten Formatvorlagen anzuzeigen, sortiert nach Attributname.

    

    Die CSS-Stilverfolgung des ausgewählten Elements

16. Eine weitere Funktion des Seiteninspektors 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 im Seiteninspektor

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 Lösung 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 zur Rechten ausrichten und entsprechend umgestalten.

   

   Suchen der Registrierungs- und Anmeldelinks

2. Wenn der Überprüfungsmodus aktiviert ist, klicken Sie nahe, aber nicht auf den Link "Registrieren", um dessen 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 befinden sich direkt in der korrekten Quelldatei.

3. Suchen und klicken Sie auf der Registerkarte "Formatvorlagen" auf das <Abschnitt> #login-Element, das der HTML-Container für diese Links ist.

   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. Entkommentieren Sie das Attribut text-align im hervorgehobenen Code, indem Sie die Kommentarzeichen entfernen und die Datei Site.css speichern.

   Page Inspector kennt alle verschiedenen Dateien, aus denen die aktuelle Seite besteht, und 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 Seiteninspektor-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 immer noch wie eine Aufzählungsliste 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.

   

   Den Stil finden

7. In Style.css die Kommentare für #login li Elemente entfernen. Der Stil, den Sie hinzufügen, blendet das Punktzeichen 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.

   

   Verknüpfungen 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 Sie und aktualisieren den Seiteninspektor-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. Überprüfen Sie, ob alle Änderungen wie erwartet funktionieren.

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

In dieser Übung erfahren Sie, wie Sie eine WebForms-Lösung mit dem Page Inspector in der Vorschau anzeigen und debuggen können. Sie werden zunächst eine kurze Runde mit dem Tool machen, um die Page Inspector-Funktionen kennenzulernen, die den Web-Debugging-Prozess 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 – Erforschen des Seiteninspektors

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 Erstellen | Lö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 durchführen, nachdem Sie eine vorhandene Lösung aus diesem Labor geöffnet haben.

2. Suchen Sie im Projektmappen-Explorer nach der Seite "Default.aspx", klicken Sie mit der rechten Maustaste darauf und wählen Sie "Ansicht mit Seiteninspektor".

   

   Öffnen von Default.aspx mit Page Inspector

3. Im Fenster Seiteninspektor wird Default.aspx angezeigt.

   

   Anzeigen von Default.aspx im Seiteninspektor

   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 Seiteninspektors an.

4. Klicken Sie auf die Registerkarte Dateien im Seiteninspektor.

   Alle Quelldateien, die die gerenderte Standardseite erstellen, werden angezeigt. Dies ist ein nützliches Feature, um alle Elemente auf einen Blick zu erfassen, insbesondere wenn Sie mit Benutzersteuerelementen und Master-Seiten 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üfungsfenster, da sonst der Vorschau-Tab mit dem Quellcode nicht sichtbar ist. Wenn Sie bei maximierter Ansicht auf das Element im Seiteninspektor klicken, wird der Quellcode der Auswahl angezeigt, aber das Fenster des Seiteninspektors wird ausgeblendet.

   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 in den Registerkarten des Seiteninspektors befindet, um den Cursor zu deaktivieren.

8. Wählen Sie die HTML-Registerkarte aus, um den HTML-Code anzuzeigen, der im Browser Page Inspector gerendert wird.

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

   Beachten Sie, dass bei der Auswahl des Codes die entsprechende Ausgabe im Browser 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 aktiviertem Inspektionszeiger den Mauszeiger unter die 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 'Page Inspector' → 'Styles' vornehmen, wirken sich nicht auf das ursprüngliche Stylesheet aus. Sie können die Stile deaktivieren oder deren Werte beliebig oft ändern, wobei sie jedoch nach dem Aktualisieren der Seite wiederhergestellt werden.

    

    Aktivieren und Deaktivieren von CSS-Formatvorlagen

13. Klicken Sie nun im Überprüfungsmodus auf den Text "IhrLogo hier" in der Kopfzeile.

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 Seiteninspektor

15. Klicken Sie im rechten Bereich des Seiten-Inspektors auf die Registerkarte "Stilverfolgung". Dies ist eine alternative Möglichkeit, alle auf die Auswahl angewendeten Formatvorlagen anzuzeigen, sortiert nach Attributname.

    

    Die CSS-Stilverfolgung des ausgewählten Elements

16. Eine weitere Funktion des Seiteninspektors 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 im Seiteninspektor

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 Lösung 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. Verwenden Sie die Seiteninspektion, um die Register- und die Log In-Links auf der linken Seite des Headers zu finden.

   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 das <Abschnitt> #login-Element, das der HTML-Container für diese Links ist.

   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. Entkommentieren Sie das Attribut text-align im hervorgehobenen Code, indem Sie die Kommentarzeichen entfernen und die Datei Site.css speichern.

   Page Inspector kennt alle verschiedenen Dateien, aus denen die aktuelle Seite besteht, und 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 immer noch wie eine Aufzählungsliste 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.

   

   Den Stil finden

7. In Style.css die Kommentare für #login li Elemente entfernen. Der Stil, den Sie hinzufügen, blendet das Punktzeichen 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.

   

   Verknüpfungen 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 Sie und aktualisieren den Seiteninspektor-Browser.

    

    Fotogalerieseite aktualisiert

11. Drücken Sie F5, um die App auszuführen und zu überprüfen, ob alle Änderungen wie erwartet funktionieren.

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