Poradniki, porady, porady dotyczące narzędzi do Chrome

Google Chrome to jedna z popularnych przeglądarek internetowych do tworzenia stron internetowych, ze względu na jej zaawansowane funkcje. Narzędzia dla programistów Chrome mogą być bardzo przydatne podczas debugowania. Większość z nas już wie, że możemy edytować CSS na żywo za pomocą Narzędzi Chrome Dev, ale jest więcej wskazówek, którymi się dziś z Wami podzielimy.

Wskazówki na temat narzędzi do programowania Chrome

Istnieje wiele nieznanych i ukrytych sztuczek z Chrome Dev Narzędzia, a my zajmiemy się najbardziej przydatnymi sztuczkami. Aby otworzyć narzędzia dla programistów w przeglądarce Chrome, naciśnij klawisze F12 na klawiaturze i wypróbuj poniższe triki.

1. Znajdź i otwórz dowolny plik

Podczas tworzenia stron internetowych mamy do czynienia z wieloma plikami HTML, CSS, JS i innymi. Gdy chcemy coś debugować, otwieramy narzędzia Chrome Dev. Możesz szybko wyszukać i znaleźć konkretny plik, aby ułatwić ci pracę. Po prostu naciśnij Ctrl + P i zacznij wpisywać nazwę pliku. Pomaga to znaleźć konkretny plik z listy plików.

2. Wyszukiwanie w pliku źródłowym

W poprzednim triku dowiedzieliśmy się, jak wyszukać konkretny plik. Możesz nawet wyszukać konkretny ciąg we wszystkich załadowanych plikach. Naciśnij klawisz Ctrl + Shift + F , aby wyszukać ciąg w plikach. Obsługuje również wyrażenia regularne.

3. Idź do konkretnej linii

Po otwarciu dowolnego pliku źródłowego i przejściu do konkretnej linii, naciśnij Ctrl + G i podaj numer wiersza, a następnie naciśnij Enter.

4. Wybranie zakładki DOM Elements na konsoli

Dev Tools pozwala także wybrać elementy w konsoli.

• $ () - Zwraca pierwsze wystąpienie pasującego selektora CSS.
• $$ () - Zwraca tablicę elementów pasujących do wybranego selektora CSS.

Aby uzyskać więcej poleceń konsoli, przejdź do tego wpisu.

5. Korzystaj z wielu funkcji

Czasami chcesz ustawić wiele opiekunów w różnych miejscach i możesz to zrobić w narzędziach Chrome Chrome, przytrzymując klawisz Ctrl i klikając w miejscu, w którym chcesz je umieścić. Następnie zacznij pisać, a zobaczysz, że jest ono umieszczone w różnych wybranych miejscach.

6. Zachowaj dziennik

Zachowaj dziennik pomaga utrzymać dziennik nawet podczas ładowania strony. Zaznacz opcję obok Zachowaj dziennik w dzienniku konsoli, a dziennik zostanie zachowany. Wyświetla to dziennik przed stroną w rozładunku i pomaga w śledzeniu błędów.

7. Użyj wbudowanego upiększacza kodu

Chrome Dev Tools ma wbudowany upiększacz kodu o nazwie ładny wydruk "{}". Narzędzie programistyczne pokazuje zminimalizowany kod i nie jest tak łatwe do odczytania. Kliknij ładny przycisk drukowania, który jest wyświetlany w lewym dolnym rogu otwartego pliku źródłowego, aby wyświetlić plik źródłowy w formacie czytelnym dla człowieka.

8. Czy Twoja strona jest przyjazna dla urządzeń mobilnych? Sprawdź to tutaj

Narzędzia Chrome Dev Tools pozwalają także sprawdzić, czy witryna jest dostosowana do urządzeń mobilnych. Możesz sprawdzić, jak Twoja witryna wygląda na różnych urządzeniach. Aby przejść do narzędzi Chrome Dev i na karcie Emulacja , możesz zapisać różne urządzenia. Wybierz żądane urządzenie i sprawdź, jak wygląda twoja witryna w tym urządzeniu.

Aby uzyskać więcej informacji, obejrzyj następujące wideo.

9. Emulacja czujników i ich położenie geograficzne

Można nawet emulować czujniki takie jak ekran dotykowy i przyspieszeniomierze. Możesz nawet naśladować położenie geograficzne. Aby to zrobić, przejdź do pozycji Emulacja -> Czujniki.

10. Wybierz następne wystąpienie bieżącego słowa

Jeśli chcesz zamienić słowo we wszystkich jego wystąpieniach, zaznacz słowo i naciśnij klawisz Ctrl + D , aby wybrać następne wystąpienie wybranego słowa. Możesz edytować to słowo we wszystkich zdarzeniach za jednym razem.

11. Zmień format koloru

Po prostu użyj Shift + kliknij na podglądzie kolorów, aby zmienić formatowanie rgba, szesnastkowe i hsl.

12. Dodaj zmiany do plików lokalnych poprzez obszar roboczy

Jesteśmy w stanie edytować pliki źródłowe i wprowadzać pewne zmiany w CSS, Java Script i innych plikach w narzędziach Chrome Dev. Aby dodać te zmiany do plików lokalnych, nie ma potrzeby kopiowania wklejania zmian z obszaru roboczego do plików na dysku. Narzędzia Chrome Dev pozwalają dopasowywać pliki i aktualizować lokalny plik zmianami dokonanymi w narzędziach programistycznych. Aby to zrobić, kliknij prawym przyciskiem myszy plik źródłowy po lewej stronie na karcie Źródła i wybierz opcję Dodaj folder do obszaru roboczego.

Aby uzyskać więcej informacji na temat obszarów roboczych, przejdź do strony Chrome.com.