Korzystanie z inspektora stron ze zintegrowaną przeglądarką w usłudze ASP.NET MVC

Autor: Tim Ammann

Page Inspector w programie Visual Studio 2012 to narzędzie do tworzenia aplikacji internetowych ze zintegrowaną przeglądarką. Wybierz dowolny element w zintegrowanej przeglądarce, a inspektor strony natychmiast wyróżnia źródło i arkusz CSS elementu. Możesz przeglądać dowolny widok MVC, szybko znaleźć źródła renderowanych znaczników i używać narzędzi przeglądarki bezpośrednio w środowisku programu Visual Studio.

Obejrzyj film wideo

W tym samouczku pokazano, jak włączyć tryb inspekcji, a następnie szybko zlokalizować i edytować znaczniki oraz arkusze CSS w projekcie internetowym. W tym samouczku jest używany projekt MVC, ale można również użyć narzędzia Page Inspector dla Web Forms i innych aplikacji ASP.NET.

Samouczek zawiera następujące sekcje:

• Wymagania wstępne
• Tworzenie aplikacji internetowej
• Przechodzenie do widoku za pomocą inspektora stron
• Włączanie trybu inspekcji
• Używanie inspektora stron do wprowadzania zmian w znacznikach
• Tryb inspekcji i okno HTML
• Podgląd zmian CSS w oknie Style
• Automatyczna synchronizacja CSS
• Używanie selektora kolorów CSS
• Mapowanie dynamicznych elementów strony na język JavaScript

Wymagania wstępne

• Visual Studio 2012 lub Visual Studio Express 2012 for Web.

Uwaga

Aby uzyskać najnowszą wersję narzędzia Page Inspector, użyj Instalatora platformy internetowej , aby zainstalować zestaw Windows Azure SDK dla platformy .NET 2.0.

Page Inspector jest dołączony do Microsoft Web Developer Tools. Najnowsza wersja to 1.3. Aby sprawdzić, którą wersję masz, uruchom program Visual Studio i wybierz pozycję Informacje o programie Microsoft Visual Studio z menu Pomoc .

Tworzenie aplikacji internetowej

Najpierw utwórz aplikację internetową, z którą będziesz używać narzędzia Page Inspector. W programie Visual Studio wybierz pozycję Plik>nowy projekt. Po lewej stronie rozwiń węzeł Visual C#, wybierz pozycję Sieć Web, a następnie wybierz pozycję ASP.NET APLIKACJA internetowa MVC4.

Kliknij przycisk OK.

W oknie dialogowym Nowy projekt ASP.NET MVC 4 wybierz pozycję Aplikacja internetowa. Pozostaw wartość Razor jako domyślny aparat widoku.

Aplikacja zostanie otwarta w widoku źródłowym .

Teraz, gdy masz aplikację do pracy, możesz użyć inspektora stron do zbadania i zmodyfikowania jej.

Przechodzenie do widoku za pomocą inspektora stron

W programie Visual Studio 2012 możesz kliknąć prawym przyciskiem myszy dowolny widok w projekcie, wybrać pozycję Widok w inspektorze strony, a inspektor strony wyświetli trasę i wyświetlić stronę.

W Eksplorator rozwiązań rozwiń folder Views, a następnie folder Główny. Kliknij prawym przyciskiem myszy plik Index.cshtml i wybierz pozycję Widok w Inspektorze strony.

Domyślnie inspektor strony jest zadokowany jako okno po lewej stronie środowiska programu Visual Studio. Jeśli wolisz, możesz zadokować go gdzie indziej lub oddokować okno. Zobacz Instrukcje: rozmieszczanie i dokowanie okien.

Górne okienko okna Page Inspector (Inspektor strony) zawiera bieżącą stronę w oknie przeglądarki. W dolnym okienku jest wyświetlana strona w adiustacji HTML wraz z niektórymi kartami, które umożliwiają inspekcję różnych aspektów strony. Dolne okienko jest podobne do narzędzi deweloperskich F12 w programie Internet Explorer.

