Korzystanie z narzędzia Page Inspector w programie Visual Studio 2012

Artykuł
07/13/2023

W tym praktycznym laboratorium odkryjesz nowe narzędzie do znajdowania i rozwiązywania problemów ze stroną internetową w programie Visual Studio — Inspektor strony.

Page Inspector to nowe narzędzie, które udostępnia narzędzia diagnostyczne przeglądarki do programu Visual Studio i zapewnia zintegrowane środowisko między przeglądarkami, ASP.NET i kodem źródłowym. Renderuje stronę internetową (HTML, Web Forms, ASP.NET MVC lub Web Pages) bezpośrednio w środowisku IDE programu Visual Studio i umożliwia badanie kodu źródłowego i wynikowych danych wyjściowych. Page Inspector umożliwia łatwe rozkładanie witryny internetowej, szybkie tworzenie stron od podstaw i szybkie diagnozowanie problemów.

Obecnie mamy wiele struktur internetowych, które tworzą elastyczne i skalowalne witryny internetowe w odpowiednim czasie, takie jak ASP.NET MVC i WebForms. Z drugiej strony trudniej jest znaleźć problemy na stronach, ponieważ środowisko IDE nie obsługuje widoku projektanta na stronach opartych na szablonach i zawartości dynamicznej. W związku z tym te witryny internetowe muszą być otwierane w przeglądarce, aby zobaczyć, jak wyglądają na użytkownika.

Deweloperzy sieci Web używają narzędzi zewnętrznych do znajdowania problemów, które regularnie są uruchamiane w przeglądarce. Następnie wracają do środowiska IDE i zaczynają naprawiać. To działanie w środowisku IDE, przeglądarka i narzędzia profilowania mogą być nieefektywne, a czasami wymaga świeżego wdrożenia i czyszczenia pamięci podręcznej za każdym razem, gdy chcesz odtworzyć problem.

Page Inspector zapewnia lukę w tworzeniu aplikacji internetowych między klientem (narzędziami przeglądarki) i serwerem (ASP.NET i kodem źródłowym), łącząc najlepsze z obu światów przy użyciu połączonego zestawu funkcji.

Za pomocą narzędzia Page Inspector można zobaczyć, które elementy w plikach źródłowych (w tym kod po stronie serwera) wygenerowały znaczniki HTML, które mają być renderowane w przeglądarce. Page Inspector umożliwia również modyfikowanie właściwości CSS i atrybutów elementu DOM, aby zobaczyć zmiany odzwierciedlone natychmiast w przeglądarce.

To praktyczne laboratorium przeprowadzi Cię przez funkcje Page Inspector i pokaże, jak można ich używać do rozwiązywania problemów w aplikacjach internetowych. To laboratorium zawiera dwa ćwiczenia korzystające z podobnych przepływów, ale przeznaczone dla różnych technologii. Jeśli jesteś deweloperem ASP.NET MVC, wykonaj ćwiczenie jedno; Jeśli jesteś deweloperem webforms, wykonaj ćwiczenie dwa.

To laboratorium przeprowadzi Cię przez ulepszenia i nowe funkcje opisane wcześniej przez zastosowanie drobnych zmian do przykładowej aplikacji internetowej udostępnionej w folderze Source.

Cele

W tym praktycznym laboratorium dowiesz się, jak wykonywać następujące działania:

Decompose a Web Site using Page Inspector
Sprawdzanie i wyświetlanie podglądu zmian stylów CSS za pomocą narzędzia Page Inspector
Wykrywanie i rozwiązywanie problemów na stronach internetowych przy użyciu narzędzia Page Inspector

Wymagania wstępne

Aby ukończyć to laboratorium, musisz mieć następujące elementy:

Microsoft Visual Studio Express 2012 dla sieci Web lub superior (przeczytaj dodatek A, aby uzyskać instrukcje dotyczące sposobu instalacji).
Internet Explorer 9 lub nowszy

Ćwiczenia

To praktyczne laboratorium obejmuje następujące ćwiczenia:

