Jak korzystać z narzędzi programistycznych przeglądarki internetowej

Oprócz większości twórców przeglądarek, którzy koncentrują się na codziennym użytkowniku, który chce surfować po sieci, pomagają także twórcom stron internetowych, projektantom i specjalistom ds. Zapewnienia jakości, którzy pomagają budować aplikacje i witryny, do których dostęp mają ci użytkownicy, poprzez integrację zaawansowanych narzędzi z przeglądarkami. sami.

Minęły czasy, gdy jedyne narzędzia do programowania i testowania znalezione w przeglądarce pozwoliły na przeglądanie kodu źródłowego strony i nic więcej. Dzisiejsze przeglądarki pozwalają znacznie głębiej nurkować, wykonując czynności takie jak wykonywanie i debugowanie fragmentów kodu JavaScript, sprawdzanie i edytowanie elementów DOM, monitorowanie ruchu sieciowego w czasie rzeczywistym, gdy aplikacja lub strona ładuje się w celu identyfikacji wąskich gardeł, analizowania wydajności CSS, upewniania się, że kod jest nie wykorzystuje zbyt wiele pamięci lub zbyt wiele cykli procesora i wiele więcej. Z perspektywy testowania możesz odtworzyć, jak aplikacja lub strona internetowa będzie renderowana w różnych przeglądarkach, a także na różnych urządzeniach i platformach dzięki magii responsywnego projektu i wbudowanych symulacji. Najlepsze jest to, że możesz to wszystko zrobić bez opuszczania przeglądarki!

Poniższe samouczki opisują, jak uzyskać dostęp do narzędzi programistycznych w kilku popularnych przeglądarkach internetowych.

Google Chrome

Narzędzia programistów Chrome pozwalają edytować i debugować kod, kontrolować poszczególne komponenty, aby ujawniać problemy z wydajnością, symulować różne ekrany urządzeń, w tym te z systemem Android lub iOS, i wykonywać kilka innych przydatnych funkcji.

1. Kliknij przycisk menu głównego Chrome oznaczony trzema poziomymi liniami i znajdujący się w prawym górnym rogu przeglądarki.
2. Po wyświetleniu menu rozwijanego umieść kursor myszy nad ikoną Więcej narzędzi opcja.
3. Powinno teraz pojawić się podmenu. Wybierz opcję oznaczoną etykietą Narzędzia deweloperskie . Możesz także użyć następującego skrótu klawiaturowego zamiast tego menu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPCJA) + POLECENIE + I )
4. Interfejs Chrome Developer Tools powinien teraz zostać wyświetlony, jak pokazano na tym przykładowym zrzucie ekranu. W zależności od Twojej wersji Chrome początkowy układ może się nieznacznie różnić od przedstawionego tutaj. Główny koncentrator narzędzi programistycznych, zazwyczaj umieszczony z dołu lub z prawej strony ekranu, zawiera następujące zakładki.Elementy: Zapewnia możliwość sprawdzania kodu CSS i HTML oraz edytowania CSS w locie, widząc efekty zmian w czasie rzeczywistym.Konsola: Konsola JavaScript Chrome pozwala na bezpośrednie wprowadzanie poleceń oraz diagnostyczne debugowanie.Źródła: Umożliwia debugowanie kodu JavaScript za pomocą wydajnego interfejsu graficznego.Sieć: Kategoryzuje i wyświetla szczegółowe informacje o każdej powiązanej operacji na aktywnej aplikacji lub stronie, w tym pełne nagłówki żądań i odpowiedzi, a także zaawansowane pomiary czasowe.Oś czasu: Pozwala na dogłębną analizę każdego działania wykonywanego w przeglądarce, gdy tylko zostanie zainicjowane żądanie strony lub żądania aplikacji.
5. Oprócz tych sekcji można również uzyskać dostęp do następujących narzędzi za pośrednictwem >> ikona, znajdująca się po prawej stronie Oś czasu patka.Profil: Podzielone na Profiler procesora i Stertownik sterty sekcje, zapewnia kompleksowe wykorzystanie pamięci i ogólny czas wykonania aktywnej aplikacji lub strony.Bezpieczeństwo: Podkreśla problemy z certyfikatami i inne problemy związane z bezpieczeństwem z aktywną stroną lub aplikacją.Zasoby: Tutaj możesz sprawdzić pliki cookie, pamięć lokalną, pamięć podręczną aplikacji i inne lokalne źródła danych używane przez bieżącą stronę internetową lub aplikację.Audyty: Oferuje sposoby optymalizacji czasu ładowania strony i aplikacji oraz ogólnej wydajności.
6. Tryb urządzenia umożliwia przeglądanie aktywnej strony w symulatorze, który renderuje ją niemal dokładnie tak, jak na jednym z kilkunastu urządzeń, w tym kilka dobrze znanych modeli Android i iOS, takich jak iPad, iPhone i Samsung Galaxy. Masz również możliwość emulowania niestandardowych rozdzielczości ekranu, aby dopasować je do konkretnych potrzeb związanych z programowaniem lub testowaniem. Aby przełączać Tryb urządzenia włączanie i wyłączanie, wybierz ikonę telefonu komórkowego znajdującą się bezpośrednio po lewej stronie Elementy patka.
7. Możesz także dostosować wygląd swoich narzędzi programistycznych, klikając najpierw przycisk menu reprezentowany przez trzy pionowo umieszczone kropki i znajdujący się po prawej stronie wspomnianych wcześniej kart. W tym rozwijanym menu możesz zmienić położenie stacji dokującej, pokazać lub ukryć różne narzędzia, a także uruchomić bardziej zaawansowane elementy, takie jak inspektor urządzeń. Przekonasz się, że interfejs narzędzi programistycznych jest w dużym stopniu dostosowywany za pomocą ustawień podanych w tej sekcji.

