Начало > Помощен център > Апликации > WordPress > Адаптивни инструменти (responsive dev tools) в Firefox, Chrome и Edge

Адаптивни инструменти (responsive dev tools) в Firefox, Chrome и Edge

Помощен център

Адаптивни инструменти (responsive dev tools) в Firefox, Chrome и Edge

Съдържание

Като продължение на статията за адаптивни режими и настройки в Elementor Page Builder ще разгледаме какви инструменти ни предлагат най-използваните браузъри за преглед на уеб страници при различна резолюция на екрана в компютри, лаптопи и мобилни устройства.

Адаптивен (responsive) дизайн е практиката на проектиране на уебсайт, така че той да изглежда и работи правилно на различни устройства - мобилни устройства (телефони и таблети), настолни компютри и лаптопи.

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

Важно: В статията по никакъв начин не се опитваме да даваме оценка на Web Development инструментите в различните браузъри.

Firefox

Отваряме панела Web Developer [1] в Firefox по някой от описаните начини:

  1. Натискаме клавиш F12;
  2. Кликаме с десен бутон в браузъра и в менюто избираме линка Inspect Element:

Линк Inspect Element в меню

  1. В главното меню на Firefox кликаме последователно линковете Web Developer:

Линк Web Developer в меню

и в следващия панел - Inspector:

Линк Inspector в меню

Общ изглед на Web Developer в Firefox браузър:

Изглед на Web Developer в Firefox

Може да позиционираме панела Web Developer на различни места в браузъра като кликнем иконата с три хоризонтални точки и в менюто изберем съответния линк:

Позициониране (docking) на Web Developer

За да достъпим панела Responsive Design Mode (RDM), който конкретно ни интересува, кликаме иконата, показана на изображението:

Достъп до Responsive Design Mode

В десния ъгъл на панела RDM имаме достъп до два инструмента - създаване на screenshot в конкретната резолюция (viewport):

Икона за създаване на screenshot

и разширени настройки за активиране на допълнителни функционалности:

Меню за достъп до разширени функционалности

Основното меню на RDM се намира в средата на екрана:

Изглед на основното меню Responsive Design Mode (RDM)

При кликане на линка Responsive може да избираме стандартна резолюция за някое от посочените в менюто мобилни устройства:

Линк Responsive за избор на стандартна резолюция и устройство

RDM ни дава възможност да персонализираме списъка с устройства като кликнем линка Edit List... :

Линк Edit List за създаване на ново устройство

както и да създадем настройки за ново устройство като кликнем линка Add Custom Device... . Въвеждаме име на устройството, RDM попълва автоматично полето User Agent String, въвеждаме желаната резолюция в полетата Size и запазваме настройките като кликаме бутона Save:

Панел за създаване на персонализирано устройство

При кликане на линка Responsive и избиране на новото устройство (DMG Device), браузъра автоматично се настройва към зададената резолюция на устройството:

Преглед на сайта в новото устройство

Може да разглеждаме сайта в хоризонтален режим (landscape) като кликем иконата със символ мобилно устройство. За да се върнем във вертикален режим (portrait) кликаме същата икона:

Превключване на режими landscape и portrait

Може да променяме резолюцията динамично като хванем с десния бутон на мишката десния край на страницата и го плъзгаме в двете посоки. Автоматично стойностите в панела показват ширината на текущата резолюция и надписа с името на конкретно мобилно устройство се променя в Responsive:

Ръчна промяна на резолюцията

За да се върнем към стандартна резолюция трябва да изберем име на устройството в менюто:

Връщане към стандартна резолюция

Меню Network throttling

Ако при тестовете използваме бърза мрежа много е възможно при работа в реални условия да има проблеми в работата на сайта. В режим на адаптивен дизайн може да настроим браузъра да емулира приблизителни характеристики на различни видове мрежи:

Емулиране характеристики на мрежи Network throttling

Таблицата на следващото изображение [1] показва приблизителни стойности за време на изтегляне, време на качване и минимално забавяне на различни мрежи:

Таблица с параметри на мрежи

С последния бутон в менюто може да активирамe/деактивираме симулация на управление с докосване на екрана (touch):

Превключване на симулация с докосване на екрана (touch)

Google Chrome

Отваряме Developer Tools [2] в Google Chrome по един от описаните по-долу начини:

  1. Натискаме клавиш F12;
  2. Кликаме с десен бутон на мишката в браузъра и в менюто избираме линка Inspect:

Линк Inspect в меню

  1. Кликаме иконата с три вертикални точки в горния десен ъгъл и в менюто последователно избираме линковете More Tools > Developer tools:

Линкове More Tools и Developer tools

В панела DevTools кликаме иконата с три вертикални точки за да позиционираме панела където желаем:

Позициониране на панела DevTools

Основното меню с адаптивни (responsive) настройки е в средата на екрана. Кликане върху линка Responsive отваря меню, в което може да изберем конкретно мобилно устройство:

Линк Responsive за избор на устройство

Имаме възможност да създадем настройки за персонално устройство, което отсъства от списъка, като кликнем бутона Add custom device... :

Бутон Add custom device

Даваме име на новото устройство, въвеждаме стойности за резолюцията и запазваме настройките като кликаме бутона Add:

Създаване на ново устройство

Сега в менюто Responsive избираме нашето ново мобилно устройство DMG Device и сайта се зарежда в зададената от нас резолюция:

Зареждане на сайта в новото устройство

Кликане върху бутона Rotate променя режимите за преглед между вертикален (portrait) и хоризонтален (landscape):

Превключване (Rotate) на режимите portrait и landscape

Може да променяме резолюцията в режим Responsive като захващаме сайта за страничните ленти от двете страни на страницата и променяме ширината в двете посоки.

Може да ползваме и интерактивната лента Device Frame като кликаме в маркираните области:

Резолюция mobile в Device Frame

Резолюция таблет в Device Frame

Кликането върху линка 100% отваря меню, в което може да редуцираме ширината на екрана:

Линк за промяна ширината на екрана

По този начин може да прегледаме сайта в резолюция много по-голяма от реалната резолюция на монитора:

Преглед на сайт при висока резолюция

Кликане върху линка Online ни дава опции за симулиране на работа в няколко примерни типа мрежи:

Линк Online за симулиране на типове мрежи

Media Query настройки

Media query [3] е начин на кодиране, въведен в CSS3. При него се използва правилото @media, в което се включва блок от CSS настройки/стойности (property/value), приложими само за посочената резолюция:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

В примерния код фона на сайта ще се промени в lightblue само ако ширината на страницата е равна или по-малка от 600px.

В панела DevTools кликаме иконата с три вертикални точки и в менюто избираме линка Show media queries:

Линк Show media queries в меню

В панела DevTools се появява допълнителен панел с три хоризонтални ленти, във всяка от които резолюцията съответства на различен начин на кодиране на media queries в CSS:

  • посочване на максимална резолюция (max-width):

Лента за максимална резолюция (max-width)

  • посочване на максимална (max-width) и минимална (min-width) резолюция:

Лента за максимална и минимална резолюция (max-width и min-width

  • посочване на минимална резолюция (min-width):

Лента за минимална резолюция (min-width)

Edge

Панелът Developer Tools [4] в Edge се достъпва по някой от описаните начини:

  1. Натискаме клавиш F12;
  2. Кликаме иконата с три хоризонтални точки в горния десен ъгъл на екрана, в менюто кликаме линка More Tools и в под-менюто кликаме линка Developer Tools:

Линкове More Tools и Developer Tools

  1. Кликаме с десния бутон на мишката в произволна област на браузъра и в менюто кликаме линка Inspect element:

Линк Inspect element в меню

Общ изглед на Developer Tools в Edge виждаме на следващото изображение:

Общ изглед на Developer Tools в Edge

За да си осигурим повече пространство кликаме в навигационната лента маркираната икона, която зарежда Developer Tools в отделен прозорец на браузъра:

Икона за зареждане на Developer Tools в отделен прозорец

Общ изглед на настройките в раздела Emulation:

Общ изглед на раздела Emulation

Бутонът Persist Emulation (маркиран в зелено) записва всички промени, направени от настройките по подразбиране за десктоп емулация, дори когато затворим и отворим отново DevTools.

Бутонът за нулиране Reset Emulation (маркиран в синьо) възстановява настройките за емулация обратно към стандартния профил Desktop и браузър (User agent string) Microsoft Edge с изключен GPS.

Когато някоя от тези опции бъде променена по подразбиране, в раздела Emulation се появява информационен символ (i), който ни предупреждава за промяната.

В менюто Device може да изберем конкретно мобилно устройство или да посочим резолюция по избор през линка Custom:

Избор на мобилно устройство в меню Device

В менюто Display > Orientation превключваме между хоризонтален (Landscape) или вертикален (Portrait) режим за преглеждане на сайта:

Превключване между режими Landscape и Portrait

В менюто Display > Resolution избираме между няколко стандартни резолюции, а през опцията Custom имаме възможност да посочим желана от нас резолюция:

Избор между стандартна и custom резолюция

Изглед в хоризонтален режим (Landscape) и резолюция 800 Х 480:

Избор на Landscape режим

Изглед на сайт в Landscape режим

Изглед във вертикален режим (Portrait) при същата резолюция:

Избор на Portrait режим

Изглед на сайт в Portrait режим

При избор на опция Custom се появява допълнителна секция Enter a custom resolution, където въвеждаме стойности за ширина (Width) и височина (Height):

Секция Enter a custom resolution

В меню Mode > Browser profile посочваме типа на устройството:

Поле Browser profile за избор на устройство

В Mode > User agent string посочваме типа на браузъра:

Поле User agent string за посочване на браузър

Ако сайта използва API за геолокация за предоставяне на услуги, базирани на местоположение, може лесно да тестваме различни GPS координати:

Секция Geolocation (геолокация)

Както при всяко използване на лични данни в мрежата, потребителите на сайта първо трябва да предоставят разрешение да се използва тяхното местоположение. Можем да тестваме как работи сайта с и без разрешения за местоположение от панела за настройки на Microsoft Edge:

Settings > View advanced settings > Website permissions > Manage


Подробна информация за:

  1. Firefox Web Developement Tools - https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode;
  2. Chrome DevTools - https://developers.google.com/web/tools/chrome-devtools/;
  3. CSS media queries - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp;
  4. Edge Developer Tools - https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide;