- Приступ и конфигурација алата за програмере помоћу пречица и контекстних менија.
- Детаљна анализа DOM и CSS стилова ради побољшања приступачности и респонзивног дизајна.
- Ревизија учинка и праћење оптерећења ресурса путем панела Мрежа и Светионик.
- Технике за отклањање грешака и оптимизацију WPO-а за побољшање SEO позиционирања.
Ако радите у веб индустрији, било да дизајнирате, програмирате или покушавате да осигурате да ваш сајт није невидљив на Гуглу, вероватно сте у неком тренутку наишли на дугме „ прегледај елемент“ . То је једноставно улаз у Chrome DevTools, арсенал алата који вам омогућава да зароните у унутрашње функционисање било које веб странице како бисте разумели како функционише, исправили грешке у ходу или једноставно истражили шта се крије иза визуелне фасаде.
Најбоље од свега је што не морате да инсталирате ништа необично; прегледач већ има то уграђено. Од анализе зашто се слика предуго учитава до модификовања CSS-а у реалном времену како би се видело како би црвено дугме изгледало без додиривања кода на страни сервера, Chrome DevTools су непроцењив алат за свакога ко жели да оптимизује корисничко искуство и техничке перформансе свог пројекта.
Како ући у срце DevTools-а
Постоји неколико начина да отворите ову контролну таблу, у зависности од тога шта вам је најзгодније. Најинтуитивнији је да кликнете десним тастером миша било где на веб страници и изаберете „Испитај“. Ако више волите пречице на тастатури због брзине, на Windows-у и Linux-у можете притиснути Ctrl + Shift + I , док је на Mac-у комбинација Cmd + Option + I. Такође можете притиснути тастер F12, који често служи као прекидач за отварање и затварање табле.
Када уђете унутра, можете да изаберете где желите да се прозор постави: усидрен са десне стране, са леве стране, на дну или чак у посебном прозору , што је одлично ако имате више монитора и желите да видите веб локацију на једном, а код на другом.
Панел елемената: Скелет и кожа веба
Картица „Елементи“ је место где се дешава магија DOM-а (Document Object Model - Модел објекта документа). Овде не видите статички HTML код послат са сервера, већ стварну , динамичку репрезентацију странице, укључујући све што је JavaScript генерисао у ходу. То је идеално место за проверу да ли је ваше семантичко означавање исправно, што је од суштинског значаја за SEO оптимизацију на страници.
Ако активирате Режим прегледа (икона стрелице у горњем левом углу), можете прећи мишем преко веб странице и видети прецизне детаље: димензије пиксела, боје позадине, маргине и размак. Чак вас упозорава ако је контраст боја недовољан, што је кључно за приступачност веба . Штавише, можете уклонити елементе који одвлаче пажњу, као што су банери колачића, или директно уређивати текст користећи Режим дизајна преко конзоле.
Савладавање картице Мрежа
Када је веб-сајт спор, прво место које треба погледати је Мрежни панел. Овај алат бележи сваку преузету датотеку: слике, скрипте, фонтове и сам HTML. Када поново учитате страницу, видећете хронолошку листу која приказује статус HTTP одговора , тип ресурса и величину датотеке.
Да бисте професионално анализирали време учитавања странице, неопходно је користити опцију „обриши кеш и поново учитај“ , јер она симулира искуство новог корисника. Поред тога, Chrome вам омогућава да симулирате споре везе (као што је 3G), што је неопходно за утврђивање да ли је ваша веб страница употребљива на мобилним уређајима са лошом покривеношћу. Ако желите да идете још даље, можете омогућити снимке екрана да бисте тачно видели како се страница приказује секунду по секунду док се ресурси преузимају.
WPO оптимизација и перформансе помоћу Lighthouse-а
Оптимизација веб перформанси (WPO) је уметност рада веб странице. Међу алатима за развој (DevTools) налазимо Lighthouse , алат за ревизију који анализира брзину, приступачност и најбоље праксе. За разлику од других спољних алата, Lighthouse вам даје конкретне предлоге за побољшање времена учитавања и рендеровања.
Да бисте оптимизовали перформансе, препоручује се да прегледате картице Извори и Мрежа како бисте идентификовали све претерано велике CSS или JS датотеке које треба минификовати или комбиновати . Такође можете утврдити да ли учитавате превише ресурса са спољних домена (као што су Google фонтови) и размотрити да ли би њихово хостовање на вашем серверу било ефикасније у смањењу HTTP захтева.
Напредни трикови за програмере и SEO стручњаке
Ако треба да отклоните грешке у JavaScript-у, конзола је ваш најбољи пријатељ. Веома користан трик је да користите променљиву `$0` у конзоли , која директно референцира последњи елемент који сте изабрали у панелу Елементи. С друге стране, ако желите да знате шта се дешава када ресурс откаже, можете користити функцију блокирања захтева да симулирате да CSS датотека или API нису доступни и видите да ли веб локација остаје функционална.
За оне који желе да издвоје податке, функција „Копирај елемент“ вам омогућава да извезете структуру целе табеле или листе у уређивач кода или чак да је користите са ImportXML у Google табелама. Све ово, у комбинацији са респонзивним дизајном који емулира различите мобилне уређаје, чини DevTools комплетним пакетом за техничку анализу.
Интелигентна употреба ових алата вам омогућава да трансформишете спору, лоше структурирану веб страницу у оптимизовану платформу коју Google награђује у својим рангирањима. Савладавање инспекције елемената, анализе мреже и ревизије учинка није само за програмере, већ за свакога ко жели да обезбеди беспрекорно корисничко искуство и јаке рангирање на претраживачима.
Страствени писац о свету бајтова и технологије уопште. Волим да делим своје знање кроз писање, и то је оно што ћу радити на овом блогу, показивати вам све најзанимљивије ствари о гаџетима, софтверу, хардверу, технолошким трендовима и још много тога. Мој циљ је да вам помогнем да се крећете у дигиталном свету на једноставан и забаван начин.