Chrome razvojni alati Tutoriali, savjeti, trikovi

Google Chrome je jedan od popularnih web preglednika za razvoj web stranica, zbog svojih naprednih značajki. Chrome Razvojni alati može biti vrlo korisno za debugiranje. Većina nas već zna da možemo uređivati ​​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 Chrome Devera Alati, a mi ćemo biti u potrazi za najkorisnijih trikova među njima. Da biste otvorili alate za razvojne programere u Chromeu, na tipkovnici pritisnite F12 i isprobajte sljedeće trikove.

1. Pronalaženje i otvaranje bilo koje datoteke

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. Ovo vam pomaže da pronađete 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. Pritisnite Ctrl + Shift + F za traženje niza u datotekama. Ona također podržava regularne izraze.

3. Idite na određenu liniju

Nakon što otvorite bilo koju izvornu datoteku i želite se pomaknuti na određenu liniju, pritisnite Ctrl + G i unesite broj retka i pritisnite Enter.

4. Odabir elemenata DOM-a na kartici konzole

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

• $ () - Vraćanje prvog pojavljivanja odgovarajućeg CSS izbornika.
• $$ () - Vraća niz elemenata koji odgovaraju odabranom CSS izborniku.

Za više naredbi konzole, prijeđite na ovaj post.

5. Iskoristite više odjeljaka

Ponekad želite postaviti višestruke predmete na različitim mjestima, a to možete učiniti jednostavno u alatu Chrome Dev tako da držite tipku Ctrl i kliknete na mjesto gdje ih želite postaviti. Zatim počnite pisati i vidjet ćete da je postavljen na različitim mjestima.

6. Sačuvajte zapisnik

Sačuvaj zapisnik pomaže vam da se registar zadrži čak i kada je stranica učitana. Provjerite opciju pokraj Zadrži zapisnik u zapisniku konzole i zapis se sačuva. Ovo pokazuje zapis prije nego što stranica bude prazna i korisna za ispitivanje grešaka.

7. Upotrijebite ugrađeni kôd za uljepšavanje

Chrome Dev Alati imaju ugrađeni kôd za uljepšavanje nazvanu 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 nalazi 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 provjeru je li web-lokacija prilagođena mobilnim uređajima ili ne. Možete provjeriti kako vaša web-lokacija izgleda na različitim uređajima. Pređite na alate za Chrome Dev i pod karticom Emulation možete podnijeti različite uređaje. Odaberite uređaj koji želite i provjerite kako Vaša web stranica izgleda na tom uređaju.

Više informacija potražite na sljedećem videozapisu.

9. Emulirajte 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 Emulacija -> Senzori.

10. Odaberite sljedeću pojavu tekuće 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. Alter Color Format

Upotrijebite Shift + Click na pregledu boje kako biste promijenili izmjene rgba, heksadecimalnog i hsl formata.

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 na lijevoj strani na kartici Izvori i odaberite Dodaj mapu u radni prostor.

Više informacija o radnim prostorima potražite u pregledniku Chrome.com.