Korzystanie z narzędzia Page Inspector dla programu Visual Studio 2012 we wzorcu ASP.NET Web Forms

Autor Tim Ammann

Page Inspector for Visual Studio 2012 to narzędzie deweloperskie dla sieci Web, które jest zintegrowane z przeglądarką. Zaznacz dowolny element w zintegrowanej przeglądarce, a Inspektor strony natychmiast podświetla źródło i kod CSS elementu. Możesz przeglądać dowolną stronę w aplikacji, szybko znajdować źródła renderowanego znacznika i korzystać z narzędzi przeglądarki bezpośrednio w środowisku programu Visual Studio.

W tym samouczku przedstawiono sposób włączania trybu inspekcji, a następnie szybkiego lokalizowania i edytowania reguł CSS i tekstu w projekcie sieci Web. W tym samouczku jest używany projekt aplikacji formularzy sieci Web, ale można również użyć Inspektora stron dla projektów witryny sieci Web i aplikacji MVC .

Samouczek zawiera następujące sekcje:

Wymagania wstępne

Tworzenie aplikacji sieci Web

Korzystanie z Inspektora stron do wyświetlania aplikacji

Włącz tryb inspekcji

Używanie inspektora strony do wprowadzania zmian w znacznikach

Tryb inspekcji i okno HTML

Podgląd zmian CSS w oknie stylów

Autosynchronizacja CSS

Korzystanie z selektora kolorów CSS

Wymagania wstępne

Note

Aby uzyskać najnowszą wersję inspektora stron, Zainstaluj zestaw Azure SDK dla programu .NET 2,0 przy użyciu Instalatora platformy sieci Web .

Narzędzia Page Inspector są powiązane z Microsoft Web Developer Tools. Najnowsza wersja to 1,3. Aby sprawdzić posiadaną wersję, uruchom program Visual Studio i wybierz pozycję Informacje o Microsoft Visual Studio z menu Pomoc .

Tworzenie aplikacji sieci Web

Najpierw utworzysz aplikację sieci Web, która będzie używana w programie Page Inspector. W programie Visual Studio wybierz kolejno pozycje plik > Nowy projekt. Po lewej stronie rozwiń pozycję C#Wizualizacja, wybierz pozycję Sieć Web, a następnie wybierz pozycję aplikacja formularzy sieci Web ASP.NET.

Nowa aplikacja formularzy sieci Web

Kliknij przycisk OK.

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

Nowa aplikacja formularzy sieci Web w widoku źródła

Teraz, gdy masz aplikację do współpracy z programem, możesz użyć Inspektora stron do jego sprawdzenia i modyfikacji.

Korzystanie z Inspektora stron do wyświetlania aplikacji

Następnie zobaczysz aplikację za pomocą Inspektora stron. W Eksplorator rozwiązańkliknij prawym przyciskiem myszy projekt, a następnie wybierz polecenie Widok w Inspektorze strony.

Wyświetl w Inspektorze strony

Domyślnie, gdy inspektor strony jest uruchamiany po raz pierwszy, jest zadokowany jako wąskie okno po lewej stronie środowiska programu Visual Studio. Pozostaw to pole zadokowane po lewej stronie i ustaw dla niego szerokość, która jest odpowiednia dla Ciebie, lub Zadokuj ją w jednym z obszarów narzędzi na górze, na dole lub w prawo:

Położenie dokowania inspektora stron

Jeśli oddokusz okno Inspektora stron, możesz je umieścić poza programem Visual Studio, a nawet na drugim monitorze, jeśli go masz. Jednak aby można było ALT + TAB między inspektorem strony a programem Visual Studio, gdy okno Inspektora strony jest odzadokowane, przejdź do pozycji narzędzia > opcje > środowisko > karty i okna , anastępnie usuń zaznaczenie pola wyboru nazwanego okna narzędziowego zawsze na wierzchu okna głównego:

