Kā priekšskatīt savu vietni dažādās ierīcēs, izmantojot Google Chrome

Veidojot vietni, vēlaties, lai tā būtu atsaucīga un pielāgotos dažādiem ekrāna izmēriem. Viens no veidiem, kā to pārbaudīt, ir izmantot Google Chrome iebūvētos izstrādātāja rīkus.

Chrome DevTools ļauj atkļūdot dažādus vietnes aspektus. Tas ietver HTML avota koda un CSS mainīšanu un priekšskatīšanu. Tas arī ļauj atkļūdot klienta puses JavaScript kodu un skatīt tīkla trafiku.

DevTools ir arī iespēja priekšskatīt jūsu vietni dažādās ierīcēs. Tas ietver dažāda veida mobilās ierīces, iPad, planšetdatorus un citus.

Lai pārlūkprogrammā Google Chrome atvērtu ierīces rīkjoslu, jums ir jāatver Chrome izstrādātāja rīku logs:

1. Atveriet vietni.
2. Ar peles labo pogu noklikšķiniet uz lapas un noklikšķiniet uz Pārbaudīt.
3. Tiks atvērts Chrome DevTools logs. Tas var tikt atvērts pārlūkprogrammas sānos vai apakšā vai kā jauns logs.
4. Loga augšējā kreisajā stūrī ir divas ikonas. Noklikšķiniet uz ikonas, kas parāda vairākas dažāda izmēra ierīces.
5. Ekrāns mainīsies, lai parādītu, kā vietne izskatītos mobilajā ierīcē.

Kā pārslēgties starp dažādām ierīcēm

Izmantojiet ierīces rīkjoslas augšpusē esošo nolaižamo izvēlni, lai pārslēgtos starp dažādām ierīcēm.

1. Rīkjoslas pašā augšdaļā tiks parādīts, kāda veida ierīcē pašlaik skatāt savu vietni. Noklikšķiniet uz nolaižamās izvēlnes, lai sarakstā izvēlētos citu ierīci.
2. Tā vietā, lai izvēlētos esošu ierīci, varat izvēlēties skatīt vietni responsīvajā režīmā. Noklikšķiniet uz nolaižamās izvēlnes un atlasiet Atsaucīgi opciju.
3. Blakus nolaižamajai izvēlnei varat arī izvēlēties ievadīt pielāgotu ierīces platumu un augstumu.
4. Tā vietā, lai rakstītu platumu un augstumu, varat arī noklikšķināt un vilkt loga stūrus, lai pielāgotu izmēru.

Kā pievienot pielāgotu ierīci

Ja vēlaties saglabāt pielāgotu platumu un augstumu, varat pievienot pielāgotu ierīci. Pēc tam ierīces rīkjosla ierīču nolaižamajā izvēlnē parādīs jūsu jauno ierīci.

1. Noklikšķiniet uz nolaižamās izvēlnes, kurā ir visas ierīces.
2. Klikšķiniet uz Rediģēt.
3. Iestatījumu sānjoslā pārbaudiet, vai jums ir Ierīces atlasīta cilne. Šeit varat arī skatīt sarakstu ar citām ierīcēm, kuras varat izvēlēties.
4. Klikšķiniet uz Pievienojiet pielāgotu ierīci.
5. Ievadiet ierīces nosaukumu, platumu un augstumu. Noteikti atlasiet arī ierīces veidu, piemēram, vai tā ir mobilā vai galddatora ierīce. Ja izvērsiet Lietotāja aģenta klienta padomi opciju, varat pievienot citu informāciju, piemēram, ierīces modeli, zīmolu vai versiju.
6. Klikšķiniet uz Pievienot.
7. Atgriezieties nolaižamajā izvēlnē, kurā ir uzskaitītas visas ierīces. Sarakstā redzēsit savu jauno pielāgoto ierīci.
8. Varat vēlāk vēlreiz rediģēt šo informāciju, atgriežoties pielāgotās ierīces lapā. Noklikšķiniet uz rediģēt pogu, kas atrodas blakus ierīces nosaukumam, lai sāktu rediģēšanu.

Tas ir ļoti noderīgi, ja varat priekšskatīt savu vietni dažādās ierīcēs un dažādu izmēru ekrānos vairāku iemeslu dēļ.

Pirmkārt, varat pārbaudīt savas vietnes veiktspēju dažādās ierīcēs. Dažiem mobilajiem tālruņiem var būt lielāks tīkla ātrums vai CPU bremzēšana nekā citiem.

Ierīces rīkjosla ļauj pārslēgties starp dažādām tīkla ātruma opcijām. Tas ļauj pārbaudīt jebkuru servera zvanu ātrumu vai pārbaudīt datu ielādi un renderēšanu jūsu vietnē.

Turklāt jūs varat arī apskatīt, kā dizains izskatās konkrētā ierīcē no lietotāja interfeisa viedokļa. Ja jūs lietojat CSS multivides vaicājumi, varat izmantot šo rīku, lai pārbaudītu, vai tie darbojas, kā paredzēts.

Varat izmantot Google Chrome DevTools logu, lai pārbaudītu, kā jūsu vietne pielāgojas dažādiem ekrāna izmēriem, un lai nodrošinātu, ka vietne ir adaptīva. Varat arī to izmantot, lai pārbaudītu savas vietnes veiktspēju un to, vai multivides vaicājumi darbojas, kā paredzēts.

Varat arī izmantot Google Chrome DevTools citiem mērķiem. Varat to izmantot, lai atkļūdotu visas CSS problēmas, mainot CSS loga Elements cilnē Stili. Tas ļauj nekavējoties skatīt visas CSS izmaiņas, kas var paātrināt kodēšanas darbplūsmu.

Kā izmantot Google Chrome, lai atkļūdotu CSS

Lasiet Tālāk