Google Chrome jedan je od popularnih web preglednika za web razvoj, zbog svojih naprednih značajki. Alati za razvojne programere Chrome može biti vrlo korisno za debugiranje. Većina nas već zna da možemo urediti live CSS pomoću Chrome Dev Alata, ali ima još savjeta koje ćemo danas podijeliti s vama.
Savjeti za Chrome razvojni alati
Postoji mnogo nepoznatih i skrivenih trikova Chromeovih alata za razvojne programere i pregledat ćemo najkorisnije trikove među njima. Da biste otvorili alate za razvojne programere u Chromeu, 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 ništa riješiti, otvaramo alate za Chrome Dev. Možete brzo pretražiti i pronaći određenu datoteku kako biste olakšali posao. Samo, pritisnite Ctrl + P i počnite upisivati naziv datoteke. To vam pomaže pronaći određenu datoteku s popisa datoteka.
2. Pretraživanje unutar izvorne datoteke
U prethodnom triku saznali smo kako pretražiti određenu datoteku. Čak možete tražiti određeni niz u svim učitanim datotekama. tisak Ctrl + Shift + F za traženje niza u datotekama. Ona također podržava regularne izraze.
3. Idite na određenu liniju
Kada otvorite bilo koju izvornu datoteku i želite se pomaknuti na određenu liniju, a zatim pritisnite Ctrl + G i navedite redni broj i pritisnite enter.
4. Odabir DOM elemenata na kartici Konzola
Dev Alati također vam omogućuju odabir elemenata u konzoli.
- $() – Vraća prvu pojavu odgovarajućeg izbornika CSS-a.
- $$() – Vraća niz elemenata koji odgovaraju odabranom CSS izborniku.
5. Iskoristite više odjeljaka
Ponekad želite postaviti više slojeva na različitim mjestima, a to možete učiniti lako u alatu Chrome Dev tako da zadržite ctrl ključ i klikom na mjesto gdje ih želite postaviti. Zatim počnite pisati i vidjet ćete da je postavljen na različitim mjestima.
6. Sačuvajte zapisnik
Očuvanje zapisnika pomaže vam da zadržite zapisnik čak i ako je stranica učitana. Provjerite opciju pokraj Zadrži zapisnik u zapisniku konzole i zapis se sačuva. Ovo prikazuje zapis prije nego što stranica bude prazna i korisna za ispitivanje grešaka.
7. Koristite ugrađeni kôd za uljepšavanje
Chrome Dev Alati imaju ugrađeni kôd za uljepšavanje koji se zove lijep ispis "{}". Alat za razvojne programere pokazuje kôd koji se minimizira i nije tako jednostavan za čitanje. Kliknite lijepi gumb za ispis koji se prikazuje na dnu lijevo na otvorenoj izvornoj datoteci, kako bi se izvorna datoteka prikazala u čitljivom obliku.
8. Je li vaša web lokacija mobilna? Provjerite ovdje
Chrome Dev Alati također nam omogućuju da provjerimo je li web stranica prilagođena za mobilne uređaje ili ne. Možete provjeriti kako vaša web-lokacija izgleda na različitim uređajima. Prebacite na alate Chrome Dev i ispod imitacija možete podnijeti različite uređaje. Odaberite uređaj koji želite i provjerite kako Vaša web stranica izgleda na tom uređaju.
9. Emuliraju senzore i geografsku lokaciju
Možete čak emulirati senzore poput dodirnog zaslona i akcelerometara. Možete čak i oponašati zemljopisni položaj. Da biste to učinili, prijeđite na glavu Emulacija -> Senzori.
10. Odaberite sljedeću pojavu trenutačne riječi
Ako želite zamijeniti riječ U svim pojavama, odaberite riječ i pritisnite Ctrl + D za odabir sljedeće pojave odabrane riječi. Možete urediti tu riječ u svim pojavama u jednom kadru.
11. Promijenite format boja
Samo koristite Shift + Klik na pregledu boja za promjenu promjena između rgba, heksadecimalnog i hsl oblikovanja.
12. Dodajte promjene lokalnim datotekama kroz radni prostor
U mogućnosti smo urediti izvorne datoteke i napraviti neke izmjene u CSS-u, Java Scriptu i drugim datotekama u alatu Chrome Dev. Da biste ove izmjene dodali lokalnim datotekama, ovdje nema potrebe za kopiranjem zalijepite promjene s radnog prostora u datoteke na disku. Alati usluge Chrome Dev omogućuju vam podudaranje datoteka i ažuriranje lokalne datoteke s promjenama koje ste izvršili u alata za dev. Da biste to učinili, desnom tipkom miša kliknite izvornu datoteku s lijeve strane na izvori karticu i odaberite Dodaj mapu u radni prostor.
Da biste saznali više o radnim prostorima, prijeđite na Chrome.com.
