Co to są Chrome DevTools
Co to są Chrome DevTools
Chrome DevTools to zestaw narzędzi zaprojektowanych, aby pomóc Ci w rozwoju front-end. Możesz ulepszyć swoją witrynę, zajmując się błędami stylizacji i oceny zmian w czasie rzeczywistym. Dowiedz się, jak korzystać z Chrome DevTools do użycia tego narzędzia jako piaskownicy do eksperymentowania ze stylami i kodem witryny. Nie musisz wykonywać żadnej dalszej konfiguracji, ponieważ Chrome DevTools są osadzone w przeglądarce internetowej. Te narzędzia programistów są wysoce zalecane, ponieważ pomagają w edycji stylu Twojej witryny, wypełnianiu operacji związanych z DOM, debugowaniu JavaScript i poprawy prędkości strony internetowej.
Teraz zrozummy kilka rzeczy, zanim przejdziemy do użycia Chrome DevTools:
- Przeglądarki internetowe wykonują JavaScript, CCS, I Html, Są to trzy języki, których chrome devtools mają używać.
- Każdy może manipulować kodem witryny za pomocą Chrome DevTools. Zastosowane modyfikacje będą oglądane tylko w przeglądarce i znikną, gdy wkrótce odświeżisz tę stronę internetową. Te devtools pomagają w ustaleniu, które zmiany są wymagane. Będziesz musiał uzyskać dostęp do kodu zaplecza, aby te zmiany były trwałe.
Dlaczego powinieneś używać Chrome DevTools
Pozwalając użytkownikom na edytowanie stron internetowych bezpośrednio w przeglądarce internetowej, Google Chrome DevTools zapisuje Twój czas i nie możemy zaprzeczyć temu faktowi. Aby uzasadnić oświadczenie, sprawdź poniższą listę aspektów Chrome DevTools, które pomogą Ci poprawić tworzenie stron internetowych:
- Efektywność: Chrome DevTools są wbudowane w przeglądarkę internetową, zapewniając obiekt do edytowania stron internetowych lub treści bez przełączania kart.
- Panele: Korzystając z Chrome DevTools, możesz bawić się różnymi elementami stron i wyodrębnić informacje, ale pamiętaj, że wszelkie dokonane modyfikacje zostaną utracone, jeśli zamkniesz kartę bez przechowywania.
- Optymalizacja: Możesz także wykonać audyty, za pomocą których możesz uzyskać raport związany z wydajnością. W przeglądarce internetowej otrzymasz sugestie dotyczące zwiększenia prędkości ładowania witryny.
- Debugowanie JavaScript: Użytkownik może zidentyfikować błędy, zatrzymując uruchomiony kod witryny i wskazując dokładną chwilę, gdy skrypt nie działa poprawnie.
Jak otworzyć Chrome DevTools
Dostęp do narzędzi programistów Chrome można uzyskać za pomocą skrótów klawiatury:
- Naciskać "Ctrl+Shift+J„Otwarcie Chrome DevTools Okna, Chromebook, I Linux.
- Dla System operacyjny Mac, Uderz w "CMD+Shift+J" Lub "CMD+Shif+C”Skrót.
Korzystanie z menu Chrome:
Badać "Więcej narzędzi”>„Narzędzia deweloperskie„W menu Chrome. Doprowadzi Cię do okna Chrome DevTools:
Okno narzędzi programistów ma trzy zakładki u góry, a także kolejne sześć, które możesz zobaczyć, klikając obok nich znak >>:
Oto nazwy zakładki pokazującej w naszym panelu: elementy, konsola, źródła, sieć, wydajność, pamięć, aplikacja, bezpieczeństwo, latarnia morska, edytor cookie i adblock:
Zakładka elementów w Chrome DevTools
Panel Chrome DevTools otwiera się z „Elementy„Zakładka domyślnie. Wyświetla HTML i wbudowane CSS wykorzystywane do opracowywania strony internetowej, którą wyświetlasz:
Karta konsoli w Chrome DevTools
Karta konsoli obsługuje JavaScript. Zawiera szczegóły związane z elementami obecnymi na stronie internetowej. Możesz użyć konsoli do pisania kodu JavaScript do interakcji strony internetowej i wysyłania wiadomości do siebie. Te wiadomości pojawią się w oknie konsoli, gdy JavaScript zostanie wykonane:
Zakładka źródeł w Chrome DevTools
Zakładka źródeł wyświetla się i pozwala na sprawdzenie wszystkich plików używanych do utworzenia strony internetowej:
Zakładka sieciowa w Chrome DevTools
Karta sieciowa wyświetla wszystkie obciążenia dla bieżącego wyświetlanego adresu URL. Otrzymujesz szczegółowe informacje o obiektach ładowania, w tym czas trwania wyszukiwania DNS, początkowego połączenia, SSL itp. Sprawdź poniższy obraz, aby wiedzieć o załadowanych atrybutach obiektu:
Zakładka aplikacji w Chrome DevTools
Karta aplikacji wyświetla zawartość pamięci przeglądarki, w tym bazy danych w przeglądarce, takie jak pamięć lokalna, Web SQL itp. Pozwala również na drobnoziarnistą kontrolę nad swoimi ciasteczkami:
Zakładka bezpieczeństwa w Chrome DevTools
Karta bezpieczeństwa zawiera podstawowe informacje o bezpieczeństwie, takie jak stan TLS strony internetowej i jej certyfikat HTTPS:
Lighthouse Tab w Chrome DevTools
Lighthouse pomaga użytkownikowi Chrome DevTools w generowaniu raportów dotyczących struktury i funkcjonalności witryny, co pomaga programistom w poprawie wydajności:
Jak używać Chrome DevTools do sprawdzania znaczników stron
Tagi H1 i H2 to jedne z najważniejszych części SEO na stronie. Po ustaleniu stron z nieoptymalizowanym obrazem jako H2 lub stronami z czterema znaczkami H2, zrozumiesz złożoność tej sprawy.
Możesz użyć Chrome DevTools do sprawdzania znaczników strony. Aby to zrobić, naciśnij „Ctrl-f" Lub "CMD+f„Aby wyszukać na karcie elementy i wpisać„H2„Aby zobaczyć tagi strony:
Jak używać Chrome DevTools do edytowania CSS
Chrome DevTools pozwala edytować CSS strony bezpośrednio w przeglądarce. Możesz eksperymentować z czcionkami, schematami kolorów i wszystkim innym, co jest zdefiniowane przez CSS:
Możesz także nowe style na stronach internetowych za pomocą DevTools:
Wniosek
Chrome DevTools to kompletny zestaw narzędzi programisty, który jest wstępnie zainstalowany z przeglądarką Chrome. Te narzędzia pozwalają użytkownikom zmienić strony internetowe, identyfikować problemy i tworzyć lepsze strony internetowe w czasie rzeczywistym. Możesz skorzystać z Chrome DevTools, nawet jeśli nie jesteś programistą stron internetowych. W tym artykule omówiono Chrome DevTools, jego karty i sposób korzystania z tych devtools w przeglądarce internetowej. Teraz możesz odkrywać Chrome DevTools.