W tym samouczku użyjesz kart HTML i Styles , aby szybko przechodzić i wprowadzać zmiany w aplikacji.

Tryb enableInspection

Aby umieścić inspektora strony w trybie inspekcji, kliknij przycisk Inspekcja . W trybie inspekcji, gdy trzymasz wskaźnik myszy nad dowolną częścią renderowanej strony, odpowiednie znaczniki źródłowe lub kod są wyróżnione.

Teraz przenieś wskaźnik myszy na różne części strony w inspektorze strony. Jak to zrobić, wskaźnik myszy zmienia się na duży znak plus, a element poniżej jest wyróżniony:

Podczas przenoszenia wskaźnika myszy program Visual Studio wyróżnia odpowiednią składnię Razor w pliku źródłowym. Jeśli element HTML pochodzi z innego pliku źródłowego, program Visual Studio automatycznie otwiera plik.

Na karcie Page Inspector (Inspektor strony) na karcie HTML jest wyświetlany kod HTML wygenerowany ze składni Razor. Gdy przesuwasz wskaźnik myszy, elementy HTML są wyróżnione. Na karcie Style są wyświetlane reguły CSS dla elementu.

Używanie inspektora stron do wprowadzania zmian w znacznikach

Page Inspector pozwala znaleźć znaczniki, których lokalizacja może nie być oczywista. Następnie możesz zmodyfikować znaczniki i zobaczyć wynikowe zmiany.

Aby to zobaczyć, kliknij pozycję Inspekcja , a następnie przewiń do dołu strony w oknie Inspektor strony.

Po przeniesieniu wskaźnika myszy do obszaru stopki inspektor strony otwiera plik _Layout.cshtml i wyróżnia sekcję wybranej strony układu. Jak widać, obszar stopki jest zdefiniowany w pliku układu, a nie w samym widoku.

Teraz przenieś wskaźnik myszy na linię z powiadomieniem o prawach autorskich . Na stronie _Layout.cshtml zostanie wyróżniony odpowiedni wiersz.

Dodaj tekst na końcu wiersza w pliku _Layout.cshtml.

<p>© @DateTime.Now.Year — Moje ASP.NET skały aplikacji MVC!</P>

Teraz naciśnij klawisze Ctrl+Alt+Enter lub kliknij pasek aktualizacji, aby wyświetlić wyniki w oknie przeglądarki Inspektor strony.

Być może uważasz, że stopka zdefiniowana w pliku Index.cshtml, ale okazało się, że znajduje się ona w pliku _Layout.cshtml, a inspektor strony znalazł go dla Ciebie.

Tryb inspekcji i okno HTML

Następnie będziesz mieć szybki wgląd w okno HTML i sposób mapowanie elementów dla Ciebie.

Kliknij pozycję Inspekcja , aby umieścić inspektora strony w trybie inspekcji.

Kliknij górną część strony z napisem "Logo tutaj". Bardziej szczegółowo sprawdzasz konkretny element, więc wyświetlanie w oknie przeglądarki nie zmienia się już podczas przenoszenia wskaźnika myszy.

Teraz przenieś wskaźnik myszy do okna HTML . Podczas przenoszenia wskaźnika myszy inspektor strony przedstawia element w oknie HTML i wyróżnia odpowiedni element w oknie przeglądarki.

Tak jak wcześniej, Narzędzie Page Inspector otwiera plik _Layout.cshtml dla Ciebie na karcie tymczasowej. Kliknij kartę tymczasową _Layout.cshtml, a odpowiedni znacznik zostanie wyróżniony w sekcji nagłówka<>:

Podgląd zmian CSS w oknie Style

Następnie użyjesz okna Style inspektora stron, aby wyświetlić podgląd zmian w arkuszu CSS.

Kliknij pozycję Inspekcja , aby umieścić inspektora strony w trybie inspekcji.

