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 Web Forms-Anwendungsprojekt, 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 Web Forms-Anwendung 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 Sie den Seiteninspektor, um die Anwendung anzuzeigen
Als Nächstes werden Sie die Anwendung mit dem Seiteninspektor ansehen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie dann im Seiteninspektor die Option "Anzeigen" aus.
Wenn der Seiteninspektor zum ersten Mal gestartet wird, wird er 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 "Seiteninspektor" abdocken, können Sie es außerhalb von Visual Studio oder sogar auf einem zweiten Monitor platzieren, wenn Sie über einen verfügen. Um jedoch mit ALT+TAB zwischen dem Seiten-Inspektor und Visual Studio zu wechseln, wenn das Fenster des Seiten-Inspektors nicht angedockt ist, navigieren Sie zu Extras>Optionen>Umgebung>Registerkarten und Fenster und deaktivieren Sie im Abschnitt Tab Well das Kontrollkästchen Unverankerte Toolfenster bleiben 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 vom Page Inspector funktioniert. Klicken Sie im Fenster "Seitenprüfung" auf die Schaltfläche " Überprüfen ".
Um den Überprüfungsmodus in Aktion zu sehen, bewegen Sie Ihre Maus über verschiedene Teile der Seite im Fenster des Page Inspector. 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 den Page Inspector nutzen können, um Markups oder Text zu finden und Änderungen vorzunehmen, deren Position möglicherweise nicht sofort erkenntlich ist.
Platzieren Sie den Seiteninspektor im Inspektionsmodus, und scrollen Sie dann nach unten auf der Startseite.
Sobald Sie den Fußzeilenbereich betreten, öffnet der Seiteninspektor die Layoutdatei Site.Master in der Quellansicht auf einer temporären Registerkarte rechts von den anderen Registerkarten und hebt den Abschnitt der gewä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 %> - Meine ASP.NET-Anwendung rockt!</p>
Drücken Sie nun Strg+Alt+Eingabetaste; oder klicken Sie auf die Aktualisierungsleiste, um die Ergebnisse im Browserfenster des Seiteninspektors anzuzeigen.
Möglicherweise dachten Sie, dass sich die Fußzeile auf der Default.aspx-Seite befand, aber sie befindet sich in der Master-Layout-Seite, und der Page Inspector hat sie für Sie gefunden.
Inspektionsmodus und HTML-Fenster
Im nächsten Schritt schauen Sie sich das HTML-Fenster an und wie die Elemente für Sie zugeordnet werden.
Page Inspector in den Inspektionsmodus versetzen.
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 "Stile des Seitenprüfers" verwenden können, um Änderungen in 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. Unter dem Klassenselektor .featured .content-wrapper deaktivieren und aktivieren Sie das Kontrollkästchen für die Eigenschaft background-color.
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 das entsprechende CSS für den Selektor 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 Farbpalette und einen "Pop-down"-Auswahldialog, der 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 CSS-Eigenschaft "background-color" eingefügt. Geben Sie # oder rgb( ein, und die Farbauswahlleiste wird angezeigt.
Um zu sehen, wie die Farbwählerleiste funktioniert, klicken Sie mit dem Mauszeiger auf die Farben, oder drücken Sie die Nach-unten-Pfeiltaste, und verwenden Sie dann die Nach-links-Pfeiltaste und die Nach-rechts-Pfeiltaste, um die Farben zu navigieren. 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 des Pop-Down zur 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)