Kiekvienas web developeris bent kartą gyvenime yra atsidaręs Chrome DevTools. Dažniausiai tai vyksta spaudžiant F12 arba dešiniuoju pelės mygtuku pasirinkus „Inspect”. Bet ar tikrai išnaudojate visas šio įrankio galimybes? Greičiausiai ne. DevTools yra tarsi Šveicarijos peilis – dauguma žmonių jį naudoja tik kaip peilį, nors jame yra dar dešimt kitų įrankių.
Šiame straipsnyje pasidalinsiu triukais, kurie realiai sutaupo laiko ir nervų. Ne teoriniais „gal kada pravers”, o tokiais, kuriuos naudoju kasdien ir kurie padaro darbą greičiau bei malonesnį.
Console trikiukai, apie kuriuos niekas nekalba
Visi žino console.log(), bet tai tik ledkalnio viršūnė. Pradėkime nuo console.table() – jei turite masyvą objektų, šis metodas pateiks juos gražioje lentelėje. Pavyzdžiui, vietoj neįskaitomo objektų sąrašo, gausite struktūrizuotą lentelę su stulpeliais. Ypač patogu, kai dirbi su API atsakymais.
Kitas mano favoritas – console.time() ir console.timeEnd(). Įdėkite šiuos du komandas aplink kodo bloką, kurį norite išmatuoti, ir gausite tikslų vykdymo laiką milisekundėmis. Nereikia jokių sudėtingų performance profilerių, kai tiesiog norite greitai patikrinti, ar jūsų funkcija tikrai tokia lėta, kaip atrodo.
Dar vienas gelbėjimas – $0, $1, $2 ir t.t. Tai nuorodos į paskutinius Elements tab’e pasirinktus elementus. Pasirinkote elementą, perjungėte į Console, įrašėte $0 – ir turite tiesioginę prieigą prie to elemento. Galite iš karto testuoti JavaScript komandas ant jo, keisti stilius, tikrinti properties. Sutaupo tonos laiko, kai debugini.
Network tab’as – ne tik request’ų sąrašas
Daugelis developerių Network tab’ą naudoja tik tam, kad pamatytų, ar request’as praėjo, ar ne. Bet čia galima rasti daug daugiau naudingos informacijos.
Pirma, galite throttle’inti interneto greitį. Viršuje yra dropdown meniu „No throttling” – pakeiskite į „Slow 3G” arba „Fast 3G” ir pamatysite, kaip jūsų puslapis veikia su lėtu internetu. Tai ne teorinis dalykas – didelė dalis pasaulio vis dar naudoja lėtą internetą, o jūsų 100MB bundle’as gali krautis amžinai.
Antra, galite blokuoti konkretius request’us. Dešiniu pelės mygtuku ant bet kurio request’o ir pasirinkite „Block request URL”. Puiku testuojant, kaip aplikacija elgiasi, kai koks nors third-party scriptas neužsikrauna arba API neveikia.
Trečia – „Copy as fetch” funkcija. Dešiniu pelės mygtuku ant bet kurio request’o, pasirinkite „Copy” → „Copy as fetch”. Gausite pilną JavaScript fetch komandą su visais headers, body ir kitais parametrais. Galite iš karto įklijuoti į console ir testuoti arba naudoti savo kode. Ypač patogu, kai reikia atkartoti sudėtingą POST request’ą su autentifikacija.
Elements tab’o paslaptys
Elements tab’e galite ne tik žiūrėti HTML struktūrą, bet ir ją redaguoti realiu laiku. Bet žinojote, kad galite tiesiog vilkti elementus? Tiesiog paimkite bet kurį HTML elementą ir nutempkite jį į kitą vietą DOM’e. Puiku greitam layouto testavimui.
Dar vienas triukas – paspauskite H klavišą, kai elementas pažymėtas. Tai paslėps/parodys elementą (pridės visibility: hidden). Greičiau nei rašyti CSS.
Styles panelėje galite naudoti rodyklių klavišus su modifikatoriais. Pasirinkę CSS reikšmę (pvz., margin: 10px), spauskite rodyklę aukštyn/žemyn – reikšmė keisis po 1. Su Shift – po 10. Su Ctrl/Cmd – po 0.1. Su Alt – po 0.01. Puiku fine-tuninant dizainą.
Dar vienas mažai žinomas dalykas – galite pridėti pseudo-state’us. Dešiniu pelės mygtuku ant elemento ir pasirinkite „Force state” → „:hover”, „:focus” ar ką nors kito. Dabar galite ramiai debuginti hover efektus, nereikia laikyti pelės virš elemento.
Sources tab’as ir debugging magija
Breakpointai – tai pagrindas, bet yra daug daugiau. Conditional breakpoints leidžia sustabdyti kodą tik tada, kai įvykdyta tam tikra sąlyga. Dešiniu pelės mygtuku ant eilutės numerio ir pasirinkite „Add conditional breakpoint”. Įrašykite sąlygą, pvz., userId === 123, ir kodas sustos tik tada, kai ši sąlyga teisinga.
Logpoints – tai breakpointai, kurie nesustapo kodo, o tiesiog išspausdina žinutę į console. Puiku, kai norite matyti, kas vyksta, bet nenorite sustabdyti execution flow.
Blackboxing – jei debuginate ir nuolat įšokate į bibliotekų kodą (pvz., React, jQuery), galite juos „blackbox’inti”. Settings → Blackboxing → Add pattern. Dabar debugger’is prašoks šiuos failus ir sustabdys tik jūsų kode.
Dar vienas gelbėjimas – „Pause on exceptions”. Mažas checkbox’as viršuje Sources tab’o. Įjunkite jį, ir debugger’is automatiškai sustos, kai įvyks klaida. Nereikės ieškoti, kur konkrečiai kažkas nuėjo ne taip.
Performance profiling be galvos skausmo
Performance tab’as atrodo bauginantis su visais tais grafikais ir spalvotais barais, bet iš tikrųjų tai ne taip sudėtinga. Pagrindinė idėja – paspauskite Record, padarykite tai, kas lėta jūsų aplikacijoje, sustabdykite įrašą.
Žiūrėkite į Main thread’ą – tai didžiausias grafikas viduryje. Ilgi geltonieji barai reiškia JavaScript vykdymą, violetiniai – rendering, žalieji – painting. Jei matote ilgus barus, zoom’inkite į juos (pelės ratuku arba WASD klavišais) ir pamatysite, kuri funkcija užima daugiausiai laiko.
Praktinis patarimas: ieškokite „long tasks” – tai užduotys, kurios trunka ilgiau nei 50ms. Jos blokuoja main thread’ą ir daro aplikaciją „laggy”. Dažniausiai tai būna sunkūs skaičiavimai, dideli DOM manipuliavimo blokai arba neoptimizuoti event listeneriai.
Jei matote daug raudonų trikampių viršuje – tai FPS dropai. Zoom’inkite į tą vietą ir pamatysite, kas sukėlė problemą. Dažniausiai tai būna per daug reflow’ų arba repaint’ų.
Lighthouse – greitasis auditas
Lighthouse tab’as – tai kaip turėti mini auditorių DevTools’e. Paspauskite „Generate report” ir po minutės gausite išsamų ataskaitą apie performance, accessibility, SEO ir best practices.
Bet štai triukas: naudokite Lighthouse CLI production aplinkoje. npm install -g lighthouse, tada lighthouse https://jusu-puslapis.lt. Gausite JSON su visais duomenimis, kurį galite integruoti į CI/CD pipeline’ą. Galite automatiškai atmesti deploy’us, jei performance score nukrenta žemiau tam tikros ribos.
Dar vienas dalykas – Lighthouse rodo ne tik rezultatus, bet ir konkretius patarimus, kaip juos pagerinti. Kiekvienas įspėjimas turi „Learn more” nuorodą su detaliais paaiškinimais. Tai ne tik įrankis matavimui, bet ir mokymosi šaltinis.
Command Menu – paslėptas galios centras
Paspauskite Ctrl+Shift+P (Cmd+Shift+P Mac’e) ir atsidarys Command Menu. Tai kaip Spotlight arba Ctrl+P VS Code – galite rasti beveik bet kokią DevTools funkciją.
Įrašykite „screenshot” ir pamatysite kelis variantus: capture full size screenshot, capture area screenshot, capture node screenshot. Galite padaryti viso puslapio screenshot’ą, net jei jis netelpa į ekraną – DevTools automatiškai scrollins ir suklijuos viską į vieną paveikslėlį.
Įrašykite „coverage” ir gausite Code Coverage įrankį, kuris parodys, kiek jūsų JavaScript ir CSS kodo iš tikrųjų naudojama puslapyje. Dažnai paaiškėja, kad 70% kodo niekada nevykdoma. Puiki vieta pradėti optimizaciją.
Įrašykite „sensors” ir galėsite simuliuoti geolocation, device orientation, touch events. Nereikia tikro telefono testuoti location-based features.
Kaip visa tai integruoti į kasdienį workflow
Gera žinoti visus šiuos triukus, bet tikroji vertė atsiranda, kai juos pradedi naudoti kasdien. Štai kaip aš tai darau.
Kiekvieną kartą, kai kažkas „neveikia”, pirmas žingsnis – Network tab’as. Ar visi request’ai successful? Ar nėra 404 ar 500 klaidų? Ar response’ai turi tai, ko tikimasi? 80% problemų išsisprendžia čia.
Jei problema frontend’e – Elements tab’as. Ar elementas tikrai yra DOM’e? Ar jis nepaslėptas su display: none? Ar stiliai tokie, kokių tikimasi? Ar nėra kito elemento, kuris uždengia šitą?
Jei problema logikoje – Sources tab’as su breakpointais. Bet ne bet kur, o strategiškai. Dėkite breakpoint’ą ten, kur žinote, kad kodas dar veikia gerai, ir po truputį judėkite link problemos vietos. Kaip binary search.
Performance problemoms – pradėkite nuo Lighthouse. Jis parodys didžiausias problemas. Tada Performance tab’as konkrečioms vietoms ištirti. Ir galiausiai Coverage tool’as pašalinti nenaudojamam kodui.
Dar vienas patarimas – customizuokite DevTools. Settings → Experiments – čia galite įjungti eksperimentines funkcijas. Settings → Preferences – čia galite keisti temą, font dydį, behavior. Padarykite DevTools patogius sau – jūs juose praleisite daug laiko.
Ir paskutinis dalykas – klaviatūros shortcutai. Išmokite bent pagrindinius: Ctrl+Shift+C (element picker), Ctrl+Shift+J (console), Ctrl+Shift+P (command menu), Ctrl+P (file search), Ctrl+Shift+F (search in all files). Pelė lėtina.
Chrome DevTools – tai ne tik debugging įrankis, tai jūsų kasdienio darbo partneris. Kuo geriau jį pažįstate, tuo greičiau sprendžiate problemas ir tuo daugiau laiko lieka tikram kūrimui. Šie triukai nėra kažkas super advanced – tai paprasčiausiai funkcijos, kurios jau yra ten, bet apie kurias daugelis nežino arba pamiršta. Pradėkite naudoti bent kelis iš jų šiandien, ir po savaitės pastebėsite skirtumą. O po mėnesio negalėsite įsivaizduoti, kaip dirbote be jų.
