Jak korzystać z narzędzi deweloperskich w przeglądarce internetowej

Oprócz tego, że większość twórców przeglądarek koncentruje się na zwykłych użytkownikach, którzy chcą surfować po sieci, obsługują także twórców stron internetowych, projektantów i specjalistów ds. Zapewniania jakości, którzy pomagają tworzyć aplikacje i witryny, do których użytkownicy mają dostęp, integrując zaawansowane narzędzia bezpośrednio z przeglądarkami sami.

Dawno minęły czasy, kiedy jedyne narzędzia do programowania i testowania w przeglądarce pozwalały na przeglądanie kodu źródłowego strony i nic więcej. Dzisiejsze przeglądarki umożliwiają znacznie głębsze zanurzenie się, wykonując takie czynności, 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 identyfikacji wąskich gardeł, analizowanie wydajności CSS, upewnianie się, że kod jest nie wykorzystuje zbyt dużej ilości pamięci lub zbyt wielu cykli procesora i wiele więcej.

Z perspektywy testowej możesz odtworzyć sposób, w jaki aplikacja lub strona internetowa będzie renderować się w różnych przeglądarkach, a także na różnych urządzeniach i platformach dzięki magii responsywnego projektowania i wbudowanym symulatorom. Najlepsze jest to, że możesz to wszystko zrobić bez opuszczania przeglądarki!

Poniższe samouczki przeprowadzą Cię przez proces uzyskiwania dostępu do tych narzędzi programistycznych w kilku popularnych przeglądarkach internetowych.

Google Chrome

Narzędzia programistyczne Chrome umożliwiają edycję i debugowanie kodu, audyt 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 Chrome Menu główne oznaczony trzema poziomymi liniami i umieszczony w prawym górnym rogu przeglądarki.

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

   

3. Powinno się teraz pojawić podmenu. Wybierz opcję oznaczoną Narzędzia deweloperskie. Możesz również użyć następującego skrótu klawiaturowego zamiast tej pozycji menu: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X (ALT (OPCJA) + COMMAND + I)

   

4. Powinien zostać wyświetlony interfejs Chrome Developer Tools, jak pokazano na tym przykładowym zrzucie ekranu. W zależności od wersji przeglądarki Chrome początkowy układ, który widzisz, może nieznacznie różnić się od przedstawionego tutaj. Główne centrum narzędzi programistycznych, zwykle zlokalizowane w dolnej lub prawej części 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 pośrednictwem >> ikony, znajdującą się po prawej stronie zakładki Wydajność.

   • Pamięć: Monitoruj i rejestruj użycie pamięci na stronie internetowej. Możesz zobaczyć, jak ciężki jest JavaScript w Twojej witrynie.
   • Bezpieczeństwo: Podkreśla 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łne zestawienie tego, co jest używane.
   • Audyty: Oferuje sposoby optymalizacji czasu ładowania strony lub aplikacji i ogólnej wydajności.

   

6. Tryb urządzenia umożliwia wyświetlenie aktywnej strony w symulatorze, który renderuje ją prawie dokładnie tak, jak wyglądałaby na jednym z kilkunastu urządzeń, w tym kilku znanych modeli z systemem Android i iOS, takich jak iPad, iPhone czy Samsung Galaxy. Masz również możliwość emulacji niestandardowych rozdzielczości ekranu, aby dopasować je do swoich konkretnych potrzeb programistycznych lub testowych.

   Aby przełączać Tryb urządzenia włączanie i wyłączanie, wybierz ikona telefonu komórkowego znajduje się bezpośrednio po lewej stronie zakładki Elementy.

   

7. Możesz również dostosować wygląd i działanie narzędzi programistycznych, wybierając najpierw przycisk MENU reprezentowane przez trzy pionowo ustawione kropki i znajduje się po prawej stronie wyżej wymienionych zakładek.

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

   

Mozilla Firefox

