Когато изграждаме уебсайт или уеб приложение, винаги имаме задача да проверим дали всичко работи правилно на мобилно устройство или дори на таблет. Ако работим в процес на разработка, нямаме как да го проверим, тъй като първо ще трябва да изпратим промените си на сървъра и там да го консултираме на мобилното си устройство.
Но не бива да се притесняваме, тъй като Google Chrome има функционалност, която ни позволява с няколко прости стъпки да проверим как нашият уебсайт или приложение работи на мобилното устройство, което искаме.
1. Емулирайте мобилно устройство в Google Chrome
Както казваме, Google Chrome включва инструмент, ориентиран към програмистите, с който можем да получим достъп до изключени опции с един поглед. Един от тях е емулаторът на мобилни устройства в режим на устройство.
Етап 1
Ще имаме меню в долната част, което ще се покаже, което ни показва HTML кода на страницата. За да покажем панела за програмисти на Chrome, ще отидем в „Меню / Още инструменти / Инструменти за програмисти“ или ще направим следната комбинация от клавиши:
На Windows и Linux
Ctrl + Shift + M
На Mac
⇧ + ⌘ + M
Стъпка 2
Ще видим, че се отваря панел с кодове. Разглеждаме иконата, която съответства на „Режим на устройството“ и която ще се активира, когато се появи в синьо. Щракнете върху него, за да го активирате.
Стъпка 3
Докато там отиваме в горното меню над емулираната страница и избираме устройството, което искаме да емулираме, в този случай избираме Apple iPhone x и опресняваме, така че промените да влязат в сила. Имаме голямо разнообразие от предварително зададени настройки, така че с едно щракване имаме нашия симулиран модел.
Стъпка 4
Ако искаме да създадем персонализирани измервания, ще отидем там, където се появява терминалният модел, и кликнете върху „Редактиране“.
Стъпка 5
Ще се появят онези модели, които преди са били конфигуратор или можем да добавим такъв по персонализиран начин, като кликнете върху „Добавяне на персонализирано устройство“.
Стъпка 6
В опциите в Device Mode ще имаме възможност да активираме или не сензорите, които симулират сензорен екран.
ЗабележкаЩракнете върху иконата с три точки, за да покажете, наред с другото, опцията „Сензори“
2. Имулирайте свързаността с мобилна мрежа в Google Chrome
Състоянието на мрежата и нейното тестване благодарение на Chrome ни позволява да тестваме нашия уебсайт чрез различни видове мрежови връзки като 3G и дори без връзка.
Етап 1
Можем също да подражаваме на мрежата, в която се намираме. За да направите това, отиваме в раздела "Мрежа" и избираме тип мрежа в сгъваемия списък.
Стъпка 2
Ако сме установили ограничение, ще видим предупредително известие, което да ни напомни, че сме го активирали.
3. Добавете ограничения към свързаността с мобилна мрежа в Google Chrome
Етап 1
Това ограничение е важно и можем да зададем персонализирани ограничения с условия, конфигурирани от нас самите. За да направите това, натискаме следния клавиш, за да отворим панела с настройки.
F1
Стъпка 2
Кликнете върху опцията „Throttling“. Избираме възможността за „Добавяне на персонализиран профил“.
Стъпка 3
Тук ще зададем ограниченията по персонализиран начин.
4. Отворете панела за мрежови условия в Google Chrome
Имаме повече опции в панела за програмисти в DevTools.
Етап 1
За да направите това, отиваме в менюто с три точки от дясната страна и кликваме върху „Още инструменти“ / „Условия на мрежата“.
Стъпка 2
От тук можем да активираме или деактивираме кеша и да променим агента по подразбиране на персонализиран.
С тази функционалност вече няма да се налага да търсим мобилния си телефон, за да проверим дали нашият уебсайт или приложение работи правилно, остава само на всеки да проучи този инструмент още малко и да го използва, за да съкрати времето за тестване и внедряване.
