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

2024 Autor: Abigail Brown | [email protected]. Ostatnio zmodyfikowany: 2023-12-17 06:57

Oprócz tego, że większość twórców przeglądarek skupia się na zwykłych użytkownikach, którzy chcą surfować po sieci, są oni również adresowani do twórców stron internetowych, projektantów i specjalistów ds. zapewnienia jakości, którzy pomagają tworzyć aplikacje i witryny, z których korzystają ci użytkownicy, integrując zaawansowane narzędzia bezpośrednio do samych przeglądarek.

Minęły czasy, w których jedyne narzędzia do programowania i testowania znalezione w przeglądarce pozwalały przeglądać kod źródłowy strony i nic więcej. Dzisiejsze przeglądarki pozwalają na znacznie głębsze zagłębienie się w takie rzeczy, jak wykonywanie i debugowanie fragmentów kodu JavaScript, sprawdzanie i edytowanie elementów DOM, monitorowanie ruchu sieciowego w czasie rzeczywistym podczas ładowania aplikacji lub strony w celu identyfikowania wąskich gardeł, analizowanie wydajności CSS, upewnianie się, że kod jest nie wykorzystując zbyt dużej ilości pamięci lub zbyt wielu cykli procesora i wiele więcej.

Z perspektywy testowania możesz odtworzyć sposób renderowania aplikacji lub strony internetowej w różnych przeglądarkach, a także na różnych urządzeniach i platformach dzięki magii responsywnego projektowania i wbudowanych symulatorów. Najlepsze jest to, że możesz to wszystko zrobić bez opuszczania przeglądarki!

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

Google Chrome

Narzędzia dla programistów Chrome umożliwiają edycję i debugowanie kodu, audytowanie poszczególnych komponentów w celu ujawnienia problemów z wydajnością, symulowanie różnych ekranów urządzeń, w tym tych z systemem Android lub iOS, oraz wykonywanie kilku innych przydatnych funkcji.

1. Wybierz menu główne Chrome, oznaczone trzema poziomymi liniami i znajdujące się w prawym górnym rogu przeglądarki.

2. Kiedy pojawi się menu rozwijane, najedź kursorem myszy na opcję Więcej narzędzi.

   

3. Powinno się teraz pojawić podmenu. Wybierz opcję oznaczoną Narzędzia programistyczne. Zamiast tego elementu menu możesz również użyć następującego skrótu klawiaturowego: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +POLECENIE+I)

   

4. Interfejs Narzędzi dla programistów Chrome powinien być teraz wyświetlany, jak pokazano na tym przykładowym zrzucie ekranu. W zależności od używanej wersji Chrome początkowy układ, który widzisz, może nieznacznie różnić się od przedstawionego tutaj. Główne centrum narzędzi programistycznych, zwykle znajdujące się u dołu lub po prawej stronie ekranu, zawiera następujące karty.

5. Oprócz tych sekcji, możesz również uzyskać dostęp do następujących narzędzi za pomocą ikony >>, znajdującej się po prawej stronie Wydajność tab.

   • Pamięć: Monitoruj i zapisuj użycie pamięci na stronie internetowej. Możesz zobaczyć, jak ciężki jest kod JavaScript w Twojej witrynie.
   • Bezpieczeństwo: Wyróżnia problemy z certyfikatami i inne problemy związane z bezpieczeństwem aktywnej strony lub aplikacji.
   • Aplikacja: Sprawdź zasoby używane przez aplikację internetową. Uzyskaj pełny opis tego, co jest używane.
   • Audyty: Oferuje sposoby optymalizacji czasu ładowania strony lub 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 wyglądałaby na jednym z kilkunastu urządzeń, w tym kilku dobrze znanych Android oraz modele iOS, takie jak iPad, iPhone i Samsung Galaxy. Masz również możliwość emulowania niestandardowych rozdzielczości ekranu, aby dopasować je do konkretnych potrzeb programistycznych lub testowych.

   Aby włączyć lub wyłączyć Tryb urządzenia, wybierz ikonę telefonu komórkowego umieszczoną bezpośrednio po lewej stronie Elementy tab.

   

7. Możesz również dostosować wygląd swoich narzędzi programistycznych, wybierając najpierw przycisk menu reprezentowany przez trzy kropki umieszczone w pionie i znajduje się po prawej stronie wyżej wymienionych kart.

   Z tego menu rozwijanego 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 sam interfejs narzędzi programistycznych można w dużym stopniu dostosować za pomocą ustawień znajdujących się w tej sekcji.

   