Ćwiczenie 1. Używanie narzędzia Page Inspector w projektach MVC ASP.NET
Ćwiczenie 2. Używanie narzędzia Page Inspector w projektach WebForms

Uwaga

Każdemu ćwiczeniu towarzyszy rozwiązanie początkowe znajdujące się w folderze Begin ćwiczenia, które umożliwia wykonywanie poszczególnych ćwiczeń niezależnie od innych. Wewnątrz kodu źródłowego ćwiczenia znajdziesz również folder End zawierający rozwiązanie programu Visual Studio z kodem, który wynika z wykonania kroków w odpowiednim ćwiczeniu. Możesz użyć tych rozwiązań jako wskazówek, jeśli potrzebujesz dodatkowej pomocy podczas pracy z tym praktycznym laboratorium.

Szacowany czas ukończenia tego laboratorium: 30 minut.

Ćwiczenie 1. Używanie narzędzia Page Inspector w projektach MVC ASP.NET

W tym ćwiczeniu dowiesz się, jak wyświetlić podgląd i debugować rozwiązanie ASP.NET MVC 4 przy użyciu narzędzia Page Inspector. Najpierw wykonasz krótkie okrążenie wokół narzędzia, aby dowiedzieć się, jakie funkcje ułatwiają proces debugowania w Internecie. Następnie będziesz pracować na stronie internetowej zawierającej problemy ze stylizowaniem. Dowiesz się, jak za pomocą narzędzia Page Inspector znaleźć kod źródłowy, który generuje problem i go rozwiązać.

Zadanie 1 — Eksplorowanie inspektora strony

W tym zadaniu dowiesz się, jak używać narzędzia Page Inspector w kontekście projektu ASP.NET MVC 4, który pokazuje galerię zdjęć.

Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex1-MVC4/Begin/ .
1. Zanim przejdziesz dalej, musisz pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (Zarządzaj pakietami NuGet).
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć , aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycjęKompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium należy wykonać te kroki.
W Eksplorator rozwiązań znajdź widok Index.cshtml w folderze /Views/Home projektu, kliknij go prawym przyciskiem myszy i wybierz polecenie Widok w Inspektorze stron.

Wybieranie pliku do podglądu w narzędziu Page Inspector
W oknie Page Inspector (Inspektor strony) zostanie wyświetlony adres URL /Home/Index zamapowany na wybrany widok źródłowy.

Pierwszy kontakt z inspektorem strony

Narzędzie Page Inspector jest zintegrowane ze środowiskiem programu Visual Studio. Inspektor zawiera osadzoną przeglądarkę wraz z zaawansowanym profilerem HTML. Zwróć uwagę, że nie trzeba uruchamiać rozwiązania, aby zobaczyć wygląd stron.

Uwaga

Gdy szerokość przeglądarki Page Inspector jest mniejsza niż szerokość otwartej strony, strona nie będzie widoczna prawidłowo. W takim przypadku dostosuj szerokość Inspektora stron.
Kliknij kartę Pliki w inspektorze strony.

Zostaną wyświetlone wszystkie pliki źródłowe, które komponują stronę Indeks. Ta funkcja ułatwia szybkie identyfikowanie wszystkich elementów, szczególnie w przypadku pracy z widokami częściowymi i szablonami. Zwróć uwagę, że można również otworzyć każdy z plików po kliknięciu linków.

Karta Pliki
Kliknij przycisk Przełącz tryb inspekcji znajdujący się po lewej stronie kart.

To narzędzie umożliwia wybranie dowolnego elementu strony i wyświetlanie kodu HTML i Razor.

Przycisk Przełącz tryb inspekcji
W przeglądarce Page Inspector przesuń wskaźnik myszy na elementy strony. Podczas przesuwania wskaźnika myszy nad dowolną częścią renderowanej strony wyświetlany jest typ elementu, a odpowiedni kod źródłowy lub znacznik źródłowy jest wyróżniony w edytorze programu Visual Studio.

Tryb inspekcji w działaniu

