Skrivene funkcije Google Chrome-a za web developere

Chrome Dev Tools je jedan od najčešće korišćenih alata među web developerima. U pitanju je odličan alat koji ima mnogo korisnih funkcionalnost, pa ćemo vam zato u ovom članku predstaviti nekoliko eksperimentalnih funkcija Chrome DevTools-a koje bi svaki web developer trebalo da isproba.

CSS overview

CSS overview pruža rezime svih stilova koji se koriste na web stranici.

Sadrži detaljne informacije o bojama, fontovima, media query-ima i neiskorišćenim deklaracijama. Ova funkcionalnost je korisna kada pravite CSS modifikacije korisničkog interfejsa pa više ne morate da koristite alate treće strane kao što je color picker.

Kako omogućiti ovu funkcionalnost?

U Google Chrome-u kliknite na View -> Developer -> Developer Tools.
Otvorite Settings.
Kliknite na tab Experiments.
Omogućite CSS overview.
Zatvorite DevTools prozor i ponovo ga otvorite.
Novi tab će se pojaviti u DevTools kao CSS overview.

Iako je ovaj CSS overview panel samo eksperimentalni alat, biće vam veoma koristan i verovatno ćete ga rado ostaviti uključenim. Definitivno omogućava lakši rad sa CSS-om.

CSP violations

U pitanju je funkcionalnost koja detektuje i ukazuje na moguće izuzetke vezano za kršenje CSP-a.

Omogućavanje ove funkcionalnosti će obezbediti dodatni sloj bezbednosti vašoj aplikaciji i smanjiti ranjivosti kao što je Cross-Site Scripting (XSS).

Kako omogućiti ovu funkcionalnost?

Prelomne tačke za kršenje CSP-a možete omogućiti preko tab-a „Sources“

Idite na tab Experiments unutar Chrome Developer Tools.
Čekirajte opciju Show CSP Violations.
Zatvorite DevTools prozor i ponovo ga otvorite.
Pod CSP Violations Breakpoints čekirajte Trusted Type Violations i vrste kršenja da biste aktivirali funkciju.
Chrome DevTools čak prikazuje dodatne detalje o njihovom popravljanju, odmah ispred otkrivenog ranjivog bloka koda.

Novi alati za uređivanje fontova

Da li ste znali da možete odmah da izmenite sve fontove na svojoj web stranici i vidite kako izgledaju bez menjanja koda?

Chrome DevTools nude ovaj eksperimentalni alat za uređivanje fontova. Možete da promenite vrstu fonta (font family), veličinu, debljinu, visinu razmaka i vidite promene u realnom vremenu.

Kako omogućiti ovu funkcionalnost?

Idite na tab Experiments preko Chrome DevTools-a.
Čekirajte Enable New Font Editor Tools within Styles Pane.
Zatvorite DevTools prozor i ponovo ga otvorite.
Izaberite HTML element, koji uključuje svojstva fonta koje želite da promenite.
Zatim ćete primetiti ikonicu Font Editor-a fontova u okviru Styles panela.

Režim dvostrukog ekrana (Dual Screen Mode)

Omogućavanjem režima dvostrukog ekrana možete da otklonite greške u web aplikaciji na uređajima sa dva ekrana u okviru samog Chrome DevTools emulatora.

Ova funkcija je veoma korisna kada je u pitanju debagovanje na uređajima sa dva ekrana kao što je Surface Duo.

Kako omogućiti ovu funkcionalnost?

Idite na tab Experiments preko Chrome DevTools-a.
Čekirajte Emulation: Support dual-screen mode.
Zatvorite DevTools prozor i ponovo ga otvorite.
Otvorite web stranicu koju želite da testirate preko opcije Toggle Device Toolbar u gornjem desnom uglu DevTool prozora.
Prebacite emulator na Surface Duo uređaj (ili drugi dostupni sklopivi uređaj).
Zatim kliknite na Toggle dual-screen mode da biste emulirali svoju web aplikaciju u dual-screen mode-u.

Puni prikaz stabla pristupačnosti

Pomoću Chrome DevTools stabla pristupačnosti možete pregledati objekte pristupačnosti kreirane za svaki DOM element.

Ova funkcija je već poznata unutar taba Inspect Elements. Omogućava vam da istražite više accessibility detalja vaše web aplikacije.

Kako omogućiti ovu funkcionalnost?

Idite na karticu Experiments preko Chrome DevTools-a.
Čekirajte Full accessibility tree view in the Elements pane.
Zatvorite DevTools prozor i ponovo ga otvorite.
Prebacite Elements view mode to Full Accessibility Tree View tako što ćete kliknuti na novo dugme za pristupačnost prikazano na panelu Elements.

Da li znate za još neke funkcionalnosti? Podelite u komentarima.