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^{(Chrome Developer Tools)} mogą być bardzo przydatne podczas debugowania. Większość z nas już wie, że możemy edytować kod CSS na żywo za pomocą Narzędzi dla programistów Chrome^{(Chrome Dev Tools)} , ale jest jeszcze więcej wskazówek, którymi podzielimy się z Wami dzisiaj.

Wskazówki dotyczące narzędzi programistycznych Chrome

Istnieje wiele nieznanych i ukrytych sztuczek Chrome Dev Tools , a my przyjrzymy się najbardziej przydatnym z nich. Aby otworzyć narzędzia programistyczne w Chrome , naciśnij F12 na klawiaturze i wypróbuj poniższe sztuczki.

1. Znajdź i otwórz dowolny plik

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

2. Wyszukaj w pliku źródłowym

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

3. Przejdź do określonej linii

Po otwarciu dowolnego pliku źródłowego i chęci przejścia do określonej linii naciśnij Ctrl + G , podaj numer linii i naciśnij Enter.

4. Wybór elementów DOM w zakładce Konsola^(Console)

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

• $() – zwraca^(Returns) pierwsze wystąpienie pasującego selektora CSS .
• $$() – Zwraca tablicę elementów pasujących do danego selektora CSS .

Aby uzyskać więcej poleceń konsoli, przejdź do tego postu.^{(this post.)}

5. Korzystaj z wielu karetek

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

6. Zachowaj dziennik

Zachowaj^(Preserve) dziennik pomaga zachować dziennik nawet po załadowaniu strony. Zaznacz opcję obok opcji Zachowaj dziennik^{(Preserve log )} w dzienniku konsoli^(Console) , a dziennik zostanie zachowany. To pokazuje dziennik przed wyładowaniem strony i pomaga w zbadaniu błędów.

7. Użyj wbudowanego upiększacza kodu

Chrome Dev Tools ma wbudowany upiększacz kodu o nazwie ładny druk „{}”^{(pretty print “{}”)} . Narzędzie programistyczne pokazuje zminimalizowany kod i nie jest tak łatwe do odczytania. Kliknij^(Click) ładny przycisk drukowania, który jest widoczny 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 witryna jest przyjazna dla urządzeń mobilnych? Sprawdź to tutaj

Chrome Dev Tools pozwala nam również sprawdzić, czy witryna jest przyjazna dla urządzeń mobilnych, czy nie. Możesz sprawdzić, jak wygląda Twoja strona na różnych urządzeniach. Przejdź do narzędzi Chrome Dev i na karcie Emulacja^{(Emulation )} możesz złożyć pliki na różnych urządzeniach. Wybierz urządzenie, które chcesz i przetestuj, jak wygląda Twoja witryna na tym urządzeniu.

Aby uzyskać więcej informacji, obejrzyj poniższy film.

9. Emuluj czujniki i położenie geograficzne^{(Geographical Location)}

Możesz nawet emulować czujniki, takie jak ekrany dotykowe i akcelerometry. Możesz nawet naśladować położenie geograficzne. Aby to zrobić, przejdź do Emulation -> Sensors.

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 Ctrl + D , aby wybrać następne wystąpienie zaznaczonego słowa. Następnie możesz edytować to słowo we wszystkich jego wystąpieniach w jednym ujęciu.

11. Zmień format kolorów

Po prostu użyj Shift + Click podgląd koloru, aby zmienić zmiany między formatowaniem rgba, szesnastkowym i hsl.

12. Dodaj^(Add) zmiany do plików lokalnych za pośrednictwem obszaru roboczego

Jesteśmy w stanie edytować pliki źródłowe i wprowadzać pewne zmiany w CSS , JavaScript i innych plikach w narzędziach Chrome Dev . Aby dodać te zmiany do plików lokalnych, nie ma potrzeby kopiowania i wklejania zmian z obszaru roboczego do plików na dysku. Narzędzia dla programistów Chrome^{(Chrome Dev)} umożliwiają dopasowywanie plików i aktualizowanie pliku lokalnego o zmiany wprowadzone w narzędziach programistycznych. Aby to zrobić, kliknij prawym przyciskiem myszy plik źródłowy po lewej stronie na karcie Źródła^{(Sources )} i wybierz Dodaj folder do obszaru roboczego.^{(Add Folder to workspace.)}

Mam nadzieję że to pomoże.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web browserѕ for web development, due to its advancеd feаtures. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Najlepsze porady i wskazówki dotyczące Google Chrome dla użytkowników komputerów z systemem Windows

• 3 przydatne wskazówki i porady dotyczące korzystania z karteczek samoprzylepnych

• Jak pobrać czcionkę ze strony internetowej za pomocą Narzędzi dla programistów?

• Uruchom ponownie Chrome, Edge lub Firefox bez utraty kart w systemie Windows 11/10

• Wskazówki dotyczące korzystania z elementu Inspect w przeglądarce Google Chrome

• Jak ustawić serwer proxy w Chrome, Firefox, Edge i Opera?

• Eksportuj hasła z Chrome, Firefox, Opera, Microsoft Edge i Internet Explorer

• Co to jest DNS przez HTTPS lub Bezpieczne wyszukiwania DNS? Włącz to w Google Chrome!

• Jak wysłać SMS-a z komputera za pomocą Wiadomości na Androida

• Jak włączyć opcję Nie śledź w Chrome, Firefox, Edge i Opera?

• Jak ustawić Google Chrome w trybie ciemnym —

• Jak korzystać z emulatora przeglądarki mobilnej w Chrome, Firefox, Edge i Opera -

• Jak zmienić wyszukiwarkę w Chrome na Windows, macOS, Android i iOS -

• Google Chrome dla komputerów Mac: jak to zdobyć!

• Jak powiększyć tekst w przeglądarkach Chrome, Edge, Firefox i Opera?

• Jak wyłączyć powiadomienia Chrome na Androida: kompletny przewodnik

• Twórz skróty InPrivate lub Incognito dla przeglądarki Firefox, Chrome, Edge, Opera lub Internet Explorer

• Jak wyłączyć powiadomienia Chrome: wszystko, co musisz wiedzieć -

• Połącz wszystkie swoje konta e-mail w jedną skrzynkę odbiorczą Gmail

• Napraw niedziałające autoodtwarzanie YouTube