Notatka
Dostęp do tej strony wymaga autoryzacji. Może spróbować zalogować się lub zmienić katalogi.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Autor: Tim Ammann
Page Inspector for Visual Studio 2012 to narzędzie do tworzenia aplikacji internetowych ze zintegrowaną przeglądarką. Wybierz dowolny element w zintegrowanej przeglądarce, a funkcja Page Inspector natychmiast wyróżnia źródło i arkusz CSS elementu. Możesz przeglądać dowolną stronę w aplikacji, szybko znaleźć źródła renderowanych znaczników i używać narzędzi przeglądarki bezpośrednio w środowisku programu Visual Studio.
W tym samouczku pokazano, jak włączyć tryb inspekcji, a następnie szybko zlokalizować i edytować reguły CSS oraz tekst w projekcie internetowym. W tym samouczku używany jest projekt aplikacji Web Forms, ale można także użyć narzędzia Page Inspector dla projektów stron internetowych i aplikacji MVC.
Samouczek zawiera następujące sekcje:
Tworzenie aplikacji internetowej
Wyświetlanie aplikacji za pomocą narzędzia Page Inspector
Używanie narzędzia Page Inspector do wprowadzania zmian w znacznikach
Podgląd zmian CSS w oknie Style
Wymagania wstępne
Uwaga / Notatka
Aby uzyskać najnowszą wersję narzędzia Page Inspector, użyj Instalatora platformy internetowej , aby zainstalować zestaw Azure SDK dla platformy .NET 2.0.
Page Inspector jest dołączony do narzędzi 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 utworzysz 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 formularzy internetowych.
Kliknij przycisk OK.
Aplikacja zostanie otwarta w widoku źródłowym .
Teraz, gdy masz aplikację do pracy, możesz użyć narzędzia Page Inspector, aby ją zbadać i zmodyfikować.
Wyświetlanie aplikacji za pomocą narzędzia Page Inspector
Następnie wyświetlisz aplikację za pomocą narzędzia Page Inspector. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt, a następnie wybierz pozycję Widok w Inspektorze stron.
Domyślnie, gdy narzędzie Page Inspector jest uruchamiane po raz pierwszy, jest zadokowane jako wąskie okno po lewej stronie środowiska programu Visual Studio. Pozostaw go zadokowany po lewej stronie i ustaw na wygodną dla Ciebie szerokość lub zadokuj go w jednym z obszarów narzędziowych na górze, na dole lub po prawej stronie.
Jeśli oddokujesz okno Inspektora Strony, możesz umieścić je poza programem Visual Studio, a nawet na drugim monitorze, jeśli taki posiadasz. Jednak w celu użycia ALT+TAB między Page Inspector i Visual Studio, gdy okno Page Inspector jest oddokowane, przejdź do Narzędzia>Opcje>Środowisko>Zakładki i Windows, a następnie w obszarze Tab Well wyczyść pole wyboru o nazwie Przestawne okna narzędzi zawsze pozostają na wierzchu okna głównego:
Górna część okna Inspektora Strony pokazuje bieżącą stronę w oknie przeglądarki. W dolnym okienku wyświetlana jest strona w formacie znaczników HTML po lewej, a po prawej niektóre karty umożliwiają inspekcję różnych aspektów strony. Dolne okienko jest podobne do narzędzi deweloperskich F12 w programie Internet Explorer. (Jednak w przeciwieństwie do narzędzi deweloperskich, można użyć narzędzia Page Inspector bezpośrednio w programie Visual Studio).
W tym samouczku skorzystasz z okienka przeglądarki Page Inspector oraz kart HTML i Style, aby szybko nawigować i wprowadzać zmiany w aplikacji.
Włącz tryb inspekcji
Następnie zobaczysz, jak działa tryb inspekcji inspektora strony. W oknie Inspektor strony kliknij przycisk Inspekcja .
Aby wyświetlić tryb inspekcji w działaniu, przesuń wskaźnik myszy nad różnymi częściami strony w oknie przeglądarki Page Inspector. Tak jak to robisz, wskaźnik myszy zmienia się na duży znak plus, a element pod spodem jest wyróżniony:
Podczas przesuwania wskaźnika myszy zwróć uwagę, że
Zawartość w widoku źródłowym zmienia się, aby pokazać znaczniki odpowiadające wybranemu elementowi na stronie. Odpowiedni znacznik jest wyróżniony. Jeśli źródło znajduje się w innym pliku, ten plik jest otwierany w widoku Źródło z wyróżnionym odpowiednim znacznikiem.
Znacznik wyświetlany na karcie HTML w Narzędziu Page Inspector również zmienia się tak, aby odpowiadał wybranemu elementowi na stronie. Na karcie HTML zostanie opisany odpowiedni znacznik.
Na karcie Style są wyświetlane reguły CSS dotyczące bieżącego zaznaczenia.
Używanie narzędzia Page Inspector do wprowadzania zmian w znacznikach
Teraz zobaczysz, jak za pomocą narzędzia Page Inspector można znaleźć i wprowadzić zmiany w znacznikach lub tekście, których lokalizacja może nie być od razu oczywista.
Umieść inspektora strony w trybie inspekcji, a następnie przewiń do dołu strony głównej.
Gdy tylko wejdziesz do obszaru stopki, Inspektor Strony otwiera plik układu Site.Master w widoku Źródło na karcie tymczasowej na prawo od innych kart i wyróżnia sekcję strony wzorcowej, którą wybrałeś. Pokazuje to, jak inspektor strony może znaleźć i wyświetlić zawartość na stronie, która może pochodzić z innego pliku niż ten, który został pierwotnie otwarty.
W oknie przeglądarki Page Inspector przesuń wskaźnik myszy nad wierszem z powiadomieniem o prawach autorskich .
Na stronie Site.Master zostanie wyróżniony odpowiedni wiersz.
Dodaj tekst na końcu wiersza w pliku Site.Master .
<p>© <%: DateTime.Now.Year %> — Moja aplikacja ASP.NET to hit!</p>
Teraz naciśnij Ctrl+Alt+Enter lub kliknij pasek aktualizacji, aby wyświetlić wyniki w oknie przeglądarki Page Inspector.
Być może myślałeś, że stopka znajdowała się na stronie Default.aspx, ale okazało się, że znajdowała się ona na stronie układu wzorcowego, a Page Inspector znalazł ją dla Ciebie.
Tryb inspekcji i okno HTML
Następnie zapoznasz się z oknem HTML i dowiesz się, jak mapuje on elementy.
Umieść inspektora strony w trybie inspekcji.
Kliknij górną część strony z napisem "logo tutaj". Dokładniej sprawdzasz konkretny element, więc wyświetlanie w oknie przeglądarki nie zmienia się już podczas przesuwania wskaźnika myszy.
Teraz przenieś wskaźnik myszy do okna HTML . Po przeniesieniu wskaźnika myszy inspektor strony przedstawia element w oknie HTML i wyróżnia odpowiedni element w oknie przeglądarki.
Tak jak poprzednio, Inspektor strony otwiera plik Site.Master na karcie tymczasowej. Kliknij kartę Site.Master, a odpowiedni znacznik jest wyróżniony w sekcji nagłówka <> :
Podgląd zmian CSS w oknie Style
Następnie zobaczysz, jak można wyświetlić podgląd zmian w arkuszu CSS za pomocą okna Style inspektora stron.
Kliknij przycisk 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ż zostanie wyświetlona etykieta div.content-wrapper .
Kliknij raz w sekcji div.content-wrapper, a następnie przenieś wskaźnik myszy do okna Style . W selektorze klasy .featured .content-wrapper, wyczyść i zaznacz pole wyboru dla właściwości background-color.
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 red. Zmiana jest wyświetlana natychmiast:
Okno Style ułatwia testowanie i wyświetlanie podglądu zmian CSS przed zatwierdzeniem zmian w samym arkuszu stylów.
Automatyczna synchronizacja CSS
Uwaga / Notatka
Ta funkcja wymaga wersji 1.3 narzędzia Page Inspector.
Funkcja automatycznej synchronizacji CSS umożliwia bezpośrednią edycję pliku CSS i natychmiastowe wyświetlanie zmian w przeglądarce Page Inspector.
Kliknij pozycję Inspekcja , aby umieścić inspektora strony 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 polecanych .content-wrapper. 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ść background-color na "czerwony". Zmiana jest wyświetlana natychmiast w przeglądarce Page Inspector.
Korzystanie z selektora kolorów CSS
Następnie dowiesz się, jak szybko znaleźć i zmienić arkusz CSS dla wyróżnionego tekstu w aplikacji domyślnej za pomocą narzędzia Page Inspector. W tym przykładzie zdecydowałeś, że nie podoba ci się niebieskie wyróżnianie, i chcesz zmienić je na inny kolor.
Kliknij przycisk Inspekcja .
W oknie przeglądarki Page Inspector najedź wskaźnikiem myszy na wyróżniony tekst "filmy wideo, samouczki i przykłady", aby pojawiła się etykieta CSS "mark".
Kliknij tekst, aby go zaznaczyć. Odpowiedni selektor znaczników CSS jest wyświetlany w dolnej części okna Style .
Kliknij selektor znacznika. Spowoduje to otwarcie pliku Site.css dla aplikacji internetowej. Kliknij kartę Site.css, a odpowiedni kod CSS dla selektora jest wyróżniony:
Wybierz i usuń wiersz z właściwością kolor tła.
Teraz użyjesz nowego selektora kolorów CSS programu Visual Studio 2012, aby wybrać nowy kolor właściwości koloru tła znacznika .
Korzystanie z selektora kolorów CSS programu Visual Studio 2012
Edytor CSS w programie Visual Studio 2012 ma selektor kolorów, który ułatwia wybieranie i wstawianie kolorów. Ma prosty pasek kolorów i rozwijany selektor, który oferuje bardziej precyzyjną kontrolę.
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 wierszu, w którym znajdowała się właściwość background-color, wpisz "bc" i naciśnij strzałkę w dół jednokrotnie.
Podczas wpisywania pierwszego znaku każdego wyrazu we właściwości rozdzielanej łącznikiem, takiej jak "kolor tła", funkcja IntelliSense filtruje listę, aby wyświetlić tylko zgodne właściwości:
Teraz wpisz dwukropek. Gdy to zrobisz, zostanie wstawiona pełna nazwa właściwości koloru tła. Typ # lub rgb(, a pasek selektora kolorów jest wyświetlany:
Aby zobaczyć, jak działa pasek selektora kolorów, kliknij jego kolory za pomocą wskaźnika myszy lub naciśnij klawisz strzałki w dół, a następnie użyj klawiszy strzałki w lewo i w prawo, aby przejść przez kolory. Podczas odwiedzania koloru zostanie wyświetlona odpowiednia wartość właściwości koloru tła:
W tym momencie możesz nacisnąć klawisz Enter, aby wybrać wartość, a następnie dodać średnik (;), aby zakończyć wpis CSS. Na razie przejdź do następnej sekcji, aby zobaczyć, jak działa wyskakujący selektor kolorów.
Korzystanie z selektora kolorów Pop-Down
Gdy pasek kolorów nie ma dokładnego koloru, którego szukasz, 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 na pasku pionowym po prawej stronie. Spowoduje to wyświetlenie gradientu dla tego koloru w oknie głównym. Wybierz kolor bezpośrednio z pionowego paska, naciskając Enter, lub kliknij dowolny punkt w oknie głównym, aby wybrać z większą precyzją.
Jeśli na ekranie komputera ma być używany kolor (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żna 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 Enter, a następnie wpisz średnik, aby ukończyć wpis koloru tła w pliku Site.css .
Pasek aktualizacji Inspektor strony
Page Inspector natychmiast wykrywa zmianę pliku Site.css (lub dowolnego pliku w aplikacji) i wyświetla alert na pasku aktualizacji.
Aby zapisać wszystkie pliki i odświeżyć przeglądarkę Page Inspector, naciśnij Ctrl+Alt+Enter lub kliknij pasek aktualizacji. Zmiana koloru wyróżnienia zostanie wyświetlona w przeglądarce:
Zwróć uwagę, że wygodnie odświeżono przeglądarkę Page Inspector bezpośrednio w środowisku programu Visual Studio. Korzystanie z narzędzia Page Inspector zamiast zewnętrznej przeglądarki umożliwia pozostanie w edytorze podczas tworzenia aplikacji internetowych.
Zobacz też
Wprowadzenie do narzędzia Page Inspector (wideo z kanałem 9)