Да ли сте се икада запитали који елементи стоје иза лепо направљене веб странице? Научите како да прегледате елементе у Цхроме-у и Фирефок-у.
Свака визуелно запањујућа веб страница има сложене ХТМЛ, ЦСС и ЈаваСцрипт кодове који раде на позадини. Користећи згодну алатку за програмере под називом Инспецт Елемент, можете проверити елементе ХТМЛ веб страница у популарним веб прегледачима.
Осим што вам омогућава да проверите елементе, овај алат вам такође помаже да промените изглед веб странице и направите снимке екрана без текста. Наставите да читате да бисте сазнали како да прегледате елементе у популарним веб прегледачима на Виндовс-у.
Преглед садржаја
Шта је Инспецт Елементс?
Инспецт Елементс је алатка за програмере која се налази у свим популарним веб претраживачима као што су Гоогле Цхроме, Мозилла Фирефок, Мицрософт Едге, Сафари и Браве. Користећи овај алат, можете да видите ХТМЛ, ЦСС и ЈСС изворни код веб странице.
Штавише, можете га користити за уређивање ХТМЛ и ЦСС кода и приказивање промена у вашем претраживачу у реалном времену. Веб програмери, дизајнери и трговци га користе за преглед промена стила, исправљање грешака или учење архитектуре веб локације.
Иако је алатка за програмере, није потребна никаква додатна инсталација софтвера. То можете да урадите из свог веб претраживача пратећи методе које ћемо описати у овом чланку.
Пре него што употребите функцију Инспецт Елементс, запамтите да су све промене које направите да бисте манипулисали веб садржајем привремене. Промене су видљиве само вама, док је стварни приказ веб странице исти за друге кориснике.
Када користите Инспецт Елементс?
Ево неколико уобичајених ситуација када ћете можда морати да користите ову функцију:
Веб Десигнинг
Када треба да разумете структуру веб странице или да тестирате ЦСС стилове, можете користити овај алат. Такође помаже у експериментисању са различитим елементима и модификовању кода како би се одмах проверили визуелни резултати.
Прављење снимака екрана
Ако желите да направите снимак екрана веб странице без неких посебних елемената као што су текст или слике, овај алат ће вам добро доћи. Пронађите ХТМЛ код за елемент који желите да уклоните и избришите тај код. Тај елемент ће одмах бити уклоњен из приказа ваше веб странице и можете да направите снимак екрана.
Отклањање грешака на веб локацији
Још једна уобичајена ситуација када се користи овај алат је да се идентификује проблем или грешка на веб локацији. Омогућава вам да испитате ХТМЛ, ЦСС и ЈСС код. На тај начин можете сазнати који елементи не функционишу исправно или се приказују погрешно.
Учење о веб развоју
Ако учите о веб развоју, Инспецт Елементс је алатка коју морате имати. Пружа вам драгоцене увиде у елементе који стоје иза одређене веб локације да бисте разумели и научили имплементиране функције и целокупну архитектуру веб странице.
Тестирање приступачности
Такође можете да користите алатку Инспецт Елемент на свом веб претраживачу да бисте проценили доступност веб локације. Користећи га, можете осигурати тачну семантичку ознаку и верификовати атрибуте приступачности. Штавише, такође вам омогућава да тестирате веб локацију помоћу читача екрана или других технологија.
Ако желите брзо да издвојите одређени садржај или средства са веб странице, користите овај алат. Омогућава вам да пронађете оригиналне УРЛ адресе различитих медијских елемената, попут слика и видео записа. Поред тога, можете га користити да бисте разумели како се одређени подаци учитавају.
Предности провере елемената на различитим веб прегледачима
Разумевање структуре веб сајта
Овај алат нуди визуелни приказ структуре веб локације кроз ХТМЛ означавање. Тако можете идентификовати угнежђене елементе и сазнати како елементи међусобно делују. Не само да вам помаже да разумете целокупну архитектуру, већ вам омогућава да изградите сличне структуре.
Решавање проблема
Кад год програмери треба да идентификују проблеме у вези са изгледом, респонзивним дизајном, ЈаваСцрипт грешкама и перформансама, они користе алатку Инспецт Елементс. Такође им омогућава да обезбеде компатибилност веб-сајта са више прегледача.
Анализирање ЦСС стилова
Ову алатку можете користити да анализирате ЦСС стил и разумете аспекте као што су избор фонтова, боја и својства изгледа. Ово познавање визуелног изгледа помаже програмерима да реше недоследности у изгледу и обезбеде упорно брендирање.
Тестирање
Провера елемената је такође корисна за приступачност веб локације и процену компатибилности. Омогућава вам да прегледате ХТМЛ атрибуте, АРИА улоге и друге стилове како бисте осигурали да свако може без потешкоћа приступити веб садржају.
Извођење експеримената уживо
Експериментисање у реалном времену и прављење прототипа су додатне предности коришћења алата Инспецт Елементс. Можете директно да измените елементе да бисте проверили промене на веб страници. Они којима је потребно брзо тестирање и фино подешавање дизајна веб странице користе га за ефикасан развој.
Учење
Изнад свега, Инспецт Елементс је савршен алат за учење са постојећих веб локација и инспирацију за сопствени пројекат. Помаже вам да анализирате структуру и изглед веб странице. Користите ово знање за сарадњу и континуирана побољшања.
Ствари које могу да ураде Инспецт Елементс
- Помаже вам да извршите уређивање уживо на ЦСС панелу и да видите промене у реалном времену.
- Омогућава вам да тестирате различите изгледе веб локација без поновног отпремања измењене ХТМЛ датотеке.
- Алат Инспецт Елементс вам такође омогућава да проверите да ли има поквареног кода за одржавање веб локације.
- Овај алат се може користити за подешавање елемената странице без уношења измена у оригиналну ХТМЛ датотеку.
Корак по корак методе за проверу елемената у Гоогле Цхроме-у
Метод 1: Коришћење команде Инспецт из контекстног менија
Ово је најчешћи метод провере елемената веб странице у Цхроме-у.
Метод 2: Коришћење пречице на тастатури
Користећи овај метод, можете отворити ХТМЛ код целе веб странице. Међутим, директно отварање кода одређеног елемента није доступно са њим.
Метод 3: Коришћење функцијског тастера
Овај метод је још један једноставан јер му је потребан само један притисак на тастер. Само отворите веб страницу и притисните тастер Ф12 да бисте отворили ХТМЛ код за њу. Пребаците га да бисте отворили и затворили алатку Инспецт Елементс.
Такође можете да приступите алатки за програмере из Цхроме менија и проверите елементе веб локације.
1. Отворите било коју веб страницу у Гоогле Цхроме-у.
2. Кликните на икону са три тачке у горњем десном углу.
3. Док се Цхроме мени отвара, пређите курсором преко опције Још алата.
4. Полако померите курсор на опцију Девелопер Тоол у подменију.
5. Страница Инспецт Елементс ће се отворити.
Напомена: Ако користите Мицрософт Едге, можете пратити исте методе да бисте проверили елементе веб странице.
Корак по корак методе за проверу елемената на Мозилла Фирефок-у
Метод 1: Коришћење команде Инспецт на Фирефок-у
Корисници Фирефок-а могу да провере код иза било ког елемента ХТМЛ веб странице користећи овај приступ.
Метод 2: Коришћење функцијског тастера
Слично Цхроме-у, Фирефок такође приказује алатку Инспецт Елемент када притиснете тастер Ф12. Да бисте затворили алатку, морате поново да притиснете тај тастер.
Фирефок такође има алатку за програмере помоћу које можете прегледати елемент било које веб странице.
Метод 4: Коришћење пречице на тастатури
Баш као и Цхроме, Фирефок такође има пречицу на тастатури за алатку Инспецт Елементс.
Закључак
Инспецт Елементс је корисна алатка не само за програмере већ и за све који желе да модификују дизајн веб странице или експериментишу са изгледом веб странице. Овде смо истражили предности и случајеве коришћења алата Инспецт Елемент.
Овде се помињу и врхунски методи за проверу елемената у популарним веб претраживачима. Дакле, ако желите да прегледате ХТМЛ елементе веб странице за професионалну или забавну употребу, можете испробати било који од приступа.
Такође можете прочитати како да промените корисничког агента у веб прегледачима.