Wyczyść pole wyboru przepływającego okna narzędzi, aby ALT + TAB między programem Visual Studio i niezadokowanym oknem inspektora strony

Górne okienko okna inspektora stron pokazuje bieżącą stronę w oknie przeglądarki. W dolnym okienku zostanie wyświetlona strona w znaczniku HTML po lewej stronie, a niektóre karty po prawej stronie umożliwiają sprawdzenie różnych aspektów strony. Dolne okienko jest podobne do Narzędzia deweloperskie F12 w programie Internet Explorer. (Jednak w przeciwieństwie do narzędzi deweloperskich możesz użyć Inspektora stron bezpośrednio w programie Visual Studio).

{1>Inspektor strony<1}

W tym samouczku użyjesz okienka przeglądarki stron oraz kart HTML i Style , które ułatwią Ci szybkie nawigowanie i wprowadzanie zmian w aplikacji.

Włącz tryb inspekcji

Następnie zobaczysz, jak działa tryb inspekcji inspektora strony. W oknie Inspektora stron kliknij przycisk Zbadaj .

Zbadaj element

Aby wyświetlić tryb inspekcji w akcji, Przenieś wskaźnik myszy na różne części strony w oknie przeglądarki strony. Jak to zrobisz, wskaźnik myszy zmieni się na duży znak plus, a element poniżej zostanie wyróżniony:

Przesuwanie nad blokiem DIV. Content-otoka

Podczas przesuwania wskaźnika myszy należy zauważyć, że

  • Zawartość w widoku źródła zmienia się, aby wyświetlić znaczniki odpowiadające wybranemu elementowi na stronie. Odpowiednie znaczniki są wyróżnione. Jeśli źródło znajduje się w innym pliku, plik zostanie otwarty w widoku źródła z wyróżnionym znacznikiem.

  • Znaczniki wyświetlane na karcie HTML w Inspektorze strony również zmieniają się, aby odpowiadały wybranemu elementowi na stronie. Na karcie HTML odpowiednie znaczniki są opisane w opisie.

  • Na karcie Style są wyświetlane reguły CSS odpowiednie dla bieżącego zaznaczenia.

Używanie inspektora strony do wprowadzania zmian w znacznikach

Teraz zobaczysz, jak można użyć Inspektora strony do znajdowania i wprowadzania zmian w znacznikach lub tekstach, których lokalizacja może nie być od razu oczywista.

Umieść Inspektor strony w trybie inspekcji, a następnie przewiń w dół strony głównej.

Gdy tylko wprowadzisz obszar stopki, inspektor strony otworzy plik . Master w widoku źródła na karcie tymczasowej z prawej strony innych kart i podświetla wybraną sekcję na stronie wzorcowej. Pokazuje, w jaki sposób Inspektor strony może znaleźć i wyświetlić zawartość na stronie, która może faktycznie pochodzić z innego pliku niż ten, który został pierwotnie otwarty.

Najważniejsze stopki w trybie inspekcji

W oknie przeglądarki stron inspektora przesuń wskaźnik myszy nad wiersz z informacją o prawach autorskich.

Na stronie site. Master zostanie wyróżniony odpowiedni wiersz.

Wyróżniono wiersz Copyright

Dodaj tekst na końcu wiersza w pliku site. Master .

<p>&Copy; <%: DateTime. Now. Year%>-my ASP.NET Application Rocks!</p>

Teraz naciśnij kombinację klawiszy Ctrl + Alt + Enter lub kliknij pasek aktualizacji, aby wyświetlić wyniki w oknie przeglądarki stron inspektora.

Moja aplikacja ASP.NET Rocks!

Być może wiesz, że stopka znajdowała się na stronie default. aspx , ale wyłączono ją na stronie układu głównego, a Inspektor strony go wyszukał.

Tryb inspekcji i okno HTML

Następnie będziesz mieć szybki podgląd okna HTML i sposobu, w jaki mapuje elementy.

Umieść Inspektor strony w trybie inspekcji.

Zbadaj element

Kliknij górną część strony, w której znajduje się tekst "Twoje logo". Badasz konkretny element bardziej szczegółowo, więc wyświetlanie w oknie przeglądarki nie zmienia się po przesunięciu wskaźnika myszy.

Teraz Przenieś wskaźnik myszy do okna HTML . Podczas przesuwania wskaźnika myszy, inspektor strony zawiera element w oknie HTML i podświetla odpowiadający element w oknie przeglądarki.

Okno HTML

Jak wcześniej, inspektor strony otworzy plik site. Master dla Ciebie na karcie tymczasowej. Kliknij kartę site. Master, a odpowiednie znaczniki są wyróżnione w sekcji <nagłówek>:

Wyróżnione adiustacje

Podgląd zmian CSS w oknie stylów

Następnie zobaczysz, jak można użyć okna stylów inspektora strony do podglądu zmian w CSS.

Kliknij przycisk Sprawdź , aby umieścić inspektora strony w trybie inspekcji.

W oknie przeglądarki stron inspektora przesuń wskaźnik myszy nad sekcję "Strona główna", aż zostanie wyświetlona etykieta DIV. Content-otoka .

Przesuwanie nad elementami

Kliknij jeden z sekcji DIV. Content-otoka, a następnie przesuń wskaźnik myszy do okna Style . W selektorze klas. Polecane. Content-otoka Usuń zaznaczenie pola wyboru dla właściwości Background-Color.

Wyczyść kolor tła

Zwróć uwagę, jak natychmiast przeglądanie zmian w oknie przeglądarki stron.

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

Czerwony kolor tła

Okno Style ułatwia testowanie i Podgląd zmian CSS przed zatwierdzeniem zmian w arkuszu stylów.

Autosynchronizacja CSS

Note

Ta funkcja wymaga wersji 1,3 inspektora strony.

Funkcja autosynchronizacji CSS umożliwia bezpośrednie edytowanie pliku CSS i natychmiastowe wyświetlanie zmian w przeglądarce stron.

Kliknij pozycję Sprawdź , aby umieścić Inspektor strony w trybie inspekcji.

W przeglądarce inspektora stron przesuń wskaźnik myszy nad sekcję "Strona główna" do momentu, gdy zostanie wyświetlona etykieta DIV. Content-otoka . Kliknij raz, aby zaznaczyć ten element.

W oknie Style są wyświetlane wszystkie reguły CSS dla tego elementu. Przewiń w dół, aby znaleźć selektor klasy. Polecane. Content-otoka. Kliknij pozycję ". Polecane. Content-otoka". Inspektor strony otwiera plik CSS, który definiuje ten styl (site. CSS) i podświetla odpowiedni styl CSS.

Plik CSS

Teraz zmień wartość dla background-color na "Red". Zmiana zostanie wyświetlona natychmiast w przeglądarce inspektora stron.

Przeglądarka stron inspektora

Korzystanie z selektora kolorów CSS

Następnie dowiesz się, jak za pomocą Inspektora stron szybko znajdować i zmieniać arkusz CSS dla wyróżnionego tekstu w aplikacji domyślnej. W tym przykładzie postanowisz, że nie jest to niebieskie wyróżnianie i chcesz zmienić kolor na inny.

Kliknij przycisk Zbadaj .

Zbadaj element

W oknie przeglądarki stron inspektora przesuń wskaźnik myszy nad wyróżniony tekst "wideo, samouczki i przykłady", aby pojawił się etykieta CSS "Mark".

Przesuwanie nad elementem znacznika

Kliknij tekst, aby go zaznaczyć. Odpowiedni selektor znacznika CSS pojawia się u dołu okna Style .

Oznacz selektor w oknie stylów

Kliknij selektor znacznika. Spowoduje to otwarcie pliku . css dla aplikacji sieci Web. Kliknij kartę site. CSS, a odpowiadająca jej CSS selektora zostanie wyróżniona:

Oznacz selektor w arkuszu stylów