W oknie przeglądarki Page Inspector przesuń wskaźnik myszy nad sekcją "Strona główna", aż pojawi się etykieta div.content-wrapper .

Kliknij w sekcji div.content-wrapper raz, a następnie przenieś wskaźnik myszy do okna Style . W oknie Style są wyświetlane wszystkie reguły CSS dla tego elementu. Przewiń w dół, aby znaleźć selektor klas polecanej otoki zawartości. Teraz wyczyść pole wyboru właściwości kolor tła.

Zwróć uwagę, jak zmiany są wyświetlane natychmiast w oknie przeglądarki Page Inspector.

Zaznacz ponownie pole wyboru, a następnie kliknij dwukrotnie wartość właściwości i zmień ją na czerwoną. Zmiana jest wyświetlana natychmiast:

Okno Style ułatwia testowanie i wyświetlanie podglądu zmian CSS przed zatwierdzeniem zmian w arkuszu stylów.

Automatyczna synchronizacja CSS

Uwaga

Ta funkcja wymaga wersji 1.3 narzędzia Page Inspector.

Funkcja automatycznej synchronizacji CSS umożliwia bezpośrednie edytowanie pliku CSS i natychmiastowe wyświetlanie zmian w przeglądarce Page Inspector.

Kliknij pozycję Inspekcja, aby umieścić Inspektora stron w trybie inspekcji.

W przeglądarce Page Inspector przesuń wskaźnik myszy nad sekcją "Strona główna", aż zostanie wyświetlona etykieta div.content-wrapper . Kliknij raz, aby wybrać ten element.

W oknie Style są wyświetlane wszystkie reguły CSS dla tego elementu. Przewiń w dół, aby znaleźć selektor klas polecanej otoki zawartości. Kliknij pozycję ".featured .content-wrapper". Page Inspector otwiera plik CSS, który definiuje ten styl (Site.css) i wyróżnia odpowiedni styl CSS.

Teraz zmień wartość na background-color "czerwony". Zmiana jest wyświetlana natychmiast w przeglądarce Page Inspector.

Korzystanie z selektora kolorów CSS

Edytor CSS w programie Visual Studio 2012 ma selektor kolorów, który ułatwia wybieranie i wstawianie kolorów. Selektor kolorów zawiera standardową paletę kolorów, obsługuje standardowe nazwy kolorów, kody skrótów, RGB, RGBA, HSL i HSLA oraz utrzymuje listę kolorów używanych ostatnio w dokumencie.

W poprzedniej sekcji zmieniono wartość background-color właściwości . Aby wywołać selektor kolorów, umieść punkt wstawiania po nazwie właściwości i typie # lub rgb(.

Kliknij kolor, aby go zaznaczyć, lub naciśnij klawisz strzałki w dół, a następnie użyj klawiszy strzałki w lewo i w prawo, aby przechodzić przez kolory. Po odwiedzeniu koloru zostanie wyświetlona odpowiednia wartość szesnastkowy:

Jeśli pasek kolorów nie ma właściwego koloru, możesz użyć wyskakującego selektora kolorów. Aby go otworzyć, kliknij dwukrotny cudzysłów ostrokątny na prawym końcu paska kolorów lub naciśnij strzałkę w dół raz lub dwa razy na klawiaturze.

Kliknij kolor z pionowego paska po prawej stronie. Spowoduje to wyświetlenie gradientu dla tego koloru w oknie głównym. Wybierz kolor bezpośrednio z pionowego paska, naciskając klawisz Enter, lub kliknij dowolny punkt w oknie głównym, aby wybrać z większą dokładnością.

Jeśli na ekranie komputera jest kolor, którego chcesz użyć (nie musi znajdować się wewnątrz interfejsu użytkownika programu Visual Studio), możesz przechwycić jego wartość przy użyciu narzędzia eyedropper w prawym dolnym rogu.