Mozilla Firefox

Sekcja programisty przeglądarki Firefox zawiera narzędzia dla projektantów, programistów i testerów, takich jak edytor stylów i kroplomierz celujący w piksele.

Lifewire Zalecane lektury:Top 25 skrypty użytkownika Greasemonkey i Tampermonkey

1. Kliknij przycisk menu głównego Firefoksa, reprezentowany przez trzy poziome linie i znajdujący się w prawym górnym rogu okna przeglądarki.
2. Po wyświetleniu rozwijanego menu wybierz ikonę oznaczoną etykietą Deweloper . The Twórca stron internetowych menu powinno być teraz wyświetlane, zawierające następujące opcje.Zauważysz, że większość pozycji menu ma przypisane skróty klawiaturowe.Przełącz narzędzia: Wyświetla lub ukrywa interfejs narzędzi programistycznych, zwykle umieszczony w dolnej części okna przeglądarki. Skrót klawiaturowy: Mac OS X ( ALT (OPCJA) + POLECENIE + I ), Windows ( CTRL + SHIFT + I )Inspektor: Pozwala kontrolować i / lub modyfikować kod CSS i HTML na aktywnej stronie, a także na urządzeniu przenośnym poprzez zdalne debugowanie. Skrót klawiaturowy: Mac OS X ( ALT (OPCJA) + POLECENIE + C ), Windows ( CTRL + SHIFT + C )Konsola internetowa: Umożliwia wykonywanie wyrażeń JavaScript na aktywnej stronie, a także przeglądanie zróżnicowanego zestawu rejestrowanych danych, w tym ostrzeżeń dotyczących zabezpieczeń, żądań sieciowych, komunikatów CSS i innych. Skrót klawiaturowy: Mac OS X ( ALT (OPCJA) + POLECENIE + K ), Windows ( CTRL + SHIFT + K )Debugger: The JavaScript Debugger pozwala wykrywać i naprawiać defekty, ustawiając punkty przerwania, sprawdzając węzły DOM, zewnętrzne źródła black boxingu i wiele więcej. Tak jak w przypadku Inspektor , ta funkcja obsługuje także zdalne debugowanie. Skrót klawiaturowy: Mac OS X ( ALT (OPCJA) + POLECENIE + S ), Windows ( CTRL + SHIFT + S) Edytor stylów: Umożliwia tworzenie nowych arkuszy stylów i włączanie ich do aktywnej strony internetowej lub edytowanie istniejących arkuszy i testowanie, jak zmiany są renderowane w przeglądarce za pomocą jednego kliknięcia. Skrót klawiaturowy: Mac OS X, Windows ( SHIFT + F7 )Wydajność: Udostępnia szczegółowy podział wydajności sieci strony aktywnej, danych o klatek na sekundę, czasu wykonania i stanu skryptu JavaScript, migania farby i wielu innych. Skrót klawiaturowy: Mac OS X, Windows ( SHIFT + F5 )Sieć: Wyświetla każde żądanie sieciowe zainicjowane przez przeglądarkę wraz z odpowiednią metodą, domeną początkową, typem, rozmiarem i czasem, jaki upłynął. Skrót klawiaturowy: Mac OS X ( ALT (OPCJA) + POLECENIE + Q ), Windows ( CTRL + SHIFT + Q )Pasek narzędzi deweloperów: Otwiera interaktywny interpreter wiersza poleceń. Wchodzić Wsparcie w tłumaczu dla listy wszystkich dostępnych poleceń i ich właściwej składni. Skrót klawiaturowy: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Zapewnia możliwość tworzenia i uruchamiania aplikacji internetowych za pomocą rzeczywistego urządzenia z systemem Firefox OS lub za pomocą Symulatora Firefox OS. Skrót klawiaturowy: Mac OS X, Windows ( SHIFT + F8 )Konsola przeglądarki: Zapewnia taką samą funkcjonalność jak Konsola internetowa (patrz wyżej). Wszystkie zwrócone dane dotyczą jednak całej aplikacji Firefox (w tym rozszerzeń i funkcji przeglądarki), a nie tylko aktywnej strony internetowej. Skrót klawiaturowy: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )Responsive Design View: Umożliwia natychmiastowe przeglądanie strony internetowej w różnych rozdzielczościach, układach i rozmiarach ekranu, aby naśladować wiele urządzeń, w tym tablety i smartfony. Skrót klawiaturowy: Mac OS X ( ALT (OPCJA) + POLECENIE + M ), Windows ( CTRL + SHIFT + M )Kroplomierz: Wyświetla kod szesnastkowy dla pojedynczo wybranych pikseli.Brudnopis: Pozwala pisać, edytować, integrować i uruchamiać fragmenty kodu JavaScript z wyskakującego okna przeglądarki Firefox. Skrót klawiaturowy: Mac OS X, Windows ( SHIFT + F4 )Źródło strony: Oryginalne narzędzie deweloperskie oparte na przeglądarce, ta opcja wyświetla po prostu dostępny kod źródłowy dla aktywnej strony. Skrót klawiaturowy: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Uzyskaj więcej narzędzi: Otwiera Przybornik programisty internetowego kolekcja na oficjalnej stronie Mozilli z dodatkowymi kilkoma popularnymi rozszerzeniami, takimi jak Firebug i Greasemonkey.