Mozilla Firefox

Sekcja programistów internetowych w Firefoksie zawiera narzędzia dla projektantów, programistów i testerów, takie jak edytor stylów i zakraplacz do pikseli.

1. Wybierz menu główne Firefoksa, reprezentowane przez trzy poziome linie i znajdujące się w prawym górnym rogu okna przeglądarki.

2. Gdy pojawi się menu rozwijane, wybierz Programista WWW.

   

3. Powinno zostać wyświetlone menu Web Developer zawierające następujące opcje. Zauważysz, że z większością pozycji menu są powiązane skróty klawiaturowe.

   • Przełącz narzędzia: Wyświetla lub ukrywa interfejs narzędzi programistycznych, zwykle umieszczony na dole okna przeglądarki. Skrót klawiaturowy: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Pozwala kontrolować i/lub modyfikować kod CSS i HTML na aktywnej stronie, jak również na urządzeniu przenośnym poprzez zdalne debugowanie. Skrót klawiaturowy: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Konsola internetowa: Umożliwia wykonywanie wyrażeń JavaScript na aktywnej stronie, a także przeglądanie zróżnicowanego zestawu zarejestrowanych danych, w tym ostrzeżeń bezpieczeństwa, żądań sieciowych, komunikatów CSS i innych. Skrót klawiaturowy: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Debugger JavaScript pozwala na zlokalizowanie i naprawę defektów poprzez ustawienie punktów przerwania, inspekcję węzłów DOM, zewnętrznych źródeł czarnej skrzynki i wiele więcej. Podobnie jak w przypadku Inspectora, ta funkcja obsługuje również zdalne debugowanie. Skrót klawiaturowy: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Edytor stylów: Pozwala tworzyć nowe arkusze stylów i włączać je do aktywnej strony internetowej lub edytować istniejące arkusze i testować, jak Twoje zmiany renderują się w przeglądarce za pomocą jednego kliknięcia. Skrót klawiaturowy: Mac OS X, Windows (SHIFT+F7)
   • Wydajność: Zapewnia szczegółowy podział wydajności sieciowej aktywnej strony, dane dotyczące liczby klatek na sekundę, czas i stan wykonania JavaScript, flashowanie farby i wiele 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ą źródłową, typem, rozmiarem i czasem, który upłynął. Skrót klawiaturowy: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Inspektor przechowywania: Spójrz na pamięć podręczną i pliki cookie przechowywane przez witrynę internetową. Skrót klawiaturowy: (SHIFT+F9)
   • Pasek narzędzi programisty: Otwiera interaktywny interpreter wiersza poleceń. Wpisz help do interpretera, aby wyświetlić listę wszystkich dostępnych poleceń i ich właściwą składnię. Skrót klawiaturowy: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Umożliwia tworzenie i uruchamianie aplikacji internetowych na rzeczywistym urządzeniu 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). Jednak wszystkie zwracane dane dotyczą całej aplikacji Firefox (w tym rozszerzeń i funkcji na poziomie przeglądarki), a nie tylko aktywnej strony internetowej. Skrót klawiaturowy: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsywny widok projektu: 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(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Zakraplacz: Wyświetla kod koloru szesnastkowego dla indywidualnie wybranych pikseli.
   • Scratchpad: Brudnopis pozwala pisać, edytować, integrować i uruchamiać fragmenty kodu JavaScript z wyskakującego okna Firefoksa. Otwórz interaktywny dokument JavaScript, który pozwala pisać w kodzie i testować go na stronie internetowej. Skrót klawiaturowy: (SHIFT+F4)
   • Service Workers: Debuguj Service Workers swojej aplikacji internetowej. Uzyskaj szczegółowe informacje na temat ich wydajności i błędów.
   • Źródło strony: Oryginalne narzędzie programistyczne oparte na przeglądarce, ta opcja po prostu wyświetla dostępny kod źródłowy dla aktywnej strony. Skrót klawiaturowy: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Pobierz więcej narzędzi: Otwiera kolekcję Web Developer's Toolbox na oficjalnej witrynie z dodatkami Mozilli, zawierającą kilkanaście popularnych rozszerzeń, takich jak jako Firebug i Greasemonkey.

   

Microsoft Edge/Internet Explorer

Powszechnie określane jako F12 Developer Tools, hołd dla skrótu klawiaturowego, który uruchomił interfejs od wcześniejszych wersji Internet Explorera, zestawu narzędzi dla programistów w IE11 i Microsoft Edge przeszła długą drogę od momentu powstania, oferując bardzo przydatną grupę monitorów, debugerów, emulatorów i kompilatorów on-the-fly.

Microsoft nie obsługuje już przeglądarki Internet Explorer i zaleca aktualizację do nowszej przeglądarki Edge. Wejdź na ich stronę, aby pobrać najnowszą wersję.

1. Wybierz Więcej działań, reprezentowane przez trzy kropki i znajdujące się w prawym górnym rogu okna przeglądarki.

   

2. Kiedy pojawi się menu rozwijane, wybierz opcję oznaczoną Narzędzia programistyczne.

   

3. Interfejs programistyczny powinien być teraz wyświetlany, zwykle u dołu okna przeglądarki. Dostępne są następujące narzędzia, z których każde jest dostępne po kliknięciu odpowiedniego nagłówka karty lub za pomocą dołączonego skrótu klawiaturowego.

   

   • DOM Explorer: Umożliwia edycję arkuszy stylów i kodu HTML na aktywnej stronie, renderując zmodyfikowane wyniki na bieżąco. Wykorzystuje funkcję IntelliSense do autouzupełniania kodu, jeśli ma to zastosowanie. Skrót klawiaturowy: (CTRL+1)
   • Konsola: Zapewnia możliwość przesyłania informacji debugowania, w tym liczników, liczników czasu, śladów i dostosowanych komunikatów za pośrednictwem zintegrowanego interfejsu API. Umożliwia także wstrzyknięcie kodu do aktywnej strony internetowej i modyfikację wartości przypisanych do poszczególnych zmiennych w czasie rzeczywistym. Skrót klawiaturowy: (CTRL+2)
   • Debugger: Pozwala ustawić punkty przerwania i debugować kod podczas jego wykonywania, wiersz po wierszu, jeśli to konieczne. Skrót klawiaturowy: (CTRL+3)
   • Network: Wyświetla listę wszystkich żądań sieciowych zainicjowanych przez przeglądarkę podczas ładowania i wykonywania strony, w tym szczegóły protokołu, typ zawartości, wykorzystanie przepustowości i wiele innych. Skrót klawiaturowy: (CTRL+4)
   • Wydajność: Szczegóły dotyczące liczby klatek na sekundę, wykorzystania procesora i innych wskaźników związanych z wydajnością, aby przyspieszyć ładowanie stron i inne działania. Skrót klawiaturowy: (CTRL+5)
   • Pamięć: Pomaga izolować i korygować 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 czasowych. Skrót klawiaturowy: (CTRL+6)
   • Emulacja: 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ść modyfikowania agenta użytkownika i orientacji strony, a także symulowania różnych geolokalizacji poprzez wprowadzenie szerokości i długości geograficznej. Skrót klawiaturowy: (CTRL+7)

4. Aby wyświetlić Konsolę w dowolnym innym narzędziu, naciśnij przycisk kwadratowy z prawym nawiasem w środku, znajdujący się w w prawym górnym rogu interfejsu narzędzi programistycznych.

   

5. Aby oddokować interfejs narzędzi programistycznych tak, aby stał się oddzielnym oknem, wybierz dwa kaskadowe prostokąty lub użyj następującego skrótu klawiaturowego: CTRL+P. Możesz umieścić narzędzia z powrotem w ich pierwotnym położeniu, naciskając CTRL+P po raz drugi.

   

Apple Safari (tylko Mac)

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

1. Wybierz Safari w menu przeglądarki, znajdującym się u góry ekranu. Gdy pojawi się menu rozwijane, wybierz Preferencje. Zamiast tego elementu menu można również użyć następującego skrótu klawiaturowego: COMMAND+COMMA(,)

   

2. Safari Preferences interfejs powinien być teraz wyświetlany, zasłaniając okno przeglądarki. Wybierz Ikonę Zaawansowane, znajdującą się po prawej stronie nagłówka.

   

3. Preferencje Advanced powinny być teraz widoczne. Na dole tego ekranu znajduje się opcja oznaczona Pokaż menu rozwijania na pasku menu wraz z polem wyboru. Jeśli w polu nie ma znacznika wyboru, kliknij go raz, aby go tam umieścić.

   

4. Zamknij interfejs Preferencje.

5. Powinieneś teraz zauważyć nową opcję w menu przeglądarki o nazwie Develop, znajdującą się pomiędzy Zakładkami a oknem. Kliknij ten element menu. Powinno zostać wyświetlone rozwijane menu zawierające następujące opcje.

   • Otwórz stronę za pomocą: Umożliwia otwarcie aktywnej strony internetowej w jednej z innych przeglądarek aktualnie zainstalowanych na komputerze Mac.
   • User Agent: Pozwala wybrać spośród kilkunastu wstępnie zdefiniowanych wartości agenta użytkownika, w tym kilka wersji Chrome, Firefox i Internet Explorer, a także zdefiniować własne niestandardowe ciąg.
   • Wejdź do trybu projektowania responsywnego: Renderuje bieżącą stronę tak, jak wyglądałaby na różnych urządzeniach i w różnych rozdzielczościach ekranu.
   • Pokaż inspektora sieci: Uruchamia główny interfejs narzędzi programistycznych Safari, zwykle umieszczony na dole ekranu przeglądarki i zawierający następujące sekcje: Elementy, Sieć, Zasoby, Osie czasu, Debuger, Pamięć, Konsola.
   • Pokaż konsolę błędów: Uruchamia również interfejs narzędzi deweloperskich, bezpośrednio do karty Konsola, która wyświetla błędy, ostrzeżenia i inne możliwe do przeszukania dane dziennika.
   • Pokaż źródło strony: Otwiera kartę Zasoby, która wyświetla kod źródłowy aktywnej strony skategoryzowanej przez dokument.
   • Pokaż zasoby strony: Wykonuje tę samą funkcję, co opcja Pokaż źródło strony.
   • Pokaż edytor fragmentów: Otwiera nowe okno, w którym możesz wprowadzić kod CSS i HTML, podgląd jego wyników w locie.
   • Pokaż konstruktora rozszerzeń: Umożliwia tworzenie lub edycję rozszerzeń Safari za pomocą CSS, HTML i JavaScript.
   • Pokaż nagranie osi czasu: Otwiera zakładkę Osie czasu i rozpoczyna wyświetlanie żądań sieciowych, układu i informacji o renderowaniu, a także wykonywania JavaScript w czasie rzeczywistym.
   • Opróżnij pamięć podręczną: Usuwa całą pamięć podręczną aktualnie zapisaną na dysku twardym.
   • Wyłącz bufory: Zatrzymuje buforowanie Safari, aby cała zawartość była pobierana z serwera przy każdym załadowaniu strony.
   • Wyłącz obrazy: Zapobiega renderowaniu obrazów na wszystkich stronach internetowych.
   • Wyłącz style: Ignoruje właściwości CSS podczas ładowania strony.
   • Wyłącz JavaScript: Ogranicza wykonywanie JavaScriptu na wszystkich stronach.
   • Wyłącz rozszerzenia: Zabrania uruchamiania wszystkich zainstalowanych rozszerzeń w przeglądarce.
   • Wyłącz hacki specyficzne dla witryny: Jeśli przeglądarka Safari została zmodyfikowana tak, aby jawnie obsługiwała problemy specyficzne dla aktywnej strony internetowej, ta opcja zablokuje te zmiany, aby strona ładuje się tak, jak przed wprowadzeniem tych modyfikacji.
   • Wyłącz ograniczenia dotyczące plików lokalnych: Pozwala przeglądarce na dostęp do plików na dyskach lokalnych, co jest domyślnie ograniczone ze względów bezpieczeństwa.
   • Wyłącz ograniczenia Cross-Origin: Te ograniczenia są domyślnie wprowadzone, aby zapobiec XSS i innym potencjalnym zagrożeniom. Jednak często trzeba je tymczasowo wyłączyć w celach programistycznych.
   • Zezwalaj na JavaScript z inteligentnego pola wyszukiwania: Po włączeniu umożliwia wprowadzanie adresów URL za pomocą skryptu javascript: wbudowanego bezpośrednio w pasek adresu.
   • Traktuj certyfikaty SHA-1 jako niebezpieczne: Certyfikaty SSL korzystające z algorytmu SHA-1 są powszechnie uważane za nieaktualne i podatne na ataki.