Как да визуализирате уебсайта си на различни устройства с помощта на Google Chrome

Когато създавате уебсайт, искате той да е отзивчив и да се адаптира към различни размери на екрана. Един от начините да тествате това е като използвате вградените инструменти за разработчици на Google Chrome.

DevTools на Chrome ви позволява да отстранявате грешки в различни аспекти на вашия уебсайт. Това включва промяна и визуализация на изходния HTML код и CSS. Той също така ви позволява да отстранявате грешки в JavaScript кода от страна на клиента и да преглеждате мрежовия трафик.

DevTools също има опция за визуализация на вашия уебсайт на различни устройства. Това включва различни видове мобилни устройства, iPad, таблети и др.

За да отворите лентата с инструменти на устройството в Google Chrome, трябва да отворите Прозорец на Chrome Developer Tools:

1. Отворете уебсайт.
2. Щракнете с десния бутон върху страницата и щракнете върху Инспектирайте.
3. Ще се отвори прозорецът Chrome DevTools. Може да се отвори отстрани или отдолу на браузъра ви, или като нов прозорец.
4. В горния ляв ъгъл на прозореца има две икони. Щракнете върху иконата, която показва множество устройства с различни размери.
instagram viewer
5. Екранът ще се промени, за да ви покаже как би изглеждал уебсайтът на мобилно устройство.

Как да превключвате между различни устройства

Използвайте падащото меню в горната част на лентата с инструменти на устройството, за да превключвате между различни устройства.

1. Най-горната част на лентата с инструменти ще покаже какъв тип устройство в момента преглеждате уебсайта си. Щракнете върху падащото меню, за да изберете друго устройство от списъка.
2. Вместо да избирате съществуващо устройство, можете да изберете да прегледате уебсайта в отзивчив режим. Щракнете върху падащото меню и изберете Отзивчив опция.
3. До падащото меню можете също да изберете да въведете персонализирана ширина и височина на устройство.
4. Вместо да въвеждате ширина и височина, можете също да щракнете и плъзнете ъглите на прозореца, за да коригирате размера.

Как да добавите персонализирано устройство

Ако искате да запазите персонализирана ширина и височина, можете да добавите персонализирано устройство. След това лентата с инструменти на устройството ще покаже вашето ново устройство в падащото меню за устройства.

1. Щракнете върху падащото меню, което изброява всички устройства.
2. Кликнете върху редактиране.
3. Под страничната лента с настройки се уверете, че имате Устройства избран раздел. Тук можете също да видите списък с още устройства, от които можете да избирате.
4. Кликнете върху Добавете персонализирано устройство.
5. Въведете име, ширина и височина за устройството. Уверете се, че сте избрали и типа устройство, като например дали е мобилно или настолно устройство. Ако разширите Намеци за клиента на потребителския агент опция, можете да добавите други подробности, като модел на устройството, марка или версия.
6. Кликнете върху Добавете.
7. Върнете се към падащото меню, което изброява всички устройства. Ще видите новото си персонализирано устройство в списъка.
8. Можете да редактирате тези подробности отново по-късно, като се върнете към страницата на персонализираното устройство. Кликнете върху редактиране бутон до името на вашето устройство, за да започнете да редактирате.

Много е полезно да можете да визуализирате уебсайта си на различни устройства и размери на екрана по няколко причини.

Първо, можете да тествате производителността на вашия уебсайт на различни устройства. Някои мобилни телефони може да имат по-бързи мрежови скорости или дроселиране на процесора от други.

Лентата с инструменти на устройството ви позволява да превключвате между различни опции за скорост на мрежата. Това ви позволява да тествате скоростта на всякакви повиквания към сървър или да тествате зареждането и изобразяването на данни на вашия уебсайт.

Освен това можете също да видите как изглежда дизайнът на конкретно устройство от гледна точка на потребителския интерфейс. Ако използвате CSS медийни заявки, можете да използвате този инструмент, за да проверите дали работят, както очаквате.

Можете да използвате прозореца DevTools на Google Chrome, за да тествате как уебсайтът ви се адаптира към различни размери на екрана и да се уверите, че уебсайтът ви реагира. Можете също да го използвате, за да тествате производителността на вашия уебсайт и дали вашите медийни заявки работят според очакванията.

Можете също да използвате DevTools на Google Chrome за други цели. Можете да го използвате за отстраняване на грешки в CSS проблеми, като промените CSS в раздела Стилове на прозореца на елемента. Това ви позволява да видите всички промени в CSS веднага, което може да ускори работния ви процес на кодиране.

Как да използвате Google Chrome за отстраняване на грешки в CSS

Прочетете Следващото