Google Chrome je jedan od popularnih web preglednika za web razvoj, zbog svojih naprednih značajki. Alati za razvojne programere Chromea^{(Chrome Developer Tools)} mogu biti vrlo korisni tijekom otklanjanja pogrešaka. Većina nas već zna da možemo uređivati ​​CSS uživo pomoću alata za razvojne programere Chrome^{(Chrome Dev Tools)} , ali postoji još savjeta koje ćemo podijeliti s vama danas.

Savjeti za razvojne alate za Chrome

Postoji mnogo nepoznatih i skrivenih trikova Chrome Dev Tools -a, a mi ćemo istražiti najkorisnije trikove među njima. Da biste otvorili alate za razvojne programere u Chromeu^(Chrome) , pritisnite F12 na tipkovnici i isprobajte sljedeće trikove.

1. Pronađite i otvorite bilo koju datoteku

Kada radimo web razvoj, bavimo se mnogim HTML , CSS , JS i drugim datotekama. Kada želimo bilo što otkloniti pogreške, otvaramo Chrome Dev alate. Možete brzo pretraživati ​​i pronaći određenu datoteku kako biste olakšali svoj posao. Samo^(Just) pritisnite Ctrl + P i počnite upisivati ​​naziv datoteke. To vam pomaže da pronađete određenu datoteku s popisa datoteka.

2. Traži unutar izvorne datoteke

U prethodnom triku saznali smo kako tražiti određenu datoteku. Možete čak tražiti određeni niz u svim učitanim datotekama. Pritisnite Ctrl + Shift + F za traženje niza u datotekama. Također podržava regularne izraze.

3. Idite na određeni redak

Nakon što otvorite bilo koju izvornu datoteku i želite prijeći na određeni redak, pritisnite Ctrl + G i unesite broj retka i pritisnite enter.

4. Odabir DOM elemenata na kartici Konzola^(Console)

Dev Tools vam također omogućuje odabir elemenata na konzoli.

• $() – Vraća^(Returns) prvo pojavljivanje odgovarajućeg CSS selektora.
• $$() – Vraća niz elemenata koji odgovaraju zadanom CSS selektoru.

Za više naredbi na konzoli idite na ovaj post.^{(this post.)}

5. Iskoristite višestruke umetke

Ponekad želite postaviti više znakova za umetanje na različita mjesta, a to možete jednostavno učiniti u alatima za razvojne programere Chromea^{(Chrome Dev)} tako da držite tipku Ctrl i kliknete na mjesto na koje ih želite postaviti. Zatim počnite pisati i vidjet ćete da je postavljeno na raznim odabranim mjestima.

6. Očuvati dnevnik

Očuvanje^(Preserve) zapisnika pomaže vam da sačuvate zapisnik čak i kada je stranica učitana. Označite opciju pored Očuvaj zapisnik^{(Preserve log )} u dnevniku konzole^(Console) i zapisnik će biti sačuvan. Ovo prikazuje zapisnik prije nego što se stranica ne učita i pomaže u istraživanju bugova.

7. Koristite ugrađeni kod za uljepšavanje

Chrome Dev Tools ima ugrađeni alat za uljepšavanje koda koji se zove lijepi ispis "{}"^{(pretty print “{}”)} . Alat za razvojne programere pokazuje minimizirani kod i nije ga tako lako čitati. Kliknite^(Click) na lijepi gumb za ispis koji je prikazan dolje lijevo na otvorenoj izvornoj datoteci, kako biste izvornu datoteku prikazali u formatu čitljivom za ljude.

8. Je li vaša web stranica prilagođena mobilnim uređajima? Provjerite ovdje

Chrome Dev Tools također nam omogućuje da provjerimo je li web-mjesto prilagođeno mobilnim uređajima ili ne. Možete provjeriti kako vaša web stranica izgleda na raznim uređajima. Prijeđite na alate za razvojne programere Chromea^{(Chrome Dev)} i na kartici Emulacija^{(Emulation )} možete arhivirati razne uređaje. Odaberite uređaj koji želite i testirajte kako vaša web stranica izgleda na tom uređaju.

Za više informacija pogledajte sljedeći video.

9. Emulirajte senzore i zemljopisni položaj^{(Geographical Location)}

Možete čak i oponašati senzore kao što su zasloni osjetljivi na dodir i akcelerometri. Možete čak i oponašati zemljopisni položaj. Da biste to učinili, prijeđite na Emulation -> Sensors.

10. Odaberite sljedeće pojavljivanje trenutne riječi

Ako želite zamijeniti riječ u cijelom njenom pojavljivanju, odaberite riječ i pritisnite Ctrl + D za odabir sljedećeg pojavljivanja odabrane riječi. Zatim možete urediti tu riječ u svim njezinim pojavljivanjima u jednom kadru.

11. Promijenite format boje

Samo upotrijebite Shift + Click na pregled boja da promijenite rgba, heksadecimalno i hsl formatiranje.

12. Dodajte^(Add) promjene lokalnim datotekama kroz radni prostor

U mogućnosti smo uređivati ​​izvorne datoteke i unositi neke izmjene u CSS , JavaScript i druge datoteke u alatima Chrome Dev . Za dodavanje ovih promjena u lokalne datoteke, nema potrebe kopirati i zalijepiti promjene iz radnog prostora u datoteke na disku. Alati za razvojne programere Chromea^{(Chrome Dev)} omogućuju vam da uskladite datoteke i ažurirate lokalnu datoteku s promjenama koje ste napravili u alatima za razvojne programere. Da biste to učinili, desnom tipkom miša kliknite izvornu datoteku na lijevoj strani kartice Izvori i odaberite ^{(Sources )}Dodaj mapu u radni prostor.^{(Add Folder to workspace.)}

Nadam se da ovo pomaže.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrоme is one of the popular web browsers for web development, due to its advanced features. 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

• Najbolji savjeti i trikovi za Google Chrome za korisnike računala sa sustavom Windows

• 3 korisna savjeta i trikova za korištenje ljepljivih bilješki

• Kako preuzeti font s web-mjesta pomoću alata za razvojne programere

• Ponovo pokrenite Chrome, Edge ili Firefox bez gubitka kartica u sustavu Windows 11/10

• Savjeti za korištenje Inspect Element preglednika Google Chrome

• 15 najboljih VPN-a za Google Chrome za pristup blokiranim stranicama

• Kako raditi anonimno u Chromeu, Firefoxu, Edgeu i Operi

• Kako staviti Google Chrome u tamni način rada -

• Kako prikvačiti web stranicu na programsku traku ili izbornik Start u sustavu Windows 10

• Kako mogu povećati tekst u Chromeu, Edgeu, Firefoxu i Operi?

• Stavite Chrome i druge preglednike na cijeli zaslon (Edge, Firefox i Opera)

• Jednostavna pitanja: Što su kolačići i čemu služe?

• Kako ponovno otvoriti zatvorenu karticu preglednika u Chromeu, Safariju, Edgeu i Firefoxu

• How to Fix Twitch Error 2000 in Google Chrome

• Identificirajte fontove u Chromeu, Edgeu i Firefoxu pomoću alata za razvojne programere

• Kako izbrisati kolačiće iz Chromea: sve što trebate znati

• Kako poslati tekst s računala s Android porukama

• Kako postaviti proxy poslužitelj u Chromeu, Firefoxu, Edgeu i Operi

• Kako se riješiti Yahoo pretraživanja u Chromeu

• Izbrišite podatke web-lokacije za određenu web-lokaciju u Chromeu ili Edgeu pomoću alata za razvojne programere