Jak otworzyć narzędzia Google Chrome Developer?
Google Chrome Developer Tools to świetna funkcja Google Chrome dla twórców stron internetowych. Jest to zestaw narzędzi bezpośrednio wbudowanych w Google Chrome, aby pomóc programistom wprowadzać zmiany na stronie i zdiagnozować problemy ze stronami internetowymi w locie. Pomaga programistom stron internetowych szybciej budować i optymalizować strony internetowe.
W tym artykule pokażę Ci, jak otworzyć narzędzia programisty Google Chrome w Google Chrome i niektóre funkcje, które oferuje.
Spis treści:
- Otwieranie narzędzi Google Chrome Developer
- Dokowanie narzędzi Google Chrome Developer w różnych lokalizacjach
- Niektóre funkcje narzędzi Google Chrome Developer
- Zamknięcie narzędzi programistów w Google Chrome
- Wniosek
- Bibliografia
Otwieranie narzędzi Google Chrome Developer
Jednym ze sposobów otwarcia narzędzi Google Chrome Developer jest Google Chrome.
Najpierw otwórz Google Chrome i kliknij > Więcej narzędzi> Narzędzia programistów Z prawego rogu Google Chrome.
Należy wyświetlić narzędzia do programisty Google Chrome.
Możesz także odwiedzić stronę internetową z Google Chrome i sprawdzić element ze strony internetowej, aby otworzyć narzędzia programistów.
Aby sprawdzić element ze strony internetowej, kliknij prawym przyciskiem myszy (RMB) i kliknij Sprawdzać.
Możesz także nacisnąć + + C Aby sprawdzić element ze strony internetowej i otworzyć narzędzia Google Chrome Developer.
Narzędzia programistyczne Google Chrome powinny zostać otwarte.
W ten sam sposób możesz otworzyć konsolę narzędzi Google Chrome Developer + + J.
Dokowanie narzędzi Google Chrome Developer w różnych lokalizacjach
Jeśli nie masz wystarczająco dużego monitora, możesz nie chcieć, aby narzędzia programisty Google Chrome były zadokowane po prawej stronie Google Chrome.
Kliknij i wybierz pozycję dokowania z Strona dokująca Sekcja, aby zmienić pozycję dokowania Google Chrome.
Undock Google Chrome Developer Tools w osobnym oknie.
Narzędzia Dock Google Chrome Developer po lewej stronie.
Dock Google Chrome Developer Tools na dole.
Dokuj narzędzia programisty Google Chrome po prawej stronie.
Niektóre funkcje narzędzi Google Chrome Developer
Google Chrome Developer Tools ma kilka kart i możesz robić określone rzeczy z każdej z kart.
Z Elementy Tab, możesz sprawdzić różne elementy na stronie internetowej; Sprawdź style CSS i obliczony rozmiar elementów; Dokonaj natychmiastowych zmian w HTML DOM i CSS strony internetowej i zobacz wyniki; i wiele więcej.
Z Konsola Tab, możesz wyświetlić komunikaty dziennika i uruchomić kody JavaScript.
Z Źródła Tab, możesz debugować kody JavaScript, zapisywać i uruchamiać fragmenty kodów JavaScript, przetrwać zmiany wprowadzone w narzędzia programistów Google Chrome w poprzek przeładowań stron i zapisywać zmiany, które wprowadziłeś za pomocą narzędzi programisty Google Chrome na dysku.
Z Sieć Tab, możesz monitorować aktywność sieciową, pliki żądane przez stronę internetową i czas potrzebny na załadowanie, i debugować aktywność sieciową strony internetowej.
Z Wydajność Tab, możesz zarejestrować czas ładowania strony i wydajność strony internetowej. Możesz także znaleźć sposoby na ich poprawę.
Z Pamięć Tab, możesz monitorować zużycie pamięci swojej witryny i rozwiązać nietypowe problemy z pamięcią.
Z Aplikacja Tab, możesz sprawdzić wszystkie załadowane zasoby Twojej witryny, takie jak:
- Indexeddb
- Bazy danych Web SQL
- Lokalny magazyn
- Przechowywanie sesji
- Ciasteczka
- Pamięć podręczna aplikacji
- Obrazy
- Czcionki
- Arkusze stylów
Z Bezpieczeństwo Tab, możesz debugować problemy z certyfikacją, problemy z treściami mieszanej i wiele innych problemów bezpieczeństwa w Witrynie.
Z Latarnia morska Tab, możesz wygenerować raport Lighthouse.
Z rejestrator Tab, możesz zmierzyć wydajność w całym przepływie użytkownika witryny.
Z Wgląd wydajności Tab, możesz uzyskać wgląd w wydajność na swojej stronie internetowej.
Możesz zobaczyć, jak wygląda Twoja witryna na urządzeniach o różnych rozmiarach ekranu za pomocą Tryb urządzenia narzędzi programistycznych Google Chrome.
Aby przejść do Tryb urządzenia, Kliknij przycisk Przełącz.
Twoja witryna powinna być wyświetlana w różnych rozmiarach ekranu w trybie urządzenia. Możesz zmienić rozmiar ekranu i zobaczyć, jak witryna będzie wyglądać na urządzeniach z tym rozmiarem ekranu.
Zamknięcie narzędzi programistów w Google Chrome
Aby zamknąć narzędzia Google Chrome Developer, kliknij X.
Narzędzia programistyczne Google Chrome powinny zostać zamknięte.
Wniosek
Pokazałem ci, jak otworzyć narzędzia Google Chrome Developer i omówiłem niektóre funkcje narzędzi Google Chrome Developer. Aby dowiedzieć się więcej o narzędzi Google Chrome Developer i każdej z jego funkcji, sprawdź linki w sekcji Referencje poniżej.
Bibliografia:
- Przegląd - programiści Chrome
- Nagrywać, odtwarzać i mierzyć przepływy użytkowników - programiści Chrome
- Spostrzeżenia wydajności: Uzyskaj wgląd w wydajność swojej witryny - Chrome Developers