Share
Aplicațiile Chrome DevTools se îndreaptă în mod consecvent și ne oferă noi funcții utile, care ne ușurează viața în calitate de designeri web. În această listă, vom verifica trei dintre cele mai grave adăugiri recente. Hai să intrăm!
Dacă utilizați variabile CSS în CSS, până acum, când ați inspectat codul dvs. cu Chrome DevTools tot ce ați vedea în stiluri fila ar fi ceva de genul font-size: var (- fontsize), fără nici o indicație despre ce reprezenta această variabilă. Pentru a înțelege codul dvs., va trebui să găsiți numele variabilei în :rădăcină secțiunea CSS, căutați valoarea, amintiți-vă, reveniți la secțiunea de cod pe care o inspectați și încercați să o lucrați de acolo.
Acum, DevTools va calcula variabila CSS în stiluri pentru a le putea inspecta valorile în linie, precum și pentru a vedea previzualizările culorilor. De asemenea, veți putea modifica valorile variabilelor CSS. Iată cum funcționează toate.
Notă: Veți avea nevoie de Chrome 67 pentru a încerca aceste funcții. Chromium 67 nu le include încă.
În captura de ecran de mai jos veți vedea un exemplu de nouă funcție de verificare a variabilelor. În stiluri filă, uita-te la culoare și marimea fontului proprietățile evidențiate de caseta roșie. În fața variabilei var (- text) veți vedea un pătrat colorat mic - aceasta este o previzualizare a culorii definite de această variabilă. Mai jos veți vedea mouse-ul deasupra var (- FONTSIZE), care face ca valoarea sa calculată să apară într-un indicator. Această funcție poate fi utilizată pentru a inspecta valoarea oricărui tip de variabilă CSS.
Verificați valorile în linieSecțiunea de jos a selectorului de culori din DevTools Chrome ne-a oferit deja acces la diferite tipuri de palete de culori, cum ar fi culorile "Material" sau culorile detectate ca fiind utilizate de pagina curentă. Atunci când utilizați selectorul de culori pe variabilele CSS, o paletă suplimentară devine acum disponibilă, una care vă arată toate culorile definite ca variabile în foaia de stil.
Pentru a deschide selectorul de culori, dați clic pe pictograma de previzualizare color în fața unei variabile de culoare. Pentru a accesa lista de palete disponibile, faceți clic pe butonul de comutare situat în partea dreaptă a secțiunii paletei.
Aceasta vă va arăta paletele de culori disponibile, câte una pe linie. Aici veți vedea o linie numită "Variabile CSS", iar dacă treceți cu mouse-ul peste culorile de aici, veți vedea o sugestie care vă arată variabilele pe care le reprezintă. Selectați paleta "Variabile CSS" făcând clic pe acea linie.
Acum când selectați o altă culoare decât această paletă, numele acelei variabile noi va fi înlocuit în cod. De exemplu, în imaginea de sub numele de variabilă --text a fost înlocuit cu --alternativă de text după ce faceți clic pe o altă culoare din paletă.
Nu numai că puteți inspecta și modifica codul variabil CSS pentru stilurile individuale, dar puteți face acest lucru și la nivelul rădăcinilor.
Selectați orice element, derulați în jos până la partea de jos a stiluri și găsiți :rădăcină, unde sunt definite toate variabilele tale. Puteți modifica oricare valoare variabilă aici și modificările vor fi actualizate pe întreaga pagină.
Pentru a edita o valoare a culorii, faceți clic pe caseta de previzualizare a culorilor de lângă ea și folosiți selectorul de culori. Pentru a edita alte tipuri de valori, cum ar fi dimensiunile fontului, de exemplu, faceți dublu clic pe ele și tastați noua valoare.
În exemplul de mai jos, puteți vedea că folosim selectorul de culori pentru a ajusta valoarea --text variabila care controlează culoarea textului nostru.
Dacă doriți să oferiți această nouă funcționalitate, am instalat acest stilou, astfel încât să puteți utiliza DevTools pentru a vă distinge culoarea de fundal, culoarea textului și dimensiunea fontului unei pagini simple:
Dacă ați încercat vreodată să depanați codul minificat, știți că poate fi un proces dureros. Datorită browserului Chrome / Chromium 66, nu va mai fi nevoie să rezolvați această problemă, deoarece acum are capacitatea de a imprima / format codul miniatural pentru o mai bună citire.
Pentru a utiliza această funcție mergeți în surse filă, mergi acolo la Pagină , apoi selectați un fișier minificat din lista de fișiere încărcate din panoul din stânga. Aceasta va afișa conținutul fișierului în fereastra centrală. În partea de jos a acestei ferestre veți vedea o pereche de paranteze curbate , iar dacă treceți peste ele, veți vedea o sugestie care va citi "Pretrat de imprimare".
Faceți clic pe acest buton, iar fișierul dvs. va fi "imprimat frumos" și va fi mult mai ușor de depanat:
Puteți face același lucru pentru fișierele CSS miniaturate, dar în loc de tooltip-ul "Pretty Print" se va scrie "Format".
Faceți clic pe micul butonul CSS va deveni frumos și ușor de citit, de asemenea:
Ați lucrat vreodată pe unele pagini de tweak la o pagină prin intermediul DevTools, dar apoi a trebuit să actualizați pagina și a trebuit să pierdeți toate ajustările pe care le-ați testat?
De la Chrome / Chromium 65, nu veți mai avea niciodată această problemă, datorită funcției "Local Overrides". Cu această caracteristică activă, orice modificări pe care le faceți prin DevTools pot fi salvate automat într-un fișier local de pe hard disk și când actualizați pagina în care fișierul va fi încărcat, păstrând astfel ajustările dvs..
Pentru a activa suprasarcinile locale mergeți la surse tab, și acolo la Înlocuiri tab. Dacă nu vedeți fila, extindeți selecția făcând clic pe >> buton.
Prima dată când activați suprasarcinile locale, veți vedea un mic buton etichetat + Selectați dosarul pentru suprascrieri. După cum sugerează și numele, aceasta vă va permite să specificați unde ar trebui salvate fișierele locale de suprascriere. Apăsați butonul respectiv și selectați directorul pe care doriți să îl utilizați:
După ce selectați un dosar, veți vedea un avertisment de securitate care apare în partea de sus a browserului. Mergeți mai departe și faceți clic pe Permite a inainta, a merge mai departe:
Încercați acum să faceți o schimbare la o pagină web utilizând DevTools, cum ar fi schimbarea culorii textului pe un site live, de exemplu. Reîmprospătați pagina și veți vedea că schimbarea culorii va fi în continuare prezentă.
Dacă te întorci în Înlocuiri acum veți vedea un fișier nou adăugat. Presupunând că tweak-ul pe care l-ați făcut a fost de o culoare text, acesta va fi un fișier CSS. Acesta este fișierul care conține suprascrisurile dvs. locale și atâta timp cât înlocuirile locale sunt active acest fișier va fi încărcat în locul fișierului adevărat al site-ului. Sclipitor!
Puteți dezactiva înlocuirile locale în orice moment prin debifarea opțiunii Activați suprascrierea locală cutie. De asemenea, puteți șterge fișiere de suprascriere individuale din Înlocuiri fila sau manual prin managerul de fișiere al sistemului.
Acolo le avem: trei noi caracteristici noi de la Chrome DevTools care ar trebui să se dovedească foarte utile! Variabilele CSS sunt acum mai ușor de utilizat, codul miniaturat poate fi acum citit, iar utilizarea DevTools pentru a testa trucurile către site-uri este mai puternică.
Așteptăm cu nerăbdare să vedem ce ne mai păstrează echipa Chrome DevTools!
Accentsconagua