Home-theater-designers
Chrome DevTools to niezbędny zasób dla programistów. Podczas gdy inne przeglądarki oferują całkiem przydatne narzędzia do rozwiązywania problemów, Chrome DevTools jest wart uwagi ze względu na jego wielofunkcyjny interfejs i popularność.
Chrome to najpopularniejsza przeglądarka dla programistów ze względu na potężny zestaw narzędzi do debugowania. Korzystanie z Chrome DevTools jest łatwe, ale musisz zrozumieć, jak to działa, aby jak najlepiej je wykorzystać.
Jak działają narzędzia programistyczne Chrome
Chrome DevTools umożliwia rozwiązywanie problemów w witrynie za pomocą konsoli błędów oraz innych narzędzi do debugowania i monitorowania. Korzystanie z DevTools ujawnia luki frontendowe i pozwala monitorować wygląd witryny na urządzeniach mobilnych i tabletach.
Dzięki DevTools możesz przeprowadzać edycję w czasie rzeczywistym w kodzie witryny, takim jak JavaScript, HTML i CSS, i uzyskiwać natychmiastowe wyniki swoich zmian.
Zmiany, które wprowadzasz za pomocą DevTools, nie mają trwałego wpływu na witrynę. Tylko tymczasowo wyświetlają oczekiwany wynik, tak jakbyś zastosował je do rzeczywistego kodu źródłowego. Pozwala to wypracować sposoby na szybsze ładowanie witryny i ułatwia usuwanie błędów.
Jak uzyskać dostęp do Chrome DevTools
Dostęp do Chrome DevTools można uzyskać na kilka sposobów. Aby otworzyć narzędzia programistyczne metodą skrótów w systemie Mac OS, naciśnij Polecenie + Opcja + I . Jeśli używasz systemu operacyjnego Windows, naciśnij Ctrl + Shift + I klawisze na klawiaturze.
Możesz też uzyskać dostęp do narzędzi programistycznych Chrome, klikając trzy kropki w prawym górnym rogu ekranu. Zmierzać do Więcej narzędzi i wybierz Narzędzia deweloperskie . Inną opcją jest kliknięcie prawym przyciskiem myszy na stronie internetowej i kliknięcie Sprawdzać opcja.
Korzystanie z Narzędzi dla programistów Chrome do diagnostyki witryn
Chrome DevTools oferuje kilka sposobów ulepszania i rozwiązywania problemów ze stroną internetową. Rzućmy okiem na niektóre sposoby, w jakie DevTools może Ci pomóc.
Zobacz, jak wygląda Twoja witryna na smartfonie
Po przełączeniu przeglądarki Chrome w tryb programisty renderuje ona połowę wersji Twojej strony internetowej. Nie da to jednak prawdziwego obrazu tego, jak by to wyglądało na smartfonie lub tablecie.
Na szczęście, oprócz ustawiania rozmiaru ekranu strony internetowej, Chrome DevTools umożliwia również przełączanie się między różnymi typami i wersjami ekranu mobilnego.
Aby uzyskać dostęp do tej opcji, włącz Sprawdzać tryb. Następnie kliknij Czuły rozwijaną w lewym górnym rogu DevTools i wybierz preferowane urządzenie mobilne. Strona internetowa jest następnie renderowana i dostosowywana do rozmiaru wybranego urządzenia mobilnego.
jestem znudzony, co mogę zrobić w internecie
Uzyskaj dostęp do plików źródłowych strony internetowej
Możesz uzyskać dostęp do plików tworzących stronę internetową za pomocą Chrome DevTools. Aby uzyskać dostęp do tych plików, kliknij Źródła w górnej części menu DevTools. To ujawnia system plików witryny, a także umożliwia edycję.
Możesz także wyszukiwać pliki źródłowe, co może być pomocne, gdy masz do czynienia ze stroną internetową, która ma wiele zasobów. Aby wyszukać plik źródłowy za pomocą DevTools, kliknij Szukaj opcja tuż nad konsolą.
Jeśli jednak nie możesz znaleźć Szukaj opcji, lepszą alternatywą jest użycie skrótów klawiaturowych. W systemie Mac OS naciśnij przycisk Polecenie + Opcja + F klucze do wyszukania pliku źródłowego. Jeśli używasz systemu operacyjnego Windows, naciśnij Ctrl + Shift + F aby uzyskać dostęp do paska wyszukiwania pliku źródłowego.
Wykonywanie edycji na żywo na stronie internetowej
Jednym z głównych celów korzystania z DevTools jest przeprowadzenie natychmiastowa fałszywa edycja elementów na stronie internetowej . Po przejściu do narzędzi programistycznych możesz edytować zawartość HTML witryny, klikając przycisk Elementy opcja. Następnie kliknij prawym przyciskiem myszy dowolny punkt, w którym chcesz zastosować zmiany w edytorze kodu i wybierz Edytuj jako HTML .
Aby edytować właściwości CSS, które nie są wbudowane, wybierz Źródła . Następnie wybierz plik CSS, który chcesz edytować. Umieść kursor na wybranym wierszu w konsoli kodu, aby przeprowadzić edycję na żywo. Dzięki temu uzyskasz natychmiastową informację zwrotną na temat wszelkich zmian stylu zastosowanych do strony internetowej.
Pamiętaj, że kiedy edytujesz stronę za pomocą DevTools, ponowne załadowanie strony w przeglądarce przywraca jej pierwotną formę, a edycja jest widoczna tylko dla Ciebie. Edycja za pomocą DevTools nie wpływa na płynne działanie ani korzystanie z tej witryny przez innych użytkowników.
Debuguj kod JavaScript za pomocą konsoli DevTools
Jednym z najlepszych sposobów debugowania JavaScriptu jest użycie narzędzi programistycznych Chrome. Daje bezpośredni raport o nieprawidłowych skryptach, a także dokładną lokalizację błędu.
Dobrą praktyką jest, aby zawsze mieć otwarte DevTools podczas projektowania strony internetowej z JavaScript. Na przykład uruchomienie konsola.log() polecenie JavaScript w zestawie instrukcji wyświetla wynik tego dziennika w konsoli DevTools, jeśli program zostanie uruchomiony pomyślnie.
Domyślnie konsola zgłasza wszelkie problemy z JavaScriptem w Twojej witrynie. Konsolę można znaleźć w dolnej części DevTools lub uzyskać do niej dostęp, klikając przycisk Konsola opcja u góry okna Chrome DevTools.
Monitoruj ładowanie zasobów z bazy danych
Oprócz debugowania kodu JavaScript konsola może również podać szczegółowe informacje o zasobach, które nie ładują się poprawnie z bazy danych witryny.
Chociaż nie zawsze jest to najlepszy sposób na debugowanie problemów z backendem, nadal informuje, które zasoby są zwracane 404 błąd po uruchomieniu zapytania bazy danych tych elementów.
Powiązane: Typowe błędy witryny i ich znaczenie
Zmień orientację Narzędzi dla programistów Chrome
Aby zmienić pozycję narzędzi programistycznych Chrome, kliknij trzy kropki menu w DevTools (nie główną w przeglądarce). Następnie wybierz preferowaną pozycję z Strona doku opcja.
Zainstaluj rozszerzenia Chrome DevTools
Możesz też zainstalować rozszerzenia specyficzne dla języka lub platformy, które współpracują z Chrome DevTools. Zainstalowanie tych rozszerzeń pozwala efektywniej debugować stronę internetową.
Możesz uzyskać dostęp do listy dostępnych rozszerzeń dla Chrome DevTools w Chrome Polecane rozszerzenia DevTools Galeria.
Sprawdź problemy z bezpieczeństwem na stronie internetowej
Chrome DevTools pozwala ocenić poziom bezpieczeństwa Twojej witryny na podstawie parametrów, takich jak dostępność certyfikaty bezpieczeństwa sieci i jak bezpieczne jest połączenie m.in. Aby sprawdzić, czy Twoja witryna jest bezpieczna, kliknij Bezpieczeństwo opcja u góry DevTools.
ten Bezpieczeństwo Zakładka zawiera przegląd szczegółów bezpieczeństwa Twojej witryny i informuje o wszelkich potencjalnych zagrożeniach.
Kontroluj swoją witrynę
Chrome DevTools ma funkcję, która pozwala sprawdzić ogólną wydajność Twojej witryny na podstawie określonych parametrów.
Aby uzyskać dostęp do tej funkcji, wybierz Latarnia morska opcja u góry okna DevTools. Następnie wybierz parametry, które chcesz sprawdzić, a następnie zaznacz albo mobilny lub Pulpit opcje, aby zobaczyć, jak Twoja strona internetowa działa na różnych platformach.
Następnie kliknij Generuj raport aby przeprowadzić analizę Twojej strony internetowej na podstawie wybranych wcześniej parametrów.
Możesz również ocenić czas działania lub wydajność ładowania witryny, klikając przycisk Wydajność opcja. Aby uruchomić test, kliknij ikonę obok Kliknij przycisk nagrywania możliwość wykonania analizy w czasie wykonywania. Możesz też kliknąć przycisk przeładowania pod nim, aby ocenić wydajność w czasie ładowania. Kliknij Zatrzymać aby zatrzymać analizator i wyświetlić wyniki.
Skorzystaj z Chrome DevTools
W zależności od tego, do czego jest potrzebny, Chrome DevTools pozwala robić więcej niż tylko proste debugowanie witryny. Na szczęście DevTools jest łatwy w użyciu dla programistów na wszystkich poziomach umiejętności. Możesz nawet nauczyć się podstaw tworzenia frontendu witryny, sprawdzając kod źródłowy odwiedzanych witryn.
jak pobierać strumieniowe filmy z dowolnej strony internetowej
Możesz także odkryć inne opcje, których nie omówiliśmy w tym artykule. Możesz więc pobawić się dostępnymi funkcjami. Poza tym ulepszanie tych funkcji nie szkodzi ani trochę stronie.
Udział Udział Ćwierkać E-mail Jak korzystać z Chrome OS na Raspberry PiNie stać Cię na Chromebooka? Szukasz alternatywy dla Raspbian? Oto jak zainstalować wersję Chrome OS na swoim Raspberry Pi.
Czytaj dalej Powiązane tematy- Internet
- Programowanie
- HTML
- Tworzenie stron internetowych
- JavaScript
- Google Chrome
Idowu pasjonuje się każdą inteligentną technologią i produktywnością. W wolnych chwilach bawi się kodowaniem, a gdy się nudzi, przechodzi na szachownicę, ale od czasu do czasu uwielbia też oderwać się od rutyny. Jego pasja do pokazywania ludziom drogi do nowoczesnych technologii motywuje go do pisania więcej.
Więcej od Idowu OmisolaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować