Zehn Highlights in Visual Studio 2012: #10 Page Inspector

Der Dotnet-Doktor  –  0 Kommentare

Microsofts Entwicklungsumgebung Visual Studio bietet in der Version 2012 eine Reihe schöner neuer Funktionen für die .NET-Programmierer. Der letzte Beitrag auf den Page Inspector ein. Er ist eine neue Ansicht für Webseiten innerhalb von Visual Studio 2012. Dabei werden drei Ansichten gegenübergestellt:

  • Quellcode der Seite auf dem Webserver
  • Quellcode der Seite aus der Sicht des Webbrowsers
  • Darstellung der Seite im Webbrowser

Im Rahmen des "Inspizierens" kann der Benutzer dann in einer der drei Ansichten eine Menge von Tags beziehungsweise Darstellungselementen anwählen und sieht in den jeweils anderen beiden Ansichten die korrespondierenden Elemente. Darüber hinaus bietet der Page Inspector eine Reihe von Funktionen, die man schon aus den Internet-Explorer-Entwicklertools kennt: Man kann HTML-Tags ändern und CSS-Regeln abwählen oder ändern. Außerdem steht eine Layoutansicht mit den aktiven Abständen zur Verfügung. Nun sind diese Funktionen im Rahmen des Page Inspector direkt in Visual Studio verfügbar.

Die drei Ansichten des Page Inspectors in Aktion

In der folgenden Abbildung wurde in der Darstellungsansicht der Seite eine Schaltfläche gewählt. In der HTML-Ansicht des Browsers darunter sieht man das korrespondierende HTML-<input>-Tag. In der ASPX-Datei rechts daneben erkennt man das ASP.NET-Serversteuerelement-Tag, das das <input>-Tag erzeugt hat. Die Ansicht funktioniert auch, wenn die Seite User Controls verwendet. Die ASCX-Dateien erscheinen in der "Files"-Liste und werden dann bei Bedarf automatisch geöffnet.

Layout-Ansicht des Page Inspector

Den Page Inspector ruft man im Kontextmenü einer ASPX-, ASCX-, CSHTML- oder HTML-Datei auf (View in Page Inspector) oder Browse with/Page Inspector).

Hinweis: Der Page Inspector basiert auf dem Internet Explorer 9.0 und setzt diesen auf dem Entwicklersystem voraus.

Achtung: Beim ersten Start nimmt der Page Inspector eine Änderung in der web.config-Datei vor.
<add key="VisualStudioDesignTime:Enabled" value="true" />. Diesen Eintrag sollten man vor dem Verbreiten der Anwendung löschen.