Līdzināties mobilajām ierīcēm pārlūkā Google Chrome

Veidojot vietni vai tīmekļa lietojumprogrammu, mūsu uzdevums vienmēr ir pārbaudīt, vai viss darbojas pareizi mobilajā ierīcē vai pat planšetdatorā. Ja mēs strādājam izstrādes procesā, mums nav iespējas to pārbaudīt, jo mums vispirms ir jānosūta izmaiņas serverim un jāpārbauda tas mūsu mobilajā ierīcē.

Bet mums nevajadzētu uztraukties, jo pārlūkam Google Chrome ir funkcionalitāte, kas ļauj mums veikt dažas vienkāršas darbības, lai pārbaudītu, kā mūsu vietne vai lietojumprogramma darbojas vēlamajā mobilajā ierīcē.

1. Līdzināties mobilajai ierīcei pārlūkā Google Chrome


Kā mēs sakām, pārlūkā Google Chrome ir iekļauts uz izstrādātājiem orientēts rīks, ar kuru mēs īsumā varam piekļūt izslēgtajām opcijām. Viens no tiem ir mobilās ierīces emulators ierīces režīmā.

1. darbība
Apakšā būs izvēlne, kas parādīs lapas HTML kodu. Lai parādītu Chrome izstrādātāju paneli, mēs nokļūsim izvēlnē / Vairāk rīku / Izstrādātāja rīki vai arī veiksim šādu taustiņu kombināciju:

Operētājsistēmā Windows un Linux

Ctrl + Shift + M

Operētājsistēmā Mac

⇧ + ⌘ + M

2. solis
Mēs redzēsim, ka tiek atvērts kodu panelis. Mēs skatāmies uz ikonu, kas atbilst "ierīces režīmam" un kas tiks aktivizēta, kad tā parādīsies zilā krāsā. Noklikšķiniet uz tā, lai to aktivizētu.

3. solis
Kamēr mēs ejam uz augšējo izvēlni virs emulētās lapas un atlasām ierīci, kuru vēlamies atdarināt, šajā gadījumā mēs izvēlamies Apple iPhone x un atsvaidzinām, lai izmaiņas stātos spēkā. Mums ir daudz dažādu iepriekš iestatītu iestatījumu, lai ar vienu klikšķi iegūtu mūsu simulēto modeli.

4. solis
Ja mēs vēlamies izveidot pielāgotus mērījumus, mēs nokļūsim vietā, kur parādās termināļa modelis, un noklikšķiniet uz "Rediģēt".

5. solis
Tiks parādīti tie modeļi, kuriem iepriekš bija konfigurētājs, vai arī mēs varam tos personalizēt, noklikšķinot uz "Pievienot pielāgotu ierīci".

6. darbība
Ierīces režīma opcijās mums būs iespēja aktivizēt vai neaktivizēt sensorus, kas simulē skārienekrānu.

PiezīmeNoklikšķiniet uz trīs punktu ikonas, lai cita starpā parādītu opciju "Sensori"

2. Atdariniet mobilā tīkla savienojumu pārlūkā Google Chrome


Tīkla stāvoklis un tā pārbaude, pateicoties pārlūkam Chrome, ļauj mums pārbaudīt mūsu vietni, izmantojot dažāda veida tīkla savienojumus, piemēram, 3G un pat bez savienojuma.

1. darbība
Mēs varam arī līdzināties tīklam, kurā esam. Lai to izdarītu, mēs ejam uz cilni "Tīkls" un saliekamajā sarakstā atlasām tīkla veidu.

2. solis
Ja mēs esam noteikuši ierobežojumu, mēs redzēsim brīdinājuma paziņojumu, kas mums atgādinās, ka tas ir iespējots.

3. Pievienojiet ierobežojumus mobilā tīkla savienojumam pārlūkā Google Chrome

1. darbība
Šis ierobežojums ir svarīgs, un mēs varam iestatīt pielāgotus ierobežojumus ar nosacījumiem, kurus esam konfigurējuši paši. Lai to izdarītu, nospiediet šo taustiņu, lai atvērtu paneli Iestatījumi.

F1

2. solis
Noklikšķiniet uz opcijas "Droseļvārsts". Mēs izvēlamies iespēju "Pievienot pielāgotu profilu".

3. solis
Šeit mēs iestatīsim ierobežojumu iestatījumus pielāgotā veidā.

4. Atveriet tīkla nosacījumu paneli pārlūkā Google Chrome


Mums ir vairāk iespēju izstrādātāja panelī DevTools.

1. darbība
Lai to izdarītu, mēs dodamies uz trīs punktu izvēlni labajā pusē un noklikšķiniet uz “Vairāk rīku” / “Tīkla nosacījumi”.

2. solis
No šejienes mēs varam iespējot vai atspējot kešatmiņu un mainīt noklusējuma aģentu uz pielāgotu.

Izmantojot šo funkcionalitāti, mums vairs nebūs jāmeklē mūsu mobilā ierīce, lai pārbaudītu, vai mūsu vietne vai lietojumprogramma darbojas pareizi, atliek tikai ikvienam nedaudz vairāk izpētīt šo rīku un izmantot to, lai saīsinātu testēšanas un ieviešanas laiku.

Jums palīdzēs attīstību vietā, daloties lapu ar draugiem

wave wave wave wave wave