Како прегледати своју веб локацију на различитим уређајима користећи Гоогле Цхроме

Када креирате веб локацију, желите да она буде прилагодљива и да се прилагођава различитим величинама екрана. Један од начина да ово тестирате је коришћење Гоогле Цхроме-ових уграђених алатки за програмере.

Цхроме-ови ДевТоолс вам омогућавају да отклоните грешке у различитим аспектима ваше веб локације. Ово укључује промену и преглед ХТМЛ изворног кода и ЦСС-а. Такође вам омогућава да отклоните грешке у ЈаваСцрипт коду на страни клијента и видите мрежни саобраћај.

ДевТоолс такође има опцију за преглед ваше веб локације на различитим уређајима. Ово укључује различите врсте мобилних уређаја, иПад-а, таблета и још много тога.

Да бисте отворили траку са алаткама уређаја у Гоогле Цхроме-у, потребно је да отворите Прозор Цхроме Девелопер Тоолс:

1. Отворите веб локацију.
2. Кликните десним тастером миша на страницу и кликните на Инспецт.
3. Отвориће се прозор Цхроме ДевТоолс. Може се отворити са стране или на дну вашег претраживача или као нови прозор.
4. У горњем левом углу прозора налазе се две иконе. Кликните на икону која приказује више уређаја различитих величина.
instagram viewer
5. Екран ће се променити да би вам показао како би веб локација изгледала на мобилном уређају.

Како се пребацивати између различитих уређаја

Користите падајући мени на врху траке са алаткама уређаја за пребацивање између различитих уређаја.

1. На самом врху траке са алаткама ће се приказати на ком типу уређаја тренутно гледате своју веб локацију. Кликните на падајући мени да бисте изабрали други уређај са листе.
2. Уместо да изаберете постојећи уређај, можете изабрати да прегледате веб локацију у респонзивном режиму. Кликните на падајући мени и изаберите Респонсиве опција.
3. Поред падајућег менија, такође можете изабрати да унесете прилагођену ширину и висину уређаја.
4. Уместо да куцате ширину и висину, такође можете кликнути и превући углове прозора да бисте подесили величину.

Како додати прилагођени уређај

Ако желите да сачувате прилагођену ширину и висину, можете додати прилагођени уређај. Трака са алаткама уређаја ће затим приказати ваш нови уређај у падајућем менију за уређаје.

1. Кликните на падајући мени који наводи све уређаје.
2. Кликните на Уредити.
3. Испод бочне траке Подешавања проверите да ли имате Уређаји изабрана картица. Овде такође можете видети листу више уређаја које можете изабрати.
4. Кликните на Додајте прилагођени уређај.
5. Унесите назив, ширину и висину уређаја. Обавезно изаберите и тип уређаја, на пример да ли је то мобилни или десктоп уређај. Ако проширите Наговештаји клијента корисничког агента опцију, можете додати друге детаље као што су модел уређаја, бренд или верзија.
6. Кликните на Додати.
7. Вратите се на падајући мени који наводи све уређаје. Видећете свој нови прилагођени уређај на листи.
8. Ове детаље можете поново да измените касније тако што ћете се вратити на страницу прилагођеног уређаја. Кликните на Уредити дугме поред назива уређаја да бисте започели уређивање.

Веома је корисно моћи да прегледате своју веб локацију на различитим уређајима и величинама екрана, из неколико разлога.

Прво, можете тестирати перформансе своје веб локације на различитим уређајима. Неки мобилни телефони могу имати веће брзине мреже или ЦПУ пригушивање од других.

Трака са алаткама уређаја вам омогућава да прелазите између различитих опција брзине мреже. Ово вам омогућава да тестирате брзину било ког позива ка серверу или да тестирате учитавање и приказивање података на вашој веб локацији.

Поред тога, такође можете видети како дизајн изгледа на одређеном уређају, са тачке гледишта корисничког интерфејса. Ако користите ЦСС медијски упити, можете користити овај алат да проверите да ли раде онако како очекујете.

Можете да користите Гоогле Цхроме-ов прозор ДевТоолс да бисте тестирали како се ваша веб локација прилагођава различитим величинама екрана и да бисте били сигурни да ваша веб локација реагује. Такође можете да га користите за тестирање перформанси ваше веб локације и да ли ваши медијски упити функционишу како се очекује.

Такође можете да користите Гоогле Цхроме-ове ДевТоолс у друге сврхе. Можете га користити за отклањање грешака у свим ЦСС проблемима тако што ћете променити ЦСС на картици Стилови у прозору Елемент. Ово вам омогућава да одмах видите све промене у ЦСС-у, што може убрзати ваш ток кодирања.

Како користити Гоогле Цхроме за отклањање грешака у ЦСС-у

Реад Нект