Uwaga

Nie maksymalizuj okna Inspektor strony lub nie będzie można wyświetlić karty podglądu z kodem źródłowym. Jeśli klikniesz element w inspektorze strony, gdy zostanie on zmaksymalizowany, zostanie wyświetlony kod źródłowy zaznaczenia, ale spowoduje ukrycie okna Inspektor strony.

Jeśli zwracasz uwagę na plik Index.cshtml , zauważysz, że część kodu źródłowego, która generuje wybrany element, jest wyróżniona. Ta funkcja ułatwia edytowanie długich plików źródłowych, zapewniając bezpośredni i szybki sposób uzyskiwania dostępu do kodu.

Sprawdzanie elementów
Kliknij przycisk Przełącz tryb inspekcji ( ), aby wyłączyć kursor.
Wybierz kartę HTML , aby wyświetlić kod HTML renderowany w przeglądarce Page Inspector.
W adiustacji HTML znajdź element listy za pomocą linku Koala i wybierz go.

Zwróć uwagę, że po wybraniu kodu odpowiednie dane wyjściowe zostaną automatycznie wyróżnione w przeglądarce. Ta funkcja jest przydatna do sprawdzenia, jak blok HTML jest renderowany na stronie.

Wybieranie elementu HTML na stronie
Kliknij przycisk Przełącz tryb inspekcji , aby włączyć tryb inspekcji , a następnie kliknij pasek nawigacyjny. Po prawej stronie kodu HTML w okienku Style zostanie wyświetlona lista ze stylami CSS zastosowanymi do wybranego elementu.

Uwaga

Ponieważ nagłówek jest częścią układu witryny, inspektor strony otworzy również plik _Layout.cshtml i wyróżni segment kodu, którego dotyczy problem.

Odnajdywanie stylów i plików źródłowych wybranego elementu
Po włączeniu wskaźnika inspekcji przełącznika przesuń wskaźnik myszy poniżej niebieskiego polecanego paska i kliknij pół okręgu.

Wybieranie elementu
W okienku Style znajdź element obrazu tła w grupie .main-content . Usuń zaznaczenieobrazu tła i zobacz, co się stanie. Zauważysz, że przeglądarka natychmiast odzwierciedli zmiany, a okrąg jest ukryty.

Uwaga

Zmiany stosowane na karcie Style inspektora stron nie mają wpływu na oryginalny arkusz stylów. Możesz usunąć zaznaczenie stylów lub zmienić ich wartości tyle razy, ile chcesz, ale zostaną one przywrócone po odświeżeniu strony.

Włączanie i wyłączanie stylów CSS
Teraz kliknij tekst "logo tutaj" w nagłówku przy użyciu trybu inspekcji.
Na karcie Style znajdź atrybut CSS o rozmiarze czcionki w grupie .site-title . Kliknij dwukrotnie wartość atrybutu i zastąp wartość em 2.3 wartością em, a następnie naciśnij klawisz ENTER. Zwróć uwagę, że tytuł wygląda większa.

Zmienianie wartości CSS w inspektorze strony
Kliknij kartę Style śledzenia znajdującą się w prawym okienku inspektora strony. Jest to alternatywny sposób wyświetlenia wszystkich stylów zastosowanych do zaznaczenia uporządkowanego według nazwy atrybutu.

Śledzenie stylów CSS wybranego elementu
Inną funkcją inspektora strony jest okienko Układ. Korzystając z trybu inspekcji, wybierz pasek nawigacyjny, a następnie kliknij kartę Układ w okienku po prawej stronie. Zobaczysz dokładny rozmiar wybranego elementu, a także jego przesunięcie, margines, wypełnienie i rozmiar obramowania. Zwróć uwagę, że można również zmodyfikować wartości z tego widoku.

Układ elementu w Inspektorze stron

Zadanie 2 — Znajdowanie i rozwiązywanie problemów ze stylem w galerii zdjęć

Jak zdiagnozować problemy ze stronami sieci Web w poprzednich wersjach programu Visual Studio? Prawdopodobnie znasz narzędzia do debugowania internetowego, które działają poza środowiskiem IDE programu Visual Studio, takimi jak Narzędzia deweloperskie programu Internet Explorer lub Firebug. Przeglądarki rozumieją tylko kod HTML, skrypty i style, podczas gdy podstawowa struktura generuje kod HTML, który zostanie renderowany. Z tego powodu często trzeba wdrożyć całą witrynę, aby zobaczyć, jak wyglądają strony internetowe.

Prawdopodobnie wykonano następujące kroki, gdy chcesz wykryć i rozwiązać problem w witrynie internetowej:

Uruchom rozwiązanie z programu Visual Studio lub wdróż stronę na serwerze internetowym.
W przeglądarce otwórz używane narzędzia deweloperskie lub po prostu otwórz kod źródłowy i style i spróbuj dopasować problem. Aby znaleźć zaangażowane pliki, użyto funkcji "Wyszukaj" lub "Wyszukaj w plikach" o nazwie klas stylów.
Po wykryciu błędu zatrzymaj przeglądarkę internetową i serwer.
Wyczyść pamięć podręczną przeglądarki.
Wróć do programu Visual Studio, aby zastosować poprawkę. Powtórz wszystkie kroki do przetestowania.

Ponieważ w ASP.NET MVC 4 nie ma prawdziwego interfejsu WYSIWYG, większość problemów ze stylem jest wykrywana na późniejszym etapie, po uruchomieniu lub wdrożeniu aplikacji internetowej. Teraz za pomocą narzędzia Page Inspector można wyświetlić podgląd dowolnej strony bez uruchamiania rozwiązania.

W tym zadaniu użyjesz inspektora strony i rozwiążesz niektóre problemy z aplikacją Galeria zdjęć.

Za pomocą narzędzia Page Inspector znajdź link Register (Rejestr ) i Log in (Zaloguj) po lewej stronie nagłówka.

Zwróć uwagę, że linki nie są wyświetlane w oczekiwanym miejscu po prawej stronie i są wyświetlane jak lista punktowana. Teraz wyrównasz linki do prawej strony i odpowiednio dopasujesz je do stylu.

Lokalizowanie linków Rejestrowanie i logowanie
Po wybraniu opcji Przełącz tryb inspekcji kliknij przycisk blisko, ale nie na, link Zarejestruj, aby otworzyć jego kod.

Zwróć uwagę, że kod źródłowy linków znajduje się w pliku _LoginPartial.cshtml, a nie index.cshtml ani _Layout.cshtml, które są miejscami, które można najpierw wyszukać. Został umieszczony bezpośrednio w poprawnym pliku źródłowym.
Na karcie Style znajdź i kliknij sekcję<> #login element, który jest kontenerem HTML dla tych linków.

Zwróć uwagę, że styl #login jest automatycznie umieszczony w pliku Site.css po kliknięciu. Ponadto kod jest teraz wyróżniony.

Wybieranie stylów CSS
Usuń komentarz atrybutu wyrównania tekstu w wyróżnionym kodzie, usuwając znaki otwierające i zamykające i zapisując plik Site.css .

Inspektor strony jest świadomy wszystkich różnych plików, które tworzą bieżącą stronę, i może wykryć, kiedy którykolwiek z tych plików ulegnie zmianie. Wyświetla alerty za każdym razem, gdy bieżąca strona w przeglądarce nie jest zsynchronizowana z plikami źródłowymi.
W przeglądarce Inspektor strony kliknij pasek znajdujący się pod paskiem adresu, aby ponownie załadować stronę.

Ponowne ładowanie strony

Linki znajdują się teraz po prawej stronie, ale nadal wyglądają jak lista punktowana. Teraz usuniesz punktory i wyrównasz linki w poziomie.

Zaktualizowana strona
Korzystając z trybu inspekcji, wybierz dowolne <elementy li> zawierające linki "Zarejestruj" i "Zaloguj się". Następnie kliknij sekcję<> #login element, aby uzyskać dostęp do kodu Styles.css.

Znajdowanie stylu
W pliku Style.css usuń komentarz dla elementów #login li . Dodany styl spowoduje ukrycie punktora i wyświetlenie elementów w poziomie.

Restyling linków logowania
Zapisz plik Style.css i kliknij raz na pasku znajdującym się pod adresem, aby ponownie załadować stronę. Zwróć uwagę, że linki są wyświetlane poprawnie.

Łącza wyrównane do prawej strony
Na koniec zmienisz tytuł nagłówka. Użyj trybu inspekcji, aby kliknąć tutaj tekst logo i przejść do kodu źródłowego, który go generuje.
Teraz jesteś w pliku _Layout.cshtml, zastąp tekst "logo tutaj" tekstem "Galeria zdjęć". Zapisz i zaktualizuj przeglądarkę Page Inspector.

Przypisywanie nowego tytułu

Zaktualizowano stronę galerii zdjęć
Na koniec wybierz projekt PhotoGallery i naciśnij klawisz F5 , aby uruchomić aplikację. Sprawdź, czy wszystkie zmiany działają zgodnie z oczekiwaniami.

Ćwiczenie 2. Używanie inspektora stron w projektach WebForms

W tym ćwiczeniu dowiesz się, jak wyświetlić podgląd i debugować rozwiązanie WebForms przy użyciu narzędzia Page Inspector. Najpierw wykonasz krótkie okrążenie wokół narzędzia, aby poznać funkcje Inspektora stron, które ułatwiają proces debugowania internetowego. Następnie będziesz pracować na stronie internetowej zawierającej problemy ze stylizowaniem. Dowiesz się, jak za pomocą narzędzia Page Inspector znaleźć kod źródłowy, który generuje problem i go rozwiązać.

Zadanie 1 — Eksplorowanie inspektora strony

W tym zadaniu dowiesz się, jak używać funkcji Page Inspector w kontekście projektu WebForms, który pokazuje galerię zdjęć.

Otwórz rozwiązanie Begin znajdujące się w folderze Source/Ex2-WebForms/Begin/ .
1. Przed kontynuowaniem należy pobrać brakujące pakiety NuGet. W tym celu kliknij menu Project (Projekt ) i wybierz polecenie Manage NuGet Packages (Zarządzaj pakietami NuGet).
2. W oknie dialogowym Zarządzanie pakietami NuGet kliknij pozycję Przywróć , aby pobrać brakujące pakiety.
3. Na koniec skompiluj rozwiązanie, klikając pozycjęKompiluj rozwiązanie kompilacji | .
  
  Uwaga
  
  Jedną z zalet korzystania z narzędzia NuGet jest to, że nie trzeba dostarczać wszystkich bibliotek w projekcie, zmniejszając rozmiar projektu. Za pomocą narzędzi NuGet Power Tools, określając wersje pakietów w pliku Packages.config, będzie można pobrać wszystkie wymagane biblioteki przy pierwszym uruchomieniu projektu. Dlatego po otwarciu istniejącego rozwiązania z tego laboratorium należy wykonać te kroki.
W Eksplorator rozwiązań znajdź stronę Default.aspx, kliknij ją prawym przyciskiem myszy i wybierz pozycję Widok w Inspektorze strony.

Otwieranie pliku Default.aspx za pomocą narzędzia Page Inspector
W oknie Page Inspector (Inspektor strony) zostanie wyświetlona wartość Default.aspx.

Wyświetlanie pliku Default.aspx w narzędziu Page Inspector

Narzędzie Page Inspector jest zintegrowane ze środowiskiem programu Visual Studio. Inspektor zawiera osadzoną przeglądarkę wraz z zaawansowanym profilerem HTML, który pokaże wybrany kod. Zwróć uwagę, że nie trzeba uruchamiać rozwiązania, aby zobaczyć wygląd stron.

Uwaga

Gdy szerokość przeglądarki Page Inspector jest mniejsza niż szerokość otwartej strony, strona nie będzie widoczna prawidłowo. W takim przypadku dostosuj szerokość Inspektora stron.
Kliknij kartę Pliki w inspektorze strony.

Zostaną wyświetlone wszystkie pliki źródłowe, które komponują renderowaną stronę domyślną. Jest to przydatna funkcja umożliwiająca błyskawiczne identyfikowanie wszystkich elementów, szczególnie podczas pracy z kontrolkami użytkownika i stronami wzorcowymi. Zwróć uwagę, że możesz również przejść do każdego z plików.

Karta Pliki
Kliknij przycisk Przełącz tryb inspekcji znajdujący się po lewej stronie kart.

To narzędzie pozwala wybrać dowolny element strony i wyświetlić kod HTML i źródło aspx.

Przełącz

Przycisk Przełącz tryb inspekcji
W przeglądarce Page Inspector przesuń wskaźnik myszy na elementy strony. Podczas przesuwania wskaźnika myszy nad dowolną częścią renderowanej strony wyświetlany jest typ elementu, a odpowiedni kod źródłowy lub znacznik źródłowy jest wyróżniony w edytorze programu Visual Studio.

Tryb inspekcji w działaniu

Uwaga

Nie maksymalizuj okna Inspektor strony lub nie będzie można wyświetlić karty podglądu z kodem źródłowym. Jeśli klikniesz element w inspektorze strony, gdy zostanie on zmaksymalizowany, zostanie wyświetlony kod źródłowy zaznaczenia, ale spowoduje ukrycie okna Inspektor strony.

Jeśli zwracasz uwagę na plik Default.aspx , zauważysz, że część kodu źródłowego, która generuje wybrany element, jest wyróżniona. Ta funkcja ułatwia edycję długich plików źródłowych, zapewniając bezpośredni i szybki sposób uzyskiwania dostępu do kodu.

Sprawdzanie elementów
Kliknij przycisk Przełącz tryb inspekcji ( ), znajdujących się na kartach Inspektor strony, aby wyłączyć kursor.
Wybierz kartę HTML , aby wyświetlić kod HTML renderowany w przeglądarce Page Inspector.
W kodzie HTML znajdź element listy za pomocą linku Koala i wybierz go.

Zwróć uwagę, że po wybraniu kodu odpowiednie dane wyjściowe zostaną automatycznie wyróżnione w przeglądarce. Ta funkcja jest przydatna do sprawdzenia, jak blok HTML jest renderowany na stronie.

Wybieranie elementu HTML na stronie
Kliknij przycisk Przełącz tryb inspekcji , aby włączyć tryb inspekcji , a następnie kliknij pasek nawigacyjny. Po prawej stronie kodu HTML w okienku Style zostanie wyświetlona lista ze stylami CSS zastosowanymi do wybranego elementu.

Uwaga

ponieważ nagłówek jest częścią układu witryny, inspektor strony otworzy również plik Site.Master i wyróżni segment kodu, którego dotyczy problem.

Odnajdywanie stylów i plików źródłowych wybranego elementu
Po włączeniu wskaźnika inspekcji przełącznika przesuń wskaźnik myszy poniżej paska menu i kliknij puste półkole.

Wybieranie elementu
W okienku Style znajdź element obrazu tła w grupie .main-content . Usuń zaznaczenieobrazu tła i zobacz, co się stanie. Zauważysz, że przeglądarka natychmiast odzwierciedli zmiany, a okrąg jest ukryty.

Uwaga

Zmiany stosowane na karcie Style inspektora stron nie mają wpływu na oryginalny arkusz stylów. Możesz usunąć zaznaczenie stylów lub zmienić ich wartości tyle razy, ile chcesz, ale zostaną przywrócone po odświeżeniu strony.

Włączanie i wyłączanie stylów CSS
Teraz kliknij tekst "logotutaj" w nagłówku przy użyciu trybu inspekcji.
Na karcie Style znajdź atrybut CSS o rozmiarze czcionki w grupie .site-title . Kliknij dwukrotnie atrybut raz, aby edytować jego wartość. Zastąp wartość 2.3em wartością 3em, a następnie naciśnij klawisz ENTER. Zwróć uwagę, że tytuł wygląda szerzej.

Zmienianie wartości CSS w narzędziu Page Inspector
Kliknij kartę Style śledzenia znajdującą się w okienku po prawej stronie Narzędzia Page Inspector. Jest to alternatywny sposób wyświetlenia wszystkich stylów zastosowanych do zaznaczenia uporządkowane według nazwy atrybutu.

Śledzenie stylów CSS wybranego elementu
Inną funkcją Inspektora stron jest okienko Układ. Przy użyciu trybu inspekcji wybierz pasek nawigacyjny, a następnie kliknij kartę Układ w okienku po prawej stronie. Zobaczysz dokładny rozmiar wybranego elementu, a także jego przesunięcie, margines, wypełnienie i rozmiar obramowania. Zwróć uwagę, że można również zmodyfikować wartości z tego widoku.

Układ elementu w narzędziu Page Inspector

Zadanie 2 . Znajdowanie i rozwiązywanie problemów ze stylem w galerii zdjęć

Jak zdiagnozować problemy ze stronami sieci Web z poprzednimi wersjami programu Visual Studio? Prawdopodobnie znasz narzędzia do debugowania internetowego działające poza środowiskiem IDE programu Visual Studio, takie jak Narzędzia deweloperskie programu Internet Explorer lub Firebug. Przeglądarki rozumieją tylko kod HTML, skrypty i style, podczas gdy platforma bazowa generuje kod HTML, który zostanie renderowany. Z tego powodu często trzeba wdrożyć całą witrynę, aby zobaczyć, jak wyglądają strony internetowe.

Prawdopodobnie wykonano następujące kroki, gdy chcesz wykryć i rozwiązać problem w witrynie internetowej:

Uruchom rozwiązanie z programu Visual Studio lub wdróż stronę na serwerze internetowym.
W przeglądarce otwórz używane narzędzia deweloperskie lub po prostu otwórz kod źródłowy i style i spróbuj dopasować go do problemu. Aby znaleźć używane pliki, należy użyć funkcji "Wyszukaj" lub "Wyszukaj w plikach" z nazwą klas stylów.
Po wykryciu błędu zatrzymaj przeglądarkę internetową i serwer.
Wyczyść pamięć podręczną przeglądarki.
Wróć do programu Visual Studio, aby zastosować poprawkę. Powtórz wszystkie kroki do przetestowania.

Ponieważ w ASP.NET WebForms nie ma prawdziwego interfejsu WYSIWYG, niektóre problemy ze stylem są wykrywane na późniejszym etapie, po uruchomieniu lub wdrożeniu. Teraz za pomocą narzędzia Page Inspector można wyświetlić podgląd dowolnej strony bez uruchamiania rozwiązania.

W tym zadaniu użyjesz inspektora strony do rozwiązania niektórych problemów z aplikacją Galeria zdjęć. W poniższych krokach wykryjesz i szybko rozwiążesz niektóre proste problemy z stylizowaniem w nagłówku.

Korzystając z inspekcji strony, znajdź linki Zarejestruj i Zaloguj w lewej części nagłówka.

Zwróć uwagę, że link nie jest wyświetlany w oczekiwanym miejscu po prawej stronie. Teraz wyrównasz link do prawej strony i odpowiednio go zmienisz.

Link logowania umieszczony po lewej stronie
Po wybraniu pozycji Przełącz tryb inspekcji wybierz link Zaloguj, aby otworzyć jego kod.

Zwróć uwagę, że kod źródłowy linku znajduje się w pliku Site.Master , a nie na stronie Default.aspx, która jest miejscem, które można znaleźć w pierwszej kolejności; Plik źródłowy został umieszczony bezpośrednio w prawidłowym pliku źródłowym.
Na karcie Style znajdź i kliknij sekcję<> #login element, który jest kontenerem HTML dla tych linków.

Zwróć uwagę, że styl #login znajduje się automatycznie w pliku Site.css po kliknięciu. Ponadto kod jest teraz wyróżniony.

Wybieranie stylów CSS
Usuń znaczniki komentarza atrybutu wyrównania tekstu w wyróżnionym kodzie, usuwając znaki otwierające i zamykające i zapisując plik Site.css .

Page Inspector jest świadomy wszystkich różnych plików tworzących bieżącą stronę i może wykryć, kiedy którykolwiek z tych plików się zmienia. Powiadamia o tym, gdy bieżąca strona w przeglądarce nie jest zsynchronizowana z plikami źródłowymi.
W przeglądarce Page Inspector kliknij pasek znajdujący się pod paskiem adresu, aby zapisać zmiany i ponownie załadować stronę.

Ponowne ładowanie strony

Linki znajdują się teraz po prawej stronie, ale nadal wyglądają jak lista punktowana. Teraz usuniesz punktory i wyrównasz linki w poziomie.

Zaktualizowana strona
Korzystając z trybu inspekcji, wybierz dowolne <elementy li> zawierające linki "Zarejestruj" i "Zaloguj się". Następnie kliknij sekcję<> #login element, aby uzyskać dostęp do kodu Styles.css.

Znajdowanie stylu
W pliku Style.css usuń znaczniki komentarza dla #login elementów li . Dodany styl spowoduje ukrycie punktora i wyświetlenie elementów w poziomie.

Restyling linków logowania
Zapisz plik Style.css i kliknij raz na pasku znajdującym się poniżej adresu, aby ponownie załadować stronę. Zwróć uwagę, że łącza są wyświetlane poprawnie.

Łącza wyrównane do prawej strony
Na koniec zmienisz tytuł nagłówka. Zamiast wyszukiwać tekst "logo tutaj" we wszystkich plikach, użyj trybu inspekcji, aby kliknąć tekst i przejść do kodu źródłowego, który go generuje.

Znajdowanie tytułu witryny
Teraz jesteś w witrynie Site.Master, zastąp tekst "logo tutaj" ciągiem "Galeria zdjęć". Zapisz i zaktualizuj przeglądarkę Page Inspector.

Zaktualizowano stronę galerii zdjęć
Na koniec naciśnij klawisz F5 , aby uruchomić aplikację, aby sprawdzić wszystkie zmiany działają zgodnie z oczekiwaniami.

Podsumowanie

Wykonując to Hands-On Lab, dowiesz się, jak używać narzędzia Page Inspector do wyświetlania podglądu aplikacji internetowej bez konieczności ponownego kompilowania i uruchamiania witryny sieci Web w przeglądarce. Ponadto dowiesz się, jak szybko znaleźć i naprawić usterki, korzystając bezpośrednio z renderowanych danych wyjściowych do kodu źródłowego.

Dodatek A: Instalowanie Visual Studio Express 2012 dla sieci Web

Możesz zainstalować program Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje przeprowadzą Cię przez kroki wymagane do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.

Przejdź do strony [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatywnie, jeśli masz już zainstalowany Instalator platformy internetowej, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" (Visual Studio Express 2012 dla sieci Web przy użyciu zestawu Windows Azure SDK).
Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy internetowej , nastąpi przekierowanie do pobrania i zainstalowania go najpierw.
Po otwarciu Instalatora platformy internetowej kliknij przycisk Zainstaluj , aby rozpocząć instalację.

Instalowanie Visual Studio Express
Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij przycisk Akceptuję , aby kontynuować.

Akceptowanie postanowień licencyjnych
Poczekaj na zakończenie procesu pobierania i instalacji.

Postęp instalacji
Po zakończeniu instalacji kliknij przycisk Zakończ.

Instalacja została ukończona
Kliknij przycisk Zakończ , aby zamknąć Instalatora platformy sieci Web.
Aby otworzyć Visual Studio Express dla sieci Web, przejdź do ekranu startowego i zacznij pisać "VS Express", a następnie kliknij kafelek VS Express for Web.

Kafelek programu VS Express dla sieci Web