Microsoft Edge / Internet Explorer

Powszechnie określane jako Narzędzia programistyczne F12 , hołd dla skrótu klawiaturowego, który uruchomił interfejs od wcześniejszych wersji Internet Explorera, zestaw narzędzi dla programistów w IE11 i Microsoft Edge przeszedł długą drogę od samego początku, oferując bardzo przydatną grupę monitorów, debuggerów, emulatorów i kompilatory.

1. Kliknij na Więcej akcji menu, reprezentowane przez trzy kropki i znajdujące się w prawym górnym rogu okna przeglądarki. Po wyświetleniu menu rozwijanego wybierz opcję oznaczoną etykietą Narzędzia programistyczne F12 . Jak już wspomniałem, możesz także uzyskać dostęp do narzędzi poprzez F12 skrót klawiszowy.
2. Interfejs programistyczny powinien być teraz wyświetlany, zazwyczaj u dołu okna przeglądarki. Dostępne są następujące narzędzia, z których każdy jest dostępny po kliknięciu odpowiedniego nagłówka karty lub przy użyciu dołączonego skrótu klawiaturowego.Eksplorator DOM: Pozwala edytować arkusze stylów i HTML na aktywnej stronie, renderując zmodyfikowane wyniki. Wykorzystuje funkcję IntelliSense do autouzupełniania kodu w stosownych przypadkach. Skrót klawiszowy: (CTRL + 1) Konsola: Zapewnia możliwość przesyłania informacji dotyczących debugowania, w tym liczników, zegarów, śladów i niestandardowych komunikatów za pośrednictwem zintegrowanego interfejsu API. Umożliwia także wstrzykiwanie kodu do aktywnej strony internetowej i modyfikowanie wartości przypisanych do poszczególnych zmiennych w czasie rzeczywistym. Skrót klawiszowy: (CTRL + 2) Debugger: Pozwala ustawić punkty przerwania i debugować kod podczas wykonywania, linia po linii, jeśli to konieczne. Skrót klawiszowy: (CTRL + 3) Sieć: Wyświetla każde żądanie sieciowe zainicjowane przez przeglądarkę podczas ładowania i uruchamiania strony, w tym szczegóły protokołu, typ zawartości, wykorzystanie przepustowości i wiele innych. Skrót klawiszowy: (CTRL + 4) Wydajność: Określa liczbę klatek na sekundę, wykorzystanie procesora i inne parametry związane z wydajnością, aby przyspieszyć ładowanie stron i inne czynności. Skrót klawiszowy: (CTRL + 5) Pamięć: Pomaga wyizolować i skorygować potencjalne wycieki pamięci na bieżącej stronie internetowej, wyświetlając oś czasu użycia pamięci wraz z migawkami z różnych przedziałów czasu. Skrót klawiszowy: (CTRL + 6) Współzawodnictwo: Pokazuje, jak aktywna strona byłaby renderowana w różnych rozdzielczościach i rozmiarach ekranu, emulując smartfony, tablety i inne urządzenia. Zapewnia również możliwość modyfikacji agenta użytkownika i orientacji strony, a także symulowania różnych geolokalizacji poprzez wprowadzenie szerokości i długości geograficznej. Skrót klawiszowy: (CTRL + 7)
3. Aby wyświetlić Konsola podczas gdy w którymkolwiek z pozostałych narzędzi kliknij kwadratowy przycisk z prawym wspornikiem wewnątrz, znajdującym się w prawym górnym rogu interfejsu narzędzi programistycznych.
4. Aby oddokować, interfejs narzędzi programisty staje się oddzielnym oknem, kliknij przycisk reprezentowany przez dwa kaskadowe prostokąty lub użyj następującego skrótu klawiaturowego: CTRL + P . Możesz przywrócić narzędzia w ich pierwotnej lokalizacji, naciskając CTRL + P drugi raz.