Sekcja programistów internetowych Firefoksa zawiera narzędzia dla projektantów, programistów i testerów, takie jak edytor stylów i kroplomierz celujący w piksele.

1. Wybierz Firefox Menu główne, reprezentowane przez trzy poziome linie i znajduje się w prawym górnym rogu okna przeglądarki.

2. Gdy pojawi się menu rozwijane, wybierz Twórca stron internetowych.

   

3. Menu programisty WWW powinno teraz zostać wyświetlone, zawierające następujące opcje. Zauważysz, że większość elementów menu ma skojarzone z nimi skróty klawiaturowe.

   • Przełącz narzędzia: Wyświetla lub ukrywa interfejs narzędzi programistycznych, zazwyczaj umieszczony u dołu okna przeglądarki. Skrót klawiaturowy: Mac OS X (ALT (OPCJA) + COMMAND + I), Windows (CTRL + SHIFT + I)
   • Inspektor: Umożliwia przeglądanie i / lub modyfikowanie kodu CSS i HTML na aktywnej stronie, a także na urządzeniu przenośnym za pomocą zdalnego debugowania. Skrót klawiaturowy: Mac OS X (ALT (OPCJA) + COMMAND + C), Windows (CTRL + SHIFT + C)
   • Konsola internetowa: Umożliwia wykonywanie wyrażeń JavaScript na aktywnej stronie, a także przeglądanie różnorodnego zestawu zarejestrowanych danych, w tym ostrzeżeń bezpieczeństwa, żądań sieciowych, komunikatów CSS i nie tylko. Skrót klawiaturowy: Mac OS X (ALT (OPCJA) + COMMAND + K), Windows (CTRL + SHIFT + K.)
   • Debugger: Debugger JavaScript umożliwia lokalizowanie i naprawianie usterek poprzez ustawianie punktów przerwania, inspekcję węzłów DOM, czarne skrzynki zewnętrzne źródła i wiele więcej. Podobnie jak w przypadku Inspektora, ta funkcja obsługuje również zdalne debugowanie. Skrót klawiaturowy: Mac OS X (ALT (OPCJA) + COMMAND + S), Windows (CTRL + SHIFT + S)
   • Edytor stylów: Umożliwia tworzenie nowych arkuszy stylów i włączanie ich do aktywnej strony internetowej lub edycję istniejących arkuszy i testowanie renderowania zmian w przeglądarce za pomocą jednego kliknięcia. Skrót klawiaturowy: Mac OS X, Windows (SHIFT + F7)
   • Wydajność: Zawiera szczegółowe zestawienie wydajności sieci aktywnej strony, dane dotyczące liczby klatek na sekundę, czas wykonania i stan JavaScript, flashowanie farby i wiele więcej. 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ą pochodzenia, typem, rozmiarem i czasem, który upłynął. Skrót klawiaturowy: Mac OS X (ALT (OPCJA) + COMMAND + Q), Windows (CTRL + SHIFT + Q)
   • Inspektor przechowywania: Spójrz na pamięć podręczną i pliki cookie przechowywane przez witrynę internetową. Skrót klawiszowy: (SHIFT + F9)
   • Pasek narzędzi programisty: Otwiera interaktywny interpreter wiersza poleceń. Wejdź w pomoc do interpretera w celu uzyskania listy wszystkich dostępnych poleceń i ich prawidłowej składni. Skrót klawiaturowy: Mac OS X, Windows (SHIFT + F2)
   • WebIDE: Zapewnia możliwość tworzenia i uruchamiania aplikacji internetowych na rzeczywistym urządzeniu z systemem Firefox OS lub za pośrednictwem 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 wyświetlenie 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) + COMMAND + M), Windows (CTRL + SHIFT + M)
   • Eyedropper: Wyświetla szesnastkowy kod koloru dla indywidualnie wybranych pikseli.
   • Brudnopis: Brudnopis umożliwia pisanie, edytowanie, integrowanie i wykonywanie fragmentów kodu JavaScript z poziomu wyskakującego okna przeglądarki Firefox. Otwórz interaktywny dokument JavaScript, który umożliwia pisanie w kodzie i testowanie go w witrynie internetowej. Skrót klawiszowy: (SHIFT + F4)
   • Pracownicy usługowi: Debuguj elementy obsługujące aplikacje internetowe. 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 wyświetla po prostu dostępny kod źródłowy aktywnej strony. Skrót klawiaturowy: Mac OS X (COMMAND + U), Windows (CTRL + U)
   • Uzyskaj więcej narzędzi: Otwiera Zestaw narzędzi dla programistów WWW kolekcja na oficjalnej stronie dodatków Mozilli, zawierająca kilkanaście popularnych rozszerzeń, takich jak Firebug i Greasemonkey.

   

