Цхроме ДевТоолс је један од највећих разлога зашто програмери одбијају да додирну било који други прегледач.
Али већина нас користи само неколико функција, остајући несвесни многих запањујућих функција које се нечујно објављују.
Хајде да откријемо неке од ових скривених драгуља!
Свако има свој омиљени оперативни систем, хардверску платформу, тип уређаја, фактор облика уређаја, итд. Али једна ствар је заједничка свима — они користе Цхроме прегледач и само Цхроме прегледач! Мислим да се са сигурношћу може рећи да су ратови претраживача завршени и да је Цхроме убедљиво победио.
Корисници Виндовс-а користе подразумевани прегледач само за преузимање Цхроме-а и након тога користе Цхроме, занемарујући све „препоруке“ Виндовс-а. Исто важи и за Аппле-ове уређаје (посебно МацБоок-ове и уређаје са већим екраном), где корисници и програмери избегавају Сафари, упркос Аппле-овим многим јаким тврдњама и тактикама конверзије.
А ако уређај не користи Цхроме, велике су шансе да покреће Цхроме компатибилан спинофф као нпр Храбро или Вивалди. Да, знам, технички, ови претраживачи нису засновани на Цхроме-у, али то је друга дискусија. Просечан корисник можда користи ове друге претраживаче из идеолошких или посебних разлога, али када су програмери у питању, нема другог претраживача на видику осим Цхроме-а.
Чак се и чињеница да је то чудовиште које једе меморију занемарено. Разлог је једноставан: Цхроме ДевТоолс.
Извор слике: Званични документи за Цхроме ДевТоолс
Сада, ако читате овај чланак, са сигурношћу је претпоставити да сте или моћни корисник, мајстор, веб програмер или нешто слично томе. Као такав, никоме од нас није потребан увод у ДевТоолс, како да га отворите, његове различите карактеристике итд.
Уместо тога, без губљења времена, хајде да заронимо директно у неке од мање познатих, али запањујуће корисних функција Цхроме ДевТоолс-а.
Преглед садржаја
Режим дизајна
Једна од ствари које програмери рутински раде је да прегледају елемент на страници, а затим модификују његов ХТМЛ да би нешто прегледали или тестирали ефекат промене.
Међутим, рад са ХТМЛ-ом директно у ДевТоолс-у није најглаткија ствар икад – пробијати се кроз супу ознака, напрезати очи покушавајући да нађете праву заграду за отварање/затварање и бавите се смешном количином размака док уређујете текст (размак који очигледно недостаје у документу који видите), неки су од проблема са којима се можете суочити. Још је горе ако сте дизајнер и не желите да пролазите кроз неред.
Ево снимка екрана са једне од страница ове веб странице (вдзвдз):
Дубоко угнежђени ХТМЛ и мистериозне, збуњујуће ЦСС класе су типичне за било коју нетривијалну веб локацију данас, где је искуство са ДевТоолс-ом, у најмању руку, субоптимално. 🤭
Али постоји функција ДевТоолс-а под називом Десигн Моде, која у многим случајевима може смањити бол. Користећи Режим дизајна (то није званично име, то је само оно како су га људи назвали због начина на који се активира и шта ради — не брините, видећемо врло брзо!), мења се у страница се може направити визуелно и уживо, баш као уређивање табеле или уређивача текста! Једина квака је што ова функција није подразумевано укључена, а њено активирање представља малу главобољу, посебно за оне који нису програмери.
У сваком случају, то је прилично једноставно; све што треба да урадите је да пратите упутства у наставку. У зависности од тога где се налазите на кривој софистицираности корисника, ово може бити смешно лако или умерено тешко. Ево шта треба да урадите:
- Уверите се да је веб страница коју желите да измените учитана и да је тренутно гледате (односно, та картица је активна).
- Отворите панел ДевТоолс на начин на који обично радите (пречица на тастатури, кликови мишем, шта год). Волим да користим пречице на тастатури, а на Мац-у, Опт + Цмд + И ради посао.
- Сада, када су ДевТоолс отворене, идите на картицу под називом „Конзола“. Неки од вас можда преврћу очима колико све ово изгледа глупо и очигледно, али хеј, хајде да се сетимо и (стотине?) хиљада људи који се муче док раде са конзолом претраживача и ЈаваСцрипт-ом (из било ког разлога) ).
- Кликните на први ред поред курсора, који ће затим приказати упит за куцање, и сада тамо можете написати ЈаваСцрипт код (погледајте снимак екрана мало даље испод).
- Сада треба да напишемо неки ЈаваСцрипт код. Не брините, јер је оно што треба да напишете/укуцате веома кратко и једноставно: доцумент.десигнМоде = “он”. Такође можете да копирате и налепите код са ове странице (ако то учините, уверите се да се форматирање не копира — потребан нам је само обичан текст) или ако се осећате самопоуздано, откуцајте га.
- Притисните Ентер/Ретурн.
„То је то??!“
Да, то је све!
Сада можете слободно да уносите измене на страницу као да је документ. Погледајте овај пример видео снимка у којем уживо уређујем Спотифи веб локацију користећи режим дизајна:
Функција Десигн Моде, ма колико била узбудљива, није сребрни метак; не можете, на пример, лако копирати и налепити дугмад, променити њихов изглед и тако даље. Стварни број ствари које може да уради у поређењу са уређивачем веб страница из снова је веома низак; међутим, решава случајеве употребе где садржај треба да се мења визуелно и у ходу.
Без обзира на то, није претерано тврдити да људи из Цхроме-а тестирају колико је добро прихваћена ова функција; ако наиђе на добар пријем и јак случај употребе, разумно је очекивати да ће ускоро уследити моћније могућности уређивања! 🤞🏻🤞🏻
Симулација услова мреже
Картица Мрежа у Цхроме ДевТоолс је можда најшире коришћена (наравно, немам податке о њој, али као веб програмер, обично користим картицу Конзола можда 20-30% времена, а картица Мрежа остатак времена). Даје нам све врсте информација о захтевима који се упућују са странице, њиховом типу, метаподацима/заглављима, статусу, току преузимања средстава (слике, стилови итд.), времену учитавања итд. Са тако невероватном корисношћу, није ни чудо што је картица Мрежа најчешћа.
Па ипак, лако је пропустити функцију о којој расправљамо; можда нисте приметили безопасан падајући мени који наводи очигледно: Онлине.
Ако кликнете на ово, видећете падајући мени са различитим опцијама које вам омогућавају да смањите брзину мреже: брза 3Г, спора 3Г, ван мреже, итд. Иако могу постојати различити случајеви коришћења ове опције, најчешћи је тестирање веб локације перформансе на спорим мрежама или понашање веб апликације када сте ван мреже (под претпоставком да су такве могућности додане).
Узмимо ово за један круг. Поставићу мрежу на „Споро 3Г“ и поново учитати исту страницу са претходног снимка екрана. Пре него што то урадим, приметите на ранијем снимку екрана како се на мојој тренутној мрежној вези (широкопојасна веза од 40 Мбпс) већина средстава преузима за мање од 100 милисекунди.
А сада је време да видимо шта му спори 3Г ради.
Каква разлика!
Имајте на уму да је време учитавања средстава сада у распону од 5-10 секунди. Такође, сајт је завршио учитавање у потпуности за 17,25 секунди! Да, знам шта мислите, али морате узети у обзир да ће на спорој 3Г мрежи било којој модерној веб локацији треба неколико секунди да се учита. Да ли желите брзо учитавање на спорим мрежама је друга ствар, мада све у свему, то мора бити пословна одлука у којој добици оправдавају труд.
На слици изнад, приметите икону упозорења на картици Мрежа. То је Цхроме-ов начин да вас подсети да сте направили неку неподразумевану, упорну промену и ако не знате шта радите, можда би требало да је ресетујете.
Интерактивни бирач боја
Провера ДОМ елемената у ДевТоолс-у је нешто што сви радимо скоро сваки дан. Такође смо навикли на одељак са ЦСС детаљима који је приказан поред, и знамо да га можемо уредити и одмах видети резултате.
Једна мала погодност скривена међу свим овим је да ако кликнете на својство ЦСС боје, појавиће се познати интерфејс бирача боја!
Имајте на уму да то није голи, основни бирач боја. Омогућава вам да контролишете транспарентност, мењате системе боја који се користе, бирате боју директно са странице и још много тога.
Дакле, следећи пут када будете експериментисали са акцентним бојама сајта, на пример, не морате да вежбате или погађате праву вредност за нијансу коју имате на уму! У ствари, многи људи воле да дизајнирају веб странице директно у претраживачу; за њих су овакве карактеристике божји дар! 🙂
Праћење догађаја на елементима странице
Често смо у ситуацији у којој бисмо желели да знамо шта се дешава са тим специфичним елементом који нас занима. Ово је посебно тачно када користите јКуери у нетривијалној бази кода — било вашој или туђој; Обрађивачи догађаја и логика су раширени свуда, а праћење грешке може бити ноћна мора.
Срећом, Цхроме ДевТоолс има сјајну функцију управо за ово. Он ће посматрати назначени елемент уместо вас и евидентирати догађаје на конзоли. Али постоји мало разочарање: ова функција нема могућности избора елемената на основу имена ЦСС класа. Дакле, јКуери начин $(“#емаил”) није доступан. 🙂
Уз то речено, хајде да видимо како то учинити. Почињемо са једноставним „провера елемента“ помоћу ДевТоолс инспектора. Да, то је исти алат за инспекцију који користимо сваки дан.
На снимку екрана испод, користио сам алатку инспектора да бих истакао унос текста. Под „истакнути“ не мислим да је елемент на страници истакнут (није, као што видите); уместо тога, курсор инспектора је кликнут на унос текста, а одговарајући ХТМЛ код у ДевТоолс је истакнут.
Ово циља на тренутно прегледани елемент за праћење догађаја, што елементу чини доступним као посебна ЈаваСцрипт променљива која се зове $0. Затим, пазећи да немарно не кликнем негде другде у прозору прегледача (посебно део ХТМЛ кода), кликнем на Конзолу и приложим слушалац догађаја за овај унос текста. За ово ми треба само један ред кода: мониторЕвентс($0, ‘миш’). Део „миш“ овде говори Цхроме-у да ме занима само праћење догађаја заснованих на мишу.
Чим притиснем Ентер/Ретурн, активира се надзор, а ако сада пређем мишем преко или кликнем на унос текста, ти догађаји се евидентирају на конзоли као ЈаваСцрипт објекти:
Као што можете видети на снимку екрана, снимљено је неколико типова догађаја миша док сам кликнуо на елемент, откуцао своје име, а затим померио миша (догађаји куцања, будући да су догађаји на тастатури, нису евидентирани). Догађаји су сами ЈаваСцрипт објекти, као што је јасно на снимку екрана; сваки објекат догађаја садржи огромну количину информација. На пример, проширио сам објекат догађаја „клик“, а број својстава није могао да стане све у један снимак екрана!
Топло вас охрабрујем да одмах испробате ову функцију јер ће вам сигурно уштедети много главобоље у вашим предстојећим пројектима!
Извештаји о учинку веб сајта
Ових дана перформансе веб-сајта чине или кваре посао/веб-сајт. Чак и мало повећање перформанси значи огроман напредак у СЕО-у, као и задовољство корисника. Али како да знате који делови ваше веб странице захтевају пажњу, а који су већ добри?
Да ли треба да ангажујете тим стручњака и стрпљиво чекате неколико дана?
Па, постоје случајеви у којима то треба да се уради, али на срећу, Цхроме ДевТоолс покрива све нас. У најновијим верзијама Цхроме-а (крајем 2020.) наћи ћете картицу Лигхтхоусе у ДевТоолс-у. Пре неколико месеци звао се Аудитс, и довољно збуњујуће, то је име које ћете наћи у званичним документима од тренутка писања. У сваком случају, поента је да је Лигхтхоусе некада био модеран веб-сајт за бесплатно проверу перформанси веб-сајта, али га је онда Гугл уклонио (нису дати разлози). Срећом, иста моћна функционалност се касније поново појавила у ДевТоолс.
Да бисте генерисали извештај о учинку, све што треба да урадите је да притиснете једно дугме након што се страница која вас занима учита:
Као што можете видети на десној страни на снимку екрана, постоји неколико опција за контролу колико информација желите (и, наравно, шта желите да тестирате). Када будете задовољни подешавањима, притисните то велико плаво дугме, седите и опустите се. Неколико секунди касније, имаћете користан извештај који изгледа отприлике овако:
Бројеви које видите на горњој слици екрана показују укупан резултат за сваку категорију. Категорија за прогресивне веб апликације (ПВА) је засивљена, вероватно зато што ова веб локација нема ПВА могућности. Такође, као што можете закључити по величини траке за померање на снимку екрана (са крајње десне стране), то је дугачак извештај.
Ево како изгледа део одељка о перформансама:
Нећу тврдити да су Лигхтхоусе и његови предлози свети грал перформанси веб странице, али они су од велике помоћи; то је зато што власници веб локација и програмери ретко имају појма о томе који проблеми постоје и како их тачно решити.
Искрено, чак се и ја осећам изгубљено као веб програмер, јер перформансе и тестирање обично буду својеврсне специјализације. Као такав, Лигхтхоусе је мало позната, недовољно цењена алатка, сада део Цхроме ДевТоолс-а, која је од огромне користи како за власнике предузећа, тако и за програмере/сисадмине.
Вештина за уређивање кода
Картица Извори у ДевТоолс нам омогућава приступ различитим датотекама које је учитала веб локација. Такође има могућности као што су уређивање кода, чување исечака итд. Ово не би требало да буде изненађење за веб програмере. Међутим, ДевТоолс такође има неколико уграђених погодности које олакшавају живот програмерима који су навикли на своје омиљене ИДЕ-ове кода.
ДевТоолс користи неке добро познате пречице на тастатури које ће вам уштедети време и минимизирати фрустрацију око преговарања. На пример, Цтрл + Д (или Цмд + Д на Мац-у) се може користити за истицање вишеструких појављивања речи. Слично томе, држање Цтрл (или Цмд на Мац-у) и кликање на више места у коду даје вам више курсора. Погледајте видео испод да бисте добили бољу идеју:
Ако мислите да је ово кул, обавезно зароните у званичне документе да бисте искористили све функције за уређивање кода које ДевТоолс нуди.
Контролишите стање ДОМ елемента
Понекад нешто тестирамо или отклањамо грешке, али понашање које јуримо доступно је само у одређеном стању елемента. У зависности од тога у ком је стању, можда ћете се лоше провести; за мене је то стање „лебдења“, јер се сећам да сам губио небројене минуте покушавајући да темпирам радњу лебдења или да користим додатни, привремени ЦСС, итд.
Срећом, Цхроме ДевТоолс има једноставан начин да промени стање прегледаног елемента. Штавише, опција да то урадите је управо ту ако кликнемо десним тастером миша на елемент (на картици Елементи), али с обзиром на број функција и притисак дневног рада, ово је лако превидети:
Да, заиста је тако једноставно!
Сада, не морате да убацујете логику условног тестирања у свој код, пишете додатни ЦСС или скачете кроз неке друге обруче када посматрате елемент у другом стању.
Панел са алаткама
Последње, али не и најмање важно на овој листи је панел са алаткама. То је још једна од оних невероватно корисних функција које су добро скривене и могу се видети само помоћу пречица на тастатури. Као што име сугерише, панел Тоолс није један алат, већ својеврсна контролна табла на којој су доступне скоро све функције ДевТоол-а. Пошто постоји превише функција које нуде целокупну функционалност ДевТоолс-а, трака за претрагу је доступна одмах на врху.
Да бисте активирали панел са алаткама, уверите се да сте на панелу ДевТоолс, а затим притисните Цтрл + Схифт + П (или Цмд + Схифт + П за Мац кориснике):
Панел са алаткама је пун могућности и изненађења. На пример, да ли сте знали да можете да направите снимак екрана директно из ДевТоолс-а?
Кладим се да не, јер бисте морали да покренете панел са алаткама и укуцате „снимак екрана“ у траку за претрагу да бисте то открили:
Такође ћете приметити неколико опција за прављење снимака екрана, укључујући једну за изабрани ДОМ чвор! Истражите више панела са алаткама и уверавам вас да нећете бити разочарани!
Ако треба даљински да направите снимак екрана било које веб странице, погледајте алатку за снимке екрана вдзвдз.
Закључак
Сам Цхроме претраживач је богат функцијама, али оно што заиста блиста је ДевТоолс понуда. Као што смо видели у овом чланку, постоји доста добро скривених функција – и других који се крију наочиглед – за које велика већина корисника не зна. Зашто су ове карактеристике скривене?
Претпостављам да су неке од њих веома експерименталне (као што је режим дизајна), а програмери Цхроме-а желе да свакодневним корисницима отежају проналажење ових функција. За остатак многих функција, верујем да је то једноставно случај преоптерећења информацијама: ако постоји, рецимо, 120 функција, а неке од њих имају под-функције и тако даље, прилично је немогуће дизајнирати прави кориснички интерфејс за такве сценарио. Такође, Гоогле историјски није урадио сјајан посао са УКС-ом својих производа, тако да постоји то. 🤷🏻♂
Без обзира на то, надам се да су вам неке од ових функција биле корисне. Али што је још важније, надам се да вам је овај чланак дао осећај шта се где крије, тако да следећи пут када будете желели да истражите или тражите нешто посебно, знате где да „дубоко копате“. 😆