Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Tim Ammann
Page Inspector für Visual Studio 2012 ist ein Webentwicklungstool mit einem integrierten Browser. Wählen Sie ein beliebiges Element im integrierten Browser aus, und der Seiteninspektor hebt sofort die HTML-Quelle und das CSS des Elements hervor. Sie können jede Seite in Ihrer Anwendung durchsuchen, die Quellen des gerenderten Markups schnell finden und Browsertools direkt in der Visual Studio-Umgebung verwenden.
In diesem Lernprogramm wird gezeigt, wie Sie den Inspektionsmodus aktivieren und dann CSS-Regeln und Text in Ihrem Webprojekt schnell suchen und bearbeiten. Das Lernprogramm verwendet ein Webanwendungsprojekt, Sie können aber auch seitenprüfung für Websiteprojekte und MVC-Anwendungen verwenden.
Das Lernprogramm enthält die folgenden Abschnitte:
Verwenden des Seiteninspektors zum Anzeigen der Anwendung
Aktivieren des Inspektionsmodus
Verwenden Sie Page Inspector, um Änderungen am Markup vorzunehmen
Inspektionsmodus und HTML-Fenster
Vorschau von CSS-Änderungen im Formatvorlagenfenster
Voraussetzungen
Hinweis
Um die neueste Version von Page Inspector zu erhalten, verwenden Sie den Webplattform-Installer , um das Azure SDK für .NET 2.0 zu installieren.
Page Inspector ist im Microsoft Web Developer Tools enthalten. Die neueste Version ist 1.3. Um zu überprüfen, über welche Version Sie verfügen, führen Sie Visual Studio aus, und wählen Sie im Menü "Hilfe" die Option "Informationen zu Microsoft Visual Studio" aus.
Erstellen einer Webanwendung
Zuerst erstellen Sie eine Webanwendung, mit der Sie den Seiteninspektor verwenden. Klicken Sie in Visual Studio auf Datei>Neues Projekt. Erweitern Sie auf der linken Seite Visual C#, wählen Sie "Web" und dann ASP.NET Webanwendung aus.
Klicke auf OK.
Die Anwendung wird in der Quellansicht geöffnet.
Nachdem Sie nun über eine Anwendung verfügen, mit der Sie arbeiten können, können Sie den Seiteninspektor verwenden, um sie zu untersuchen und zu ändern.
Verwenden des Seiteninspektors zum Anzeigen der Anwendung
Als Nächstes zeigen Sie die Anwendung mit dem Seiteninspektor an. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie dann im Seiteninspektor die Option "Anzeigen" aus.
Wenn seitenprüfung zum ersten Mal gestartet wird, wird sie standardmäßig als schmales Fenster auf der linken Seite der Visual Studio-Umgebung angedockt. Lassen Sie sie links angedockt, und legen Sie sie auf eine für Sie bequeme Breite fest, oder docken Sie sie in einem der Toolbereiche oben, unten oder rechts an:
Wenn Sie das Fenster "Seitenprüfung" rückgängig machen, können Sie es außerhalb von Visual Studio oder sogar auf einem zweiten Monitor platzieren, wenn Sie über eins verfügen. Um jedoch ALT+TAB zwischen Seitenprüfung und Visual Studio zu drücken, wenn das Fenster "Seitenprüfung" aufgehoben wird, wechseln Sie zu Den Registerkarten "Extras>Optionen>Umgebung>" und "Windows", und deaktivieren Sie unter "Tab Well" das Kontrollkästchen " Unverankerte Toolfenster" immer über dem Hauptfenster:
Im oberen Bereich des Fensters 'Seitenprüfung' wird die aktuelle Seite in einem Browserfenster angezeigt. Im unteren Bereich wird die Seite im HTML-Markup auf der linken Seite und einige Registerkarten auf der rechten Seite angezeigt, mit denen Sie verschiedene Aspekte der Seite untersuchen können. Der untere Bereich ähnelt den F12-Entwicklertools in Internet Explorer. (Im Gegensatz zu den Entwicklertools können Sie die Seitenprüfung jedoch direkt in Visual Studio verwenden.)
In diesem Lernprogramm verwenden Sie den Browserbereich "Seitenprüfung" und die Registerkarten "HTML " und "Formatvorlagen ", damit Sie schnell navigieren und Änderungen an der Anwendung vornehmen können.
Aktivieren des Inspektionsmodus
Als Nächstes sehen Sie, wie der Inspektionsmodus des Seiteninspektors funktioniert. Klicken Sie im Fenster "Seitenprüfung" auf die Schaltfläche " Überprüfen ".
Um den Überprüfungsmodus in Aktion zu sehen, bewegen Sie den Mausbewegungsmodus über verschiedene Teile der Seite im Browserfenster "Seitenprüfung". Wie Sie vorgehen, ändert sich der Mauszeiger auf ein großes Pluszeichen, und das darunter liegende Element ist hervorgehoben:
Beachten Sie beim Bewegen des Mauszeigers folgendes:
Der Inhalt in der Quellansicht ändert sich, um das Markup anzuzeigen, das dem ausgewählten Element auf der Seite entspricht. Das relevante Markup ist hervorgehoben. Wenn sich die Quelle in einer anderen Datei befindet, wird diese Datei in der Quellansicht geöffnet, wobei das relevante Markup hervorgehoben ist.
Das markup, das auf der HTML-Registerkarte im Seitenprüfungstool angezeigt wird, ändert sich auch so, dass es dem ausgewählten Element auf der Seite entspricht. Auf der Registerkarte "HTML " wird das entsprechende Markup skizziert.
Auf der Registerkarte "Formatvorlagen " werden die CSS-Regeln angezeigt, die für die aktuelle Auswahl relevant sind.
Seiteninspektor zum Ändern des Markups verwenden
Jetzt erfahren Sie, wie Sie mithilfe des Seitenprüfungselements Markups oder Texts suchen und änderungen vornehmen können, deren Position möglicherweise nicht sofort offensichtlich ist.
Platzieren Sie den Seiteninspektor im Inspektionsmodus, und scrollen Sie dann nach unten auf der Startseite.
Sobald Sie den Fußzeilenbereich eingeben, öffnet der Seiteninspektor die Layoutdatei "Site.Master " in der Quellansicht auf einer temporären Registerkarte rechts neben den anderen Registerkarten und hebt den Abschnitt der ausgewählten Gestaltungsvorlage hervor. Hier erfahren Sie, wie der Seiteninspektor Inhalte auf einer Seite finden und anzeigen kann, die möglicherweise aus einer anderen Datei stammen als die, die Sie ursprünglich geöffnet haben.
Bewegen Sie im Browserfenster "Seitenprüfung" den Mauszeiger über die Linie mit dem Copyrighthinweis .
Auf der Seite "Site.Master " wird die entsprechende Zeile hervorgehoben.
Fügen Sie am Ende der Zeile in der Datei "Site.Master " Text hinzu.
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application Rocks!</P>
Drücken Sie nun Strg+Alt+Eingabetaste; oder klicken Sie auf die Aktualisierungsleiste, um die Ergebnisse im Browserfenster des Seiteninspektors anzuzeigen.
Möglicherweise haben Sie gedacht, dass sich die Fußzeile auf der Default.aspx Seite befand, sich aber in der Gestaltungsvorlage befand, und der Seiteninspektor fand sie für Sie.
Inspektionsmodus und HTML-Fenster
Im nächsten Schritt schauen Sie sich das HTML-Fenster an und wie die Elemente für Sie zugeordnet werden.
Seitenprüfung im Inspektionsmodus platzieren.
Klicken Sie auf den oberen Teil der Seite, der "Ihr Logo hier" sagt. Sie untersuchen ein bestimmtes Element genauer, sodass sich die Anzeige im Browserfenster nicht mehr ändert, während Sie den Mauszeiger bewegen.
Bewegen Sie nun den Mauszeiger auf das HTML-Fenster . Während Sie den Mauszeiger bewegen, umrahmt der Page Inspector das Element im HTML-Fenster und hebt das entsprechende Element im Browserfenster hervor.
Wie zuvor öffnet der Seiteninspektor die Site.Master-Datei für Sie auf einer temporären Registerkarte. Klicken Sie auf die Registerkarte "Site.Master", und das entsprechende Markup wird im <Kopfzeilenabschnitt> hervorgehoben:
CSS-Änderungen im Stilfenster anzeigen
Als Nächstes sehen Sie, wie Sie das Fenster " Seitenprüfungsformatvorlagen " verwenden können, um Änderungen an CSS in der Vorschau anzuzeigen.
Klicken Sie auf die Schaltfläche " Überprüfen ", um den Seiteninspektor im Inspektionsmodus zu platzieren.
Bewegen Sie im Browserfenster Seitenprüfung den Mauszeiger über den Abschnitt "Startseite", bis die Bezeichnung "div.content-wrapper" angezeigt wird.
Klicken Sie einmal in den Abschnitt "div.content-wrapper", und bewegen Sie dann den Mauszeiger in das Stilfenster. Deaktivieren Sie unter der .content-wrapper-Klassenauswahl das Kontrollkästchen für die Hintergrundfarbe-Eigenschaft, und aktivieren Sie es.
Beachten Sie, wie die Änderungsvorschau sofort im Seiteninspektor-Browserfenster angezeigt wird.
Aktivieren Sie das Kontrollkästchen erneut, doppelklicken Sie dann auf den Eigenschaftswert, und ändern Sie es in red. Die Änderung wird sofort angezeigt:
Das Fenster "Formatvorlagen" erleichtert das Testen und Anzeigen einer Vorschau von CSS-Änderungen, bevor Sie die Änderungen an dem Stylesheet selbst übernehmen.
Automatische CSS-Synchronisierung
Hinweis
Für dieses Feature ist Version 1.3 von Seitenprüfung erforderlich.
Mit der Funktion zur automatischen CSS-Synchronisierung können Sie eine CSS-Datei direkt bearbeiten und die Änderungen sofort im Seiteninspektor-Browser sehen.
Klicken Sie auf "Prüfen", um den Seiteninspektor in den Inspektionsmodus zu versetzen.
Bewegen Sie im Page Inspector-Browser den Mauszeiger über den Abschnitt "Startseite", bis das Label div.content-wrapper angezeigt wird. Klicken Sie einmal, um dieses Element auszuwählen.
Im Fenster "Formatvorlagen " werden alle CSS-Regeln für dieses Element angezeigt. Scrollen Sie nach unten, um den .featured .content-wrapper-Klassenselektor zu finden. Klicken Sie auf ".featured .content-wrapper". Seiteninspektor öffnet die CSS-Datei, die diese Formatvorlage definiert (Site.css), und hebt die entsprechende CSS-Formatvorlage hervor.
**
Ändern Sie nun den Wert für background-color zu "rot". Die Änderung wird sofort im Seiteninspektor-Browser angezeigt.
Verwenden der CSS-Farbauswahl
Als Nächstes erfahren Sie, wie Sie mithilfe der Seitenprüfung schnell das CSS für hervorgehobenen Text in der Standardanwendung finden und ändern können. In diesem Beispiel haben Sie entschieden, dass Sie die blaue Hervorhebung nicht mögen und sie in eine andere Farbe ändern möchten.
Klicken Sie auf die Schaltfläche "Überprüfen ".
Bewegen Sie im Browserfenster "Seitenprüfung" den Mauszeiger über den hervorgehobenen Text "Videos, Lernprogramme und Beispiele", sodass die CSS-Beschriftung "Markieren" angezeigt wird.
Klicken Sie auf den Text, um ihn auszuwählen. Die entsprechende CSS-Markierungsauswahl wird unten im Fenster "Formatvorlagen " angezeigt.
Klicken Sie auf die Markierungsauswahl. Dadurch wird die Site.css Datei für die Webanwendung geöffnet. Klicken Sie auf die Registerkarte Site.css, und die entsprechende CSS für die Auswahl ist hervorgehoben:
Wählen Sie die Linie mit der Hintergrundfarbe-Eigenschaft aus, und entfernen Sie sie.
Sie verwenden nun die neue Css-Farbauswahl für Visual Studio 2012, um eine neue Farbe für die Eigenschaft "Hintergrundfarbe markieren " auszuwählen.
Verwenden der Visual Studio 2012-CSS-Farbauswahl
Der CSS-Editor in Visual Studio 2012 verfügt über eine Farbauswahl, die das Auswählen und Einfügen von Farben erleichtert. Es verfügt über eine einfache Farbleiste und eine "Pop-down"-Auswahl, die eine feinere Steuerung bietet.
Die Farbauswahl enthält eine Standardpalette von Farben, unterstützt Standardfarbnamen, Hashcodes, RGB-, RGBA-, HSL- und HSLA-Farben und verwaltet eine Liste der Farben, die Sie zuletzt im Dokument verwendet haben.
Geben Sie in der Zeile, in der die Hintergrundfarbe-Eigenschaft war, "bc" ein, und drücken Sie einmal den Pfeil nach unten.
Wenn Sie das erste Zeichen jedes Worts in eine durch Bindestrich getrennte Eigenschaft wie "background-color" eingeben, filtert IntelliSense die Liste so, dass nur die eigenschaften angezeigt werden, die übereinstimmen:
Geben Sie nun einen Doppelpunkt ein. Wenn Sie dies tun, wird der vollständige Name der Hintergrundfarbe-Eigenschaft eingefügt. Geben Oder #rgb(, und die Farbauswahlleiste wird angezeigt:
Um zu sehen, wie die Farbauswahlleiste funktioniert, klicken Sie mit dem Mauszeiger auf die Farben, oder drücken Sie die NACH-UNTEN-TASTE, und verwenden Sie dann die NACH-LINKS- und NACH-RECHTS-TASTE, um die Farben zu durchlaufen. Wenn Sie eine Farbe besuchen, wird der entsprechende Wert für die Hintergrundfarbe-Eigenschaft in der Vorschau angezeigt:
An diesem Punkt können Sie die EINGABETASTE drücken, um den Wert auszuwählen, und dann ein Semikolon (;), um den CSS-Eintrag abzuschließen. Fahren Sie jetzt mit dem nächsten Abschnitt fort, damit Sie sehen können, wie das Popupmenü der Farbauswahl funktioniert.
Verwenden der Pop-Down "Farbauswahl"
Wenn der Farbbalken nicht über die genaue Farbe verfügt, nach der Sie suchen, können Sie die Farbauswahl-Popups verwenden.
Zum Öffnen klicken Sie auf das Doppelchevron am rechten Ende der Farbleiste, oder drücken Sie einmal oder zweimal auf der Tastatur die NACH-UNTEN-TASTE.
Klicken Sie auf der rechten Seite auf eine Farbe aus der vertikalen Leiste. Dadurch wird ein Farbverlauf für diese Farbe im Hauptfenster angezeigt. Wählen Sie eine Farbe direkt aus der vertikalen Leiste aus, indem Sie die EINGABETASTE drücken, oder klicken Sie auf einen beliebigen Punkt im Hauptfenster, um eine höhere Genauigkeit auszuwählen.
Wenn auf dem Computerbildschirm eine Farbe vorhanden ist, die Sie verwenden möchten (sie muss sich nicht innerhalb der Visual Studio-Benutzeroberfläche befinden), können Sie den Wert mithilfe des Pipettentools unten rechts erfassen.
Sie können auch die Deckkraft einer Farbe ändern, indem Sie den Schieberegler am unteren Rand der Farbauswahl verschieben. Dadurch werden Farbwerte in RGBA-Werte geändert, da das RGBA-Format die Deckkraft darstellen kann.
Nachdem Sie eine Farbe ausgewählt haben, drücken Sie die EINGABETASTE, und geben Sie dann ein Semikolon ein, um den Hintergrundfarbeintrag in der Site.css Datei abzuschließen.
Die Aktualisierungsleiste des Seiteninspektors
Der Seitenprüfungsinspektor erkennt sofort die Änderung an der Site.css-Datei (oder in einer beliebigen Datei in der Anwendung) und zeigt eine Warnung in einer Aktualisierungsleiste an.
Um alle Ihre Dateien zu speichern und den Page Inspector-Browser zu aktualisieren, drücken Sie STRG+ALT+EINGABETASTE oder klicken Sie auf die Aktualisierungsleiste. Die Änderung in der Hervorhebungsfarbe wird im Browser angezeigt:
Beachten Sie, dass Sie den Seitenprüfungsbrowser direkt in der Visual Studio-Umgebung bequem aktualisiert haben. Wenn Sie die Seitenprüfung anstelle eines externen Browsers verwenden, können Sie beim Entwickeln Ihrer Webanwendungen im Editor bleiben.
Siehe auch
Introducing Page Inspector (Channel 9-Video)