Apple Safari (tylko OS X)

Zróżnicowany zestaw narzędzi dla programistów Safari odzwierciedla dużą społeczność programistów, która wykorzystuje komputer Mac do projektowania i programowania. Oprócz potężnej konsoli i tradycyjnych funkcji rejestrowania i debugowania, dostępny jest również łatwy w użyciu tryb projektowania responsywnego oraz narzędzie do tworzenia własnych rozszerzeń przeglądarki.

1. Kliknij Safari w menu przeglądarki, znajdującym się u góry ekranu. Po wyświetleniu menu rozwijanego wybierz Preferencje . Możesz także użyć następującego skrótu klawiaturowego zamiast tego elementu menu: COMMAND + COMMA (,)
2. Safari Preferencje interfejs powinien być teraz wyświetlany, nakładając się na okno przeglądarki. Kliknij na zaawansowane ikona znajdująca się po prawej stronie nagłówka.
3. The zaawansowane preferencje powinny być teraz widoczne. U dołu tego ekranu znajduje się opcja oznaczona Pokaż menu rozwijane na pasku menu , wraz z polem wyboru. Jeśli w polu nie ma zaznaczenia, kliknij go raz, aby tam umieścić.
4. Zamknij Preferencje interfejs klikając na czerwony "x" znajdujący się w lewym górnym rogu.
5. Powinieneś teraz zauważyć nową opcję w menu przeglądarki o nazwie Rozwijać się , znajduje się między Zakładki i Okno . Kliknij ten element menu. Powinno zostać wyświetlone menu rozwijane zawierające następujące opcje.Otwórz stronę z: Pozwala otworzyć aktywną stronę internetową w jednej z innych przeglądarek aktualnie zainstalowanych na komputerze Mac.Agent użytkownika: Pozwala wybrać spośród kilkunastu predefiniowanych wartości agenta użytkownika, w tym kilku wersji Chrome, Firefox i Internet Explorer, a także zdefiniować własny niestandardowy ciąg znaków.Wejdź w tryb projektowania responsywnego: Renderuje bieżącą stronę tak, jakby była wyświetlana na różnych urządzeniach i przy różnych rozdzielczościach ekranu.Pokaż inspektora sieci: Uruchamia główny interfejs narzędzi deweloperskich Safari, zwykle umieszczany u dołu ekranu przeglądarki i zawierający następujące sekcje: Elementy , Sieć , Zasoby , Osie czasu , Debugger , Przechowywanie , Konsola .Pokaż konsolę błędów: Uruchamia również interfejs narzędzi programistycznych bezpośrednio do Konsola zakładka wyświetlająca błędy, ostrzeżenia i inne przeszukiwalne dane dziennika.Pokaż źródło strony: Otwiera Zasoby zakładka, która wyświetla kod źródłowy dla aktywnej strony podzielonej na kategorie według dokumentu.Pokaż zasoby strony: Pełni tę samą funkcję co funkcja Pokaż źródło strony opcja.Pokaż Edytor snippetów: Otwiera nowe okno, w którym możesz wpisać kod CSS i HTML, przeglądając jego wyniki w locie.Pokaż narzędzie do tworzenia rozszerzeń: Zapewnia możliwość tworzenia lub edytowania rozszerzeń Safari za pomocą CSS, HTML i JavaScript.Pokaż nagrywanie na osi czasu: Otwiera Osie czasu karta i zaczyna wyświetlać żądania sieciowe, informacje o układzie i renderowaniu, a także wykonywanie kodu JavaScript w czasie rzeczywistym.Puste pamięci podręczne: Usuwa całą pamięć podręczną aktualnie przechowywaną na dysku twardym.Wyłącz pamięć podręczną: Zatrzymuje Safari przed buforowaniem, tak aby cała zawartość była pobierana z serwera po każdym wczytaniu strony.Wyłącz obrazy: Zapobiega renderowaniu obrazów na wszystkich stronach internetowych.Wyłącz style: Ignoruje właściwości CSS po załadowaniu strony.Wyłącz JavaScript: Ogranicza wykonywanie skryptów JavaScript na wszystkich stronach.Wyłącz rozszerzenia: Zabrania uruchamiania wszystkich zainstalowanych rozszerzeń w przeglądarce.Wyłącz hacki związane z witryną: Jeśli Safari zostało zmodyfikowane, aby jawnie obsługiwać problemy związane z aktywną stroną sieci Web, ta opcja blokuje te zmiany, aby strona ładowała się tak, jak przed wprowadzeniem tych modyfikacji.Wyłącz lokalne ograniczenia plików: Zezwala przeglądarce na dostęp do plików na dyskach lokalnych, czyli akcja domyślnie ograniczona ze względów bezpieczeństwa.Wyłącz ograniczenia krzyżowe: Ograniczenia te są wprowadzane domyślnie, aby zapobiec XSS i innym potencjalnym zagrożeniom. Często jednak muszą być tymczasowo wyłączone w celach programistycznych.Zezwalaj na JavaScript z pola wyszukiwania inteligentnego: Po włączeniu zapewnia możliwość wprowadzania adresów URL za pomocą javascript: włączone bezpośrednio do paska adresu.Traktuj certyfikaty SHA-1 jako niepewne: Certyfikaty SSL używające algorytmu SHA-1 są powszechnie uważane za przestarzałe i wrażliwe.