Możesz również zmienić nieprzezroczystość koloru, przesuwając suwak w dolnej części selektora kolorów. Spowoduje to zmianę wartości kolorów na wartości RGBA, ponieważ format RGBA może reprezentować nieprzezroczystość.

Po wybraniu koloru naciśnij klawisz Enter, a następnie wpisz średnik, aby zakończyć wprowadzanie koloru tła w pliku Site.css .

Pasek aktualizacji Inspektor strony

Page Inspector natychmiast wykrywa zmianę pliku Site.css i wyświetla alert na pasku aktualizacji.

Aby zapisać wszystkie pliki i odświeżyć przeglądarkę Page Inspector, naciśnij klawisze Ctrl+Alt+Enter lub kliknij pasek aktualizacji. Zmiana koloru wyróżnienia zostanie wyświetlona w przeglądarce.

Mapowanie dynamicznych elementów strony na język JavaScript

W nowoczesnych aplikacjach internetowych elementy na stronie są często generowane dynamicznie przy użyciu języka JavaScript. Oznacza to, że nie ma znaczników statycznych (HTML lub Razor), które odpowiadają tym elementom strony.

W wersji 1.3 narzędzie Page Inspector może teraz mapować elementy, które zostały dynamicznie dodane do strony z powrotem do odpowiedniego kodu JavaScript. Aby zademonstrować tę funkcję, użyjemy szablonu Aplikacja jednostronicowa (SPA).

Uwaga

Szablon SPA wymaga aktualizacji ASP.NET and Web Tools 2012.2.

W programie Visual Studio wybierz pozycję Plik>nowy projekt. Po lewej stronie rozwiń węzeł Visual C#, wybierz pozycję Sieć Web, a następnie wybierz pozycję ASP.NET aplikacja internetowa MVC4. Kliknij przycisk OK.

W oknie dialogowym Nowy projekt MVC 4 ASP.NET wybierz pozycję Aplikacja jednostronicowa.

W Eksplorator rozwiązań rozwiń folder Views, a następnie folder Home. Kliknij prawym przyciskiem myszy plik Index.cshtml i wybierz polecenie Widok w Inspektorze strony.

Pierwszą rzeczą wyświetlaną w przeglądarce Page Inspector jest strona logowania. Kliknij pozycję "Zarejestruj się" i utwórz nazwę użytkownika i hasło. Po utworzeniu konta aplikacja rejestruje Cię i tworzy listę zadań do wykonania z niektórymi przykładowymi elementami.

Kliknij pozycję Inspekcja, aby umieścić Inspektora stron w trybie inspekcji. W przeglądarce Page Inspector kliknij jeden z elementów do wykonania. Zwróć uwagę, że zamiast wyróżniać kolor niebieski, element jest wyróżniony kolorem pomarańczowym z tekstem "JS" obok nazwy elementu. Oznacza to, że element został utworzony dynamicznie za pomocą skryptu.

Ponadto na karcie Stos wywołań pojawia się pomarańczowy podkreślenie. Oznacza to, że okienko Stos wywołań zawiera więcej informacji o elemencie .

Kliknij kartę Stos wywołań . Okienko Stos wywołań zawiera stos wywołań dla wywołania JavaScript, które utworzyło element. Wywołania bibliotek zewnętrznych, takich jak jQuery, są zwinięte, dzięki czemu można łatwo wyświetlić wywołania skryptu aplikacji.

Aby wyświetlić pełny stos, w tym wywołania bibliotek zewnętrznych, możesz rozwinąć węzły z etykietą "Biblioteki zewnętrzne":

Jeśli klikniesz element w stosie wywołań, program Visual Studio otworzy plik kodu i wyróżni odpowiedni skrypt.

Zobacz też

Wprowadzenie do ASP.NET MVC 4 za pomocą programu Visual Studio (witryna internetowa ASP.net)

Introducing Page Inspector (Wprowadzenie do inspektora stron ) (wideo w kanale 9)

Komunikaty o błędach inspektora stron (MSDN)