Zaznacz i Usuń wiersz z właściwością Background-Color.

Teraz będziesz używać nowego selektora kolorów CSS programu Visual Studio 2012, aby wybrać nowy kolor dla właściwości tło znacznika .

Korzystanie z selektora kolorów CSS programu Visual Studio 2012

Edytor CSS w programie Visual Studio 2012 ma selektor kolorów, dzięki czemu można łatwo wybierać i wstawiać kolory. Ma prosty pasek koloru i selektor "podręczny", który oferuje dokładniejszą kontrolę.

Selektor kolorów zawiera standardową paletę kolorów, obsługuje standardowe nazwy kolorów, kody skrótów, kolory RGB, RGBA, HSL i HSLA, a także zachowuje listę kolorów używanych ostatnio w dokumencie.

W wierszu, w którym zainstalowano Właściwość Background-Color, wpisz "BC" i naciśnij klawisz Strzałka w dół.

Po wpisaniu pierwszego znaku każdego wyrazu w właściwości rozdzielanej łącznikami, takiej jak "Background-Color", IntelliSense filtruje listę, aby wyświetlić tylko pasujące właściwości:

Przefiltrowane wartości IntelliSense

Teraz wpisz dwukropek. Gdy to zrobisz, zostanie wstawiona pełna nazwa właściwości Background. Typ # lub RGB ( i zostanie wyświetlony pasek selektora kolorów:

Pasek selektora kolorów CSS

Aby zobaczyć, jak działa pasek selektora kolorów, kliknij jego kolory za pomocą wskaźnika myszy lub naciśnij klawisz Strzałka w dół, a następnie użyj klawiszy strzałek w lewo i w prawo, aby przechodzenie między kolorami. Podczas odwiedzania koloru wyświetlana jest odpowiednia wartość właściwości Background-Color:

Podgląd — wartość właściwości koloru w tle

W tym momencie można nacisnąć klawisz ENTER, aby wybrać wartość, a następnie średnik (;) Aby ukończyć wprowadzanie wpisów CSS. Na razie przejdź do następnej sekcji, aby zobaczyć, jak działa selektor kolorów.

Korzystanie z okna podręcznego selektora kolorów

Gdy pasek koloru nie ma dokładnego koloru, którego szukasz, możesz użyć selektora kolorów.

Aby go otworzyć, kliknij podwójny cudzysłów ostrokątny na prawym końcu paska kolorów lub naciśnij klawisz Strzałka w dół jeden raz lub dwukrotnie na klawiaturze.

Selektor kolorów CSS — wyskakujące okienko

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 paska pionowego, naciskając klawisz ENTER, lub kliknij dowolny punkt w oknie głównym, aby wybrać większą precyzję.

Jeśli na ekranie komputera istnieje kolor, który ma być używany (nie musi znajdować się w interfejsie użytkownika programu Visual Studio), możesz przechwycić jego wartość za pomocą narzędzia Kroplomierz 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 koloru 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 inspektora stron

Inspektor strony natychmiast wykrywa zmiany w pliku site. css (lub w dowolnym pliku w aplikacji) i wyświetla alert na pasku aktualizacji.

Pasek aktualizacji

Aby zapisać wszystkie pliki i odświeżyć przeglądarkę inspektora stron, naciśnij kombinację klawiszy Ctrl + Alt + Enter lub kliknij pasek aktualizacji. Zmiana w kolorze wyróżnienia zostanie wyświetlona w przeglądarce:

Zmieniono kolor wyróżnienia

Należy zauważyć, że wygodnie odświeżono przeglądarkę inspektora stron bezpośrednio z poziomu środowiska programu Visual Studio. Korzystanie z narzędzia Page Inspector zamiast zewnętrznej przeglądarki pozwala pozostać w edytorze podczas opracowywania aplikacji sieci Web.

Zobacz też

Wprowadzenie do Inspektora stron (wideo Channel 9)

Komunikaty o błędach inspektora stron (MSDN)