Microsoft Edge / Internet Explorer

Powszechnie określane jako Narzędzia programistyczne F12, hołd dla skrótu klawiaturowego, który uruchamiał interfejs we wcześniejszych wersjach Internet Explorera, zestaw narzędzi programistycznych w IE11 i Microsoft Edge przeszedł długą drogę od swojego powstania, oferując bardzo poręczną grupę monitorów, debuggerów, emulatorów i innych kompilatory latające.

1. Wybierz Więcej czynności, reprezentowane przez trzy kropki i znajdujące się w prawym górnym rogu okna przeglądarki.

   

2. Gdy pojawi się menu rozwijane, wybierz opcję oznaczoną Narzędzia Deweloperskie.

   

3. Interfejs programistyczny powinien teraz zostać wyświetlony, zazwyczaj 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ą odpowiedniego skrótu klawiaturowego.
   • DOM Explorer: Umożliwia edycję arkuszy stylów i kodu HTML na aktywnej stronie, renderując zmodyfikowane wyniki na bieżąco. W stosownych przypadkach wykorzystuje funkcję IntelliSense do autouzupełniania kodu. Skrót klawiszowy: (CTRL + 1)
   • Konsola: Zapewnia możliwość przesyłania informacji debugowania, w tym liczników, timerów, śladów i niestandardowych komunikatów za pośrednictwem zintegrowanego interfejsu API. Umożliwia także wstrzyknięcie 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, wiersz po wierszu, jeśli to konieczne. Skrót klawiszowy: (CTRL + 3)
   • Sieć: Zawiera listę wszystkich żądań sieciowych zainicjowanych przez przeglądarkę podczas ładowania i wykonywania strony, w tym szczegóły protokołów, typ zawartości, wykorzystanie przepustowości i wiele innych. Skrót klawiszowy: (CTRL + 4)
   • Wydajność: Szczegóły dotyczące liczby klatek na sekundę, wykorzystania procesora i innych wskaźników związanych z wydajnością, które pomogą Ci przyspieszyć ładowanie stron i inne działania. Skrót klawiszowy: (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 klawiszowy: (CTRL + 6)
   • Współzawodnictwo: Pokazuje, jak byłaby renderowana aktywna strona w różnych rozdzielczościach i rozmiarach ekranu, emulując smartfony, tablety i inne urządzenia. Zapewnia również możliwość modyfikowania klienta 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)

4. Aby wyświetlić Konsola podczas gdy w jakimkolwiek innym narzędziu naciśnij kwadratowy przycisk z prawym wspornikiem wewnątrz niego, znajdującym się w prawym górnym rogu interfejsu narzędzi programistycznych.

   

5. Aby oddokować interfejs narzędzi programistycznych, tak aby stał się osobnym 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 klawisze CTRL + P po raz drugi.

   

Apple Safari (tylko OS X)

Zróżnicowany zestaw narzędzi deweloperskich Safari odzwierciedla dużą społeczność programistów, która wykorzystuje komputery Mac do swoich potrzeb projektowych i programistycznych. 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ę w górnej części ekranu. Gdy pojawi się menu rozwijane, wybierz Preferencje. Możesz również użyć następującego skrótu klawiaturowego zamiast tej pozycji menu: COMMAND + COMMA(,)

   

2. Interfejs Safari Preferencje powinien teraz zostać wyświetlony, nakładając się na okno przeglądarki. Wybierz Ustawienia Zaawansowane, znajdujący się po prawej stronie nagłówka.

   

3. Zaawansowane preferencje powinny być teraz widoczne. U dołu tego ekranu znajduje się oznaczona opcja Pokaż rozwijane menu na pasku menu, któremu towarzyszy pole wyboru. Jeśli w polu nie ma znacznika wyboru, kliknij go raz, aby go tam umieścić.

   

4. Zamknij Preferencje.

5. Powinieneś teraz zauważyć nową opcję w menu przeglądarki o nazwie Rozwijaj, położony pomiędzy Zakładki i okno. Kliknij tę pozycję menu. Powinno zostać wyświetlone menu rozwijane zawierające następujące opcje.

   • Otwórz stronę za pomocą: Umożliwia otwarcie aktywnej strony internetowej w jednej z pozostałych przeglądarek aktualnie zainstalowanych na komputerze Mac.
   • User Agent: Umożliwia wybór spośród kilkunastu wstępnie zdefiniowanych wartości klienta użytkownika, w tym kilka wersji przeglądarek Chrome, Firefox i Internet Explorer, a także zdefiniowanie własnego niestandardowego ciągu.
   • Wejdź w tryb projektowania responsywnego: Renderuje bieżącą stronę tak, jak wyglądałaby 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, Pamięć masowa, Konsola.
   • Pokaż konsolę błędów: Uruchamia również interfejs narzędzi deweloperskich, bezpośrednio do Karta konsoli który wyświetla błędy, ostrzeżenia i inne dane dziennika, które można przeszukiwać.
   • Pokaż źródło strony: Otwiera Karta Zasoby, który wyświetla kod źródłowy aktywnej strony podzielony na kategorie według dokumentu.
   • Pokaż zasoby strony: Pełni 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ądając jego wynik 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 kartę Osie czasu i zaczyna wyświetlać żądania sieciowe, informacje o układzie i renderowaniu, a także wykonywanie JavaScript w czasie rzeczywistym.
   • Puste skrzynie: Usuwa całą pamięć podręczną aktualnie przechowywaną na dysku twardym.
   • Wyłącz pamięci podręczne: Zatrzymuje buforowanie Safari, dzięki czemu cała zawartość jest pobierana z serwera po 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 JavaScript na wszystkich stronach.
   • Wyłącz rozszerzenia: Zabrania uruchamiania wszystkich zainstalowanych rozszerzeń w przeglądarce.
   • Wyłącz hacki specyficzne dla witryny: Jeśli Safari zostało zmodyfikowane tak, aby jawnie obsługiwać problemy specyficzne dla aktywnej strony internetowej, ta opcja zablokuje te zmiany, aby strona wczytywała się tak, jak przed wprowadzeniem tych modyfikacji.
   • Wyłącz ograniczenia plików lokalnych: Umożliwia przeglądarce dostęp do plików na dyskach lokalnych, co jest domyślnie ograniczone ze względów bezpieczeństwa.
   • Wyłącz ograniczenia dotyczące różnych źródeł: Te ograniczenia są wprowadzane domyślnie, aby zapobiec XSS i innym potencjalnym zagrożeniom. Jednak często trzeba je tymczasowo wyłączyć do celów programistycznych.
   • Zezwalaj na JavaScript z inteligentnego pola wyszukiwania: Po włączeniu zapewnia możliwość wprowadzania adresów URL z javascript: wbudowanym bezpośrednio w pasek adresu.
   • Traktuj certyfikaty SHA-1 jako niezabezpieczone: Certyfikaty SSL korzystające z algorytmu SHA-1 są powszechnie uważane za nieaktualne i podatne na ataki.