Gabinet

Wskazówki dotyczące korzystania z elementu Inspect Element of Google Chrome

6 Useful Inspect Element Tips !

6 Useful Inspect Element Tips !

Spisu treści:

Anonim

Google Chrome został zaprojektowany nie tylko dla zwykłych użytkowników internetu, ale także dla twórców stron internetowych, którzy często tworzą witrynę internetową, projektują blogi itp. Sprawdź element lub Sprawdź opcję w Google Chrome pomaga użytkownikom znaleźć informacje o witrynie, która jest ukryta. Oto kilka wskazówek dotyczących korzystania z przeglądarki Inspect Element przeglądarki Google Chrome na komputerze z systemem Windows.

Sprawdź element przeglądarki Google Chrome

1] Znajdź ukryte pliki JavaScript / Media

Wiele witryn pokazuje okienka wyskakujące, jeśli użytkownik pozostaje w sieci strona przez ponad 15 lub 20 sekund. Lub, wiele razy, obraz, reklama lub ikona, otwiera się po kliknięciu gdzieś losowo. Aby znaleźć te ukryte pliki strony internetowej, można skorzystać z karty Źródła elementu Inspect. Pokazuje listę widoku drzewa po lewej stronie, którą można eksplorować.

2] Uzyskaj kod koloru HEX / RGB w Chrome

Czasami możemy polubić kolor i chcieć poznać jego kod koloru. Możesz łatwo znaleźć kod koloru HEX lub RGB używany na konkretnej stronie internetowej, korzystając z natywnej opcji w Google Chrome. Kliknij kolor prawym przyciskiem myszy i kliknij Sprawdź . W większości przypadków otrzymasz kod koloru po prawej stronie z innymi CSS. Jeśli go nie widzisz, być może będziesz musiał skorzystać z bezpłatnego oprogramowania do wybierania kolorów

WSKAZÓWKA : Zapoznaj się także z narzędziami do wybierania kolorów.

3] Uzyskaj porady dotyczące poprawy wydajności strony

Wszyscy uwielbiają lądować na stronie, która otwiera się szybko. Jeśli projektujesz swoją witrynę, zawsze powinieneś o tym pamiętać. Istnieje wiele narzędzi do sprawdzania i optymalizowania szybkości ładowania strony. Jednak Google Chrome ma również wbudowane narzędzie, które pozwala użytkownikom uzyskać wskazówki, które poprawią szybkość ładowania strony. Aby uzyskać dostęp do tych narzędzi, przejdź do zakładki Audyty i upewnij się, że Wykorzystanie sieci , Wydajność strony internetowej i Odśwież stronę i audyt przy obciążeniu są wybrane. Następnie kliknij przycisk Uruchom . Ponownie załaduje stronę i wyświetli informacje, które można wykorzystać w celu przyspieszenia działania strony. Na przykład można uzyskać wszystkie zasoby, które nie mają daty wygaśnięcia pamięci podręcznej, JavaScript, który można połączyć w jeden plik itd.

4] Sprawdź czas reakcji

Uczynienie strony responsywnej jest kluczowe w dzisiejszych czasach. Istnieje mnóstwo narzędzi, które mogą sprawdzić, czy twoja strona jest w pełni responsywna czy nie. Jednak to narzędzie Google Chrome pomaga użytkownikom dowiedzieć się, czy witryna jest responsywna, czy nie, jak również sprawdzić, jak będzie wyglądać na danym urządzeniu mobilnym. Otwórz dowolną witrynę, pobierz Sprawdź element , kliknij przycisk telefonu komórkowego, ustaw rozdzielczość lub wybierz żądane urządzenie, aby przetestować stronę internetową.

5] Edytuj witrynę na żywo

Załóżmy, że tworzysz stronę internetową, ale nie masz pojęcia o kolorze schemat lub rozmiar menu nawigacyjnego lub zawartość lub stosunek paska bocznego. Możesz edytować swoją witrynę na żywo za pomocą opcji Sprawdź element w Google Chrome. Mimo że nie możesz zapisać zmian na stronie internetowej na żywo, możesz wykonać całą edycję, aby móc z niej dalej korzystać. Aby to zrobić, otwórz Inspect Element, wybierz właściwość HTML od lewej strony i wprowadź zmiany w stylizacji po prawej stronie. Jeśli dokonasz jakiejkolwiek zmiany w CSS, możesz kliknąć link do pliku, skopiować cały kod i wkleić go do oryginalnego pliku.

Sprawdź element przeglądarki Google Chrome to prawdziwy towarzysz każdego programisty stron internetowych. Nie ma znaczenia, czy tworzysz jednostronicową stronę internetową czy dynamiczną stronę internetową, z pewnością możesz skorzystać z tych wskazówek.