Cum să previzualizați site-ul dvs. pe diferite dispozitive utilizând Google Chrome

Când creați un site web, doriți să fie receptiv și să se adapteze la diferite dimensiuni de ecran. O modalitate de a testa acest lucru este utilizarea instrumentelor de dezvoltare încorporate din Google Chrome.

Chrome DevTools vă permite să depanați diferite aspecte ale site-ului dvs. Aceasta include modificarea și previzualizarea codului sursă HTML și CSS. De asemenea, vă permite să depanați codul JavaScript de la partea clientului și să vizualizați traficul de rețea.

DevTools are, de asemenea, o opțiune de previzualizare a site-ului dvs. pe diferite dispozitive. Aceasta include diferite tipuri de dispozitive mobile, iPad-uri, tablete și multe altele.

Pentru a deschide bara de instrumente Dispozitiv pe Google Chrome, trebuie să deschideți Fereastra Instrumente pentru dezvoltatori Chrome:

1. Deschide un site web.
2. Faceți clic dreapta pe pagină și faceți clic pe Inspecta.
3. Se va deschide fereastra Chrome DevTools. Se poate deschide în partea de jos sau în partea de jos a browserului dvs. sau ca o fereastră nouă.
instagram viewer
4. În partea stângă sus a ferestrei, există două pictograme. Faceți clic pe pictograma care arată mai multe dispozitive de diferite dimensiuni.
5. Ecranul se va schimba pentru a vă arăta cum ar arăta site-ul web pe un dispozitiv mobil.

Cum să comutați între diferite dispozitive

Utilizați meniul drop-down din partea de sus a barei de instrumente a dispozitivului pentru a comuta între diferite dispozitive.

1. În partea de sus a barei de instrumente se va afișa tipul de dispozitiv pe care vă vedeți în prezent site-ul web. Faceți clic pe meniul drop-down pentru a alege alt dispozitiv din listă.
2. În loc să alegeți un dispozitiv existent, puteți alege să vizualizați site-ul web în modul responsive. Faceți clic pe meniul derulant și selectați Receptiv opțiune.
3. Lângă meniul derulant, puteți alege și să introduceți o lățime și o înălțime personalizate pentru un dispozitiv.
4. În loc să tastați o lățime și o înălțime, puteți, de asemenea, să faceți clic și să trageți colțurile ferestrei pentru a ajusta dimensiunea.

Cum să adăugați un dispozitiv personalizat

Dacă doriți să salvați o lățime și o înălțime personalizate, puteți adăuga un dispozitiv personalizat. Bara de instrumente a dispozitivului va afișa apoi noul dispozitiv în meniul drop-down pentru dispozitive.

1. Faceți clic pe meniul drop-down care listează toate dispozitivele.
2. Click pe Editați | ×.
3. Sub bara laterală Setări, asigurați-vă că aveți Dispozitive fila selectată. Aici, puteți vizualiza, de asemenea, o listă cu mai multe dispozitive din care puteți alege.
4. Click pe Adăugați un dispozitiv personalizat.
5. Introduceți un nume, lățime și înălțime pentru dispozitiv. Asigurați-vă că selectați și tipul de dispozitiv, cum ar fi dacă este un dispozitiv mobil sau desktop. Dacă extindeți Sugestii pentru client agent de utilizator opțiunea, puteți adăuga alte detalii, cum ar fi modelul dispozitivului, marca sau versiunea.
6. Click pe Adăuga.
7. Reveniți la meniul drop-down care listează toate dispozitivele. Veți vedea noul dispozitiv personalizat pe listă.
8. Puteți modifica aceste detalii din nou mai târziu, revenind la pagina dispozitivului personalizat. Faceți clic pe Editați | × butonul de lângă numele dispozitivului pentru a începe editarea.

Este foarte util să poți previzualiza site-ul tău pe diferite dispozitive și dimensiuni de ecran, din mai multe motive.

În primul rând, puteți testa performanța site-ului dvs. pe diferite dispozitive. Unele telefoane mobile pot avea viteze de rețea mai mari sau accelerarea procesorului decât altele.

Bara de instrumente a dispozitivului vă permite să comutați între diferite opțiuni de viteză a rețelei. Acest lucru vă permite să testați viteza oricăror apeluri către un server sau să testați încărcarea și redarea datelor pe site-ul dvs.

În plus, puteți vedea și cum arată designul pe un anumit dispozitiv, din punct de vedere al interfeței de utilizare. Dacă utilizați Interogări media CSS, puteți folosi acest instrument pentru a verifica dacă funcționează așa cum vă așteptați.

Puteți utiliza fereastra DevTools din Google Chrome pentru a testa modul în care site-ul dvs. se adaptează la diferite dimensiuni de ecran și pentru a vă asigura că site-ul dvs. este receptiv. De asemenea, îl puteți folosi pentru a testa performanța site-ului dvs. și dacă interogările dvs. media funcționează conform așteptărilor.

De asemenea, puteți utiliza DevTools de la Google Chrome în alte scopuri. Îl puteți folosi pentru a depana orice probleme CSS schimbând CSS-ul din fila Stiluri din fereastra Element. Acest lucru vă permite să vizualizați imediat orice modificări CSS, ceea ce vă poate accelera fluxul de lucru de codare.

Cum să utilizați Google Chrome pentru a depana CSS

Citiți în continuare