Home-theater-designers
Chrome DevTools este un atu esențial pentru dezvoltatori. În timp ce alte browsere oferă instrumente de depanare destul de la îndemână, Chrome DevTools merită atenția dvs. datorită interfeței sale multifuncționale și popularității sale.
Chrome este cel mai popular browser pentru dezvoltatori datorită suitei sale puternice de instrumente de depanare. Utilizarea Chrome DevTools este ușoară, dar trebuie să înțelegeți cum funcționează pentru a profita la maximum.
Cum funcționează instrumentele pentru dezvoltatori Chrome
Chrome DevTools vă permite să rezolvați problemele de pe un site web prin consola de erori și alte instrumente de depanare și monitorizare. Utilizarea DevTools expune lacunele frontend-ului și vă permite să monitorizați modul în care site-ul dvs. web apare pe dispozitive mobile și tablete.
Cu DevTools, puteți efectua modificări în timp real pe codul unui site web, cum ar fi JavaScript, HTML și CSS, și puteți obține rezultate instantanee ale modificărilor dvs.
Modificările pe care le efectuați prin intermediul DevTools nu afectează permanent site-ul web. Acestea afișează temporar rezultatul așteptat doar ca și când le-ați fi aplicat la codul sursă real. Acest lucru vă permite să găsiți modalități prin care site-ul dvs. web să se încarce mult mai rapid și ușurează eliminarea erorilor.
Cum se accesează Chrome DevTools
Puteți accesa Chrome DevTools în mai multe moduri. Pentru a deschide instrumentele pentru dezvoltatori cu metoda de comandă rapidă pe Mac OS, apăsați Cmd + Opt + I . Dacă utilizați sistemul de operare Windows, apăsați pe Ctrl + Shift + I tastele de pe tastatură.
Alternativ, puteți accesa instrumentele pentru dezvoltatori Chrome făcând clic pe cele trei puncte din colțul din dreapta sus al ecranului. Mergeți spre Mai multe unelte și selectați Instrumente de dezvoltare . O altă opțiune este să faceți clic dreapta pe pagina web și să faceți clic pe Inspecta opțiune.
Utilizarea instrumentelor pentru dezvoltatori Chrome pentru diagnosticarea site-ului web
Chrome DevTools oferă mai multe moduri de a modifica și depana o pagină web. Să aruncăm o privire asupra câtorva moduri în care DevTools vă poate ajuta.
Vedeți cum arată site-ul dvs. pe un smartphone
După ce comutați browserul Chrome în modul dezvoltator, acesta redă o versiune pe jumătate a paginii dvs. web. Cu toate acestea, acest lucru nu vă va oferi o imagine reală despre cum ar arăta pe un smartphone sau tabletă.
Din fericire, pe lângă setarea dimensiunii ecranului unei pagini web, Chrome DevTools vă permite să comutați între diferite tipuri de ecran mobil și versiuni.
Pentru a accesa această opțiune, comutați pe Inspecta modul. Apoi, faceți clic pe Receptiv derulați în colțul din stânga sus al DevTools și selectați dispozitivul mobil preferat. Apoi pagina web redă și se ajustează pentru a se potrivi cu dimensiunea dispozitivului mobil pe care l-ați selectat.
cum să vezi cine te urmărește pe facebook
Accesați fișierele sursă ale unei pagini web
Puteți accesa fișierele care alcătuiesc o pagină web prin Chrome DevTools. Pentru a accesa aceste fișiere, faceți clic pe Surse opțiunea din partea superioară a meniului DevTools. Acest lucru expune sistemul de fișiere al site-ului web și vă oferă, de asemenea, editare.
De asemenea, puteți căuta fișiere sursă, care pot fi utile atunci când aveți de-a face cu o pagină web care are multe resurse. Pentru a căuta un fișier sursă prin DevTools, faceți clic pe Căutare opțiune chiar deasupra consolei.
Cu toate acestea, dacă nu găsiți Căutare opțiune, o alternativă mai bună este utilizarea comenzilor rapide de la tastatură. Pe Mac OS, apăsați tasta Cmd + Opt + F tastele pentru a căuta un fișier sursă. Dacă utilizați sistemul de operare Windows, apăsați tasta Ctrl + Shift + F pentru a accesa bara de căutare a fișierului sursă.
Efectuați editări live pe o pagină web
Unul dintre principalele scopuri ale utilizării DevTools este realizarea unui editare falsă instantanee a elementelor de pe o pagină web . După ce treceți la instrumentele pentru dezvoltatori, puteți edita conținutul HTML al unui site web făcând clic pe Elemente opțiune. Apoi, faceți clic dreapta pe orice punct la care doriți să aplicați modificări în editorul de cod și selectați Editați ca HTML .
Pentru a edita proprietăți CSS care nu sunt în linie, selectați Surse . Apoi, selectați fișierul CSS pe care doriți să îl editați. Plasați cursorul pe linia aleasă în consola de coduri pentru a efectua o editare live. Acest lucru vă oferă feedback instantaneu cu privire la orice modificări de stil pe care le aplicați paginii web.
Rețineți că atunci când editați o pagină prin DevTools, reîncărcarea paginii din browser o readuce la forma sa originală, iar editarea este vizibilă numai pentru dvs. Editarea prin DevTools nu afectează nici buna funcționare și nici utilizarea site-ului respectiv pentru alți utilizatori.
Depanați codul JavaScript cu DevTools Console
Una dintre cele mai bune modalități de depanare a JavaScript-ului este utilizarea instrumentelor de dezvoltator Chrome. Vă oferă un raport direct al scripturilor nevalide, precum și locația exactă a erorii.
Este o practică bună să păstrați întotdeauna DevTools deschis în timp ce proiectați un site web cu JavaScript. De exemplu, rularea console.log () comanda JavaScript pe un set de instrucțiuni afișează rezultatul acelui jurnal în consola DevTools dacă programul rulează cu succes.
În mod implicit, consola raportează orice probleme JavaScript pe site-ul dvs. web. Puteți găsi consola în partea inferioară a DevTools sau accesați-o făcând clic pe Consolă opțiunea din partea de sus a ferestrei Chrome DevTools.
Monitorizați încărcarea resurselor dintr-o bază de date
În plus față de depanarea JavaScript, consola vă poate oferi și un detaliu al resurselor care nu se încarcă corect din baza de date a site-ului web.
Deși acesta nu este întotdeauna cel mai bun mod de depanare a problemelor de backend, vă spune totuși ce resurse returnează un 404 eroare după rularea unei interogări în baza de date a acelor elemente.
Legate de aceasta: erori comune ale site-ului web și ce înseamnă
Comutați orientarea instrumentelor pentru dezvoltatori Chrome
Pentru a schimba poziția instrumentelor pentru dezvoltatori Chrome, faceți clic pe cele trei puncte din meniu în DevTools (nu pe principalul din browser). Apoi selectați poziția preferată din Partea docului opțiune.
Instalați extensiile Chrome DevTools
De asemenea, puteți instala extensii specifice limbii sau cadrului care funcționează cu Chrome DevTools. Instalarea acestor extensii vă permite să depanați pagina web mai eficient.
Puteți accesa o listă de extensii disponibile pentru Chrome DevTools în Chrome Extensii DevTools prezentate Galerie.
Verificați dacă există probleme de securitate pe un site web
Chrome DevTools vă permite să evaluați cât de sigur este site-ul dvs. web, pe baza unor parametri precum disponibilitatea certificate de securitate web și cât de sigură este conexiunea, printre altele. Pentru a verifica dacă site-ul dvs. web este sigur, faceți clic pe Securitate opțiune din partea de sus a DevTools.
The Securitate fila vă oferă o prezentare generală a detaliilor de securitate a site-ului dvs. web și vă arată orice amenințări potențiale.
Verificați site-ul web
Chrome DevTools are o funcție care vă permite să verificați performanța generală a site-ului dvs. web pe baza unor parametri specifici.
Pentru a accesa această funcție, selectați Far opțiunea din partea de sus a ferestrei DevTools. Apoi, selectați parametrii pe care doriți să îi verificați, apoi bifați fie Mobil sau Desktop opțiuni pentru a vedea cum funcționează pagina dvs. web pe diferite platforme.
Apoi, faceți clic pe Generează raport pentru a rula o analiză a paginii dvs. web pe baza parametrilor selectați mai devreme.
Puteți, de asemenea, să evaluați durata de execuție sau performanța de încărcare a unui site web făcând clic pe Performanţă opțiune. Pentru a rula un test, faceți clic pe pictograma de lângă Faceți clic pe butonul de înregistrare opțiunea de a efectua o analiză în timp de execuție. Alternativ, faceți clic pe butonul de reîncărcare de sub acesta pentru a evalua performanța de încărcare. Click pe Stop pentru a opri analizorul și a afișa rezultatele.
Profitați de Chrome DevTools
În funcție de ce aveți nevoie, Chrome DevTools vă permite să faceți mai mult decât simpla depanare a site-ului web. Din fericire, DevTools sunt ușor de utilizat pentru programatorii de toate nivelurile de calificare. Puteți învăța chiar câteva elemente de bază ale dezvoltării frontend-urilor de site-uri web căutând codul sursă al site-urilor web pe care le vizitați.
cum să vă deconectați de la netflix
S-ar putea să descoperiți și alte opțiuni pe care nu le-am discutat în acest articol. Așadar, nu ezitați să vă jucați cu funcțiile disponibile. În plus, modificarea acestor caracteristici nu dăunează puțin unui site web.
Acțiune Acțiune Tweet E-mail Cum se folosește sistemul de operare Chrome pe un Raspberry PiNu vă puteți permite un Chromebook? Căutați o alternativă la Raspbian? Iată cum să instalați o versiune a sistemului de operare Chrome pe Raspberry Pi.
Citiți în continuare Subiecte asemănătoare- Internet
- Programare
- HTML
- Dezvoltare web
- JavaScript
- Google Chrome
Idowu este pasionat de orice tehnologie inteligentă și productivitate. În timpul liber, se joacă cu codificarea și trece la tabla de șah când se plictisește, dar îi place, de asemenea, să se rupă de rutină din când în când. Pasiunea sa pentru a arăta oamenilor calea în jurul tehnologiei moderne îl motivează să scrie mai multe.
Mai multe de la Idowu OmisolaAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona