Chrome DevTools: täielik juhend arendajatööriistade maksimaalseks ärakasutamiseks

Chrome DevToolsist on saanud asendamatu kaaslane igale veebiarendajale, disainerile või SEO-spetsialistile, kes soovib parandada veebisaidi toimivust, ligipääsetavust ja otsingumootori paremusjärjestust. Need Google Chrome'i integreeritud tööriistad pakuvad põhjalikku teavet ja kontrolli veebisaidi funktsionaalsuse üle, võimaldades kõike alates HTML-i ja CSS-i kontrollist kuni põhjaliku võrgutegevuse analüüsi, jõudlustestimise ja mobiilse optimeerimiseni.

Kas soovite omandada Chrome DevToolsi ja kasutada kõiki selle funktsioone mis tahes veebisaidi probleemide silumiseks, optimeerimiseks ja diagnoosimiseks? Selles artiklis selgitame näidete ja näpunäidete abil kõike, mida peate teadma, et neist tööriistadest maksimumi võtta, sealhulgas kuidas neid kiiresti avada, mida saate iga paneeli abil analüüsida, milleks iga funktsioon on mõeldud ja kuidas neid nii arenduses kui ka SEO-s rakendada.

Mis on Chrome DevTools ja miks need on nii võimsad?

Chrome DevToolsi arendustööriistade komplekt on Google Chrome'i sisseehitatud paneel, mis on loodud selleks, et iga kasutaja saaks analüüsida, siluda ja optimeerida mis tahes veebisaidi koodi ja jõudlust ilma täiendavaid pistikprogramme installimata . Selle arvukate vahekaartide ja funktsioonide kaudu saate elemente kontrollida, stiile reaalajas muuta, jälgida võrgutegevust, siluda skripte, hinnata jõudlust ja isegi simuleerida veebisaidi käitumist mobiilseadmetes . Selle ulatus ulatub kaugemale pelgast "lähtekoodi vaatamisest": see võimaldab teil kogeda, kuidas veebisait suhtleb, kuidas Google seda tõlgendab ja kuidas kasutaja seda erinevatest seadmetest või ühendustest kasutab.

Chrome DevToolsile juurdepääsemine: kiirklahvid ja kontekstimenüü

Chrome DevToolsile juurdepääs on uskumatult lihtne ja selleks on mitu võimalust, olenevalt teie operatsioonisüsteemist ja eelistustest:

• Paremklõpsake lehel, mida soovite analüüsida. ja valige „Kontrolli“. See on kõige visuaalsem ja sagedamini kasutatav meetod.
• Kasutage nuppu kiirklahvid teie operatsioonisüsteemile omane:
  Windows / Linux: Ctrl + Shift + I
  Mac: Cmd + valik + I
• Samuti võite minna Chrome'i menüüsse (kolm vertikaalset punkti aadressiriba paremal pool) ja valida Rohkem tööriistu > Arendaja tööriistad.
• Teatud paneelide otse klaviatuuri abil avamiseks toimige järgmiselt.
  • Elementide paneel (HTML/CSS): Ctrl + Shift + C (Windows/Linux) või Cmd + Option + C (Mac)
  • Konsool: Ctrl + Shift + J (Windows/Linux) või Cmd + Option + J (Mac)
  • Viimati kasutatud paneel: F12 (enamikus süsteemides) või Ctrl + Shift + I / Cmd + Option + I
• Ava DevTools automaatselt igal uuel vahelehel (väga kasulik neile, kes veedavad oma aega silumisega): käivitage Chrome valikuga --auto-open-devtools-for-tabs käsurealt.

Ära unusta: DevToolsi avamisel saad otsustada, kas soovid need kinnitada akna paremale, vasakule, alla või isegi eraldi aknasse – see on eriti mugav, kui töötad mitme ekraaniga.

Mida Chrome DevToolsiga teha saab? Ülevaade selle põhifunktsioonidest

Chrome DevTools on jagatud mitmeks paneeliks. Igaüks neist hõlmab veebianalüüsi ja optimeerimise olulist aspekti. Siin on kõige sagedamini kasutatavad paneelid ja nende kõige olulisemad funktsioonid:

Elementide paneel: DOM-i ja CSS-i reaalajas kontroll ja redigeerimine

See paneel on enamiku silumis- ja visuaalse analüüsi ülesannete lähtepunkt. See võimaldab teil:

• Kontrollige DOM-i (dokumendiobjekti mudeli) täpset struktuuri mida brauser renderdab ehk mida Google pärast skriptide käitamist ja stiilide laadimist tegelikult näeb.
• HTML-i ja CSS-i muutmine lennult, kontrollides koheselt, kuidas muudatused veebisaidil välja näevad (suurepärane prototüüpimiseks või uute stiilireeglite testimiseks ilma tegelikku lähtekoodi mõjutamata).
• Klasside ja stiilide haldamine elementide kohta: saate aktiveerida, deaktiveerida või testida uusi klasse ning redigeerida visuaalseid detaile reageeriva disaini loomiseks.
• Vaadake ja muutke erilisi atribuute (näiteks data-nosnippet), mis on SEO jaoks üliolulised, kuna saate kontrollida, kas Google suudab teatud sisu indekseerida või mitte.
• Kontrollige, kas leidub elemente või plokke, mis on nähtavad alles pärast kasutaja toimingut (näiteks vahekaardid või rippmenüüd, mille kuvamiseks on vaja JavaScripti).
• Kiire juurdepääs kontrollitud üksusele konsoolil kui $0, mis võimaldab teil seda otse JavaScripti abil manipuleerida.

Näpunäide! Sellelt paneelilt saate simuleerida ka erinevaid ekraanisuurusi ja mobiilseadmeid, tagades, et teie veebisait on tõeliselt reageeriv.

Võrgupaneel: analüüsib ressursikoormust, diagnoosib latentsust ja simuleerib aeglaseid ühendusi

Üks olulisemaid tulemusanalüüsi juhtpaneele . Siin näete seda kronoloogilises ja detailses järjekorras:

• Kõik lehe laadimisel taotletud ressursid (HTML, pildid, CSS, JS, videod, fondid jne.).
• Millises järjekorras need alla laaditakse, laadimisaeg ja suurus iga ressursi kohta: võtmetähtsusega kitsaskohtade või ebavajalike ressursside tuvastamiseks.
• Iga ressursi lingile klõpsates saate seda kontrollida. HTTP päised, vahemällu salvestamise eeskirjad, reageerimisajadja isegi vaadata, kas minimeeritud faile on olemas.
• Aeglaste ühenduste simulatsioon (3G, 4G jne), et näha tegelikku jõudlust oma kasutajate seadmetes, mitte ainult oma arvutis.
• Funktsioon Tühjenda vahemälu ja laadi uuesti, kasulik uue kasutaja kogemuse kontrollimiseks.
• Päringute blokeerimine: analüüsib teatud ressurssidest loobumise mõju (näiteks main.css keelamine ja lehe valesti konfigureerimise jälgimine).
• Täpsem filtreerimine: otsing failitüübi, lähtedomeeni, regulaaravaldiste või konkreetsete atribuutide järgi, ideaalne väliste allalaadimiste auditeerimiseks või turvalisuse jälgimiseks.
• Ekraanipiltide tegemine lehe laadimise eri punktides, mis võimaldab teil samm-sammult näha, mida kasutajale kuvatakse.

Täpsemalt SEO ja veebipoe jaoks: analüüsige, mis laadib esimesena ja kuidas see mõjutab jõudlust ja veebimõõdikuid , mõistes, kuidas optimeerida kogemust nii Google'i kui ka külastajate jaoks.

Konsoolipaneel: silumine, skriptide käivitamine ja reaalajas märguannete saamine

Konsoolis saate reaalajas vaadata veebisaidi väljastatud logisid, JavaScripti vigu ja turvahoiatusi . Samuti saate teha järgmist.

• Käivita JavaScripti käske otse avatud lehel, ideaalne kiirete testide või automatiseerimise jaoks.
• Suhtle viimase kontrollitud elemendiga muutuja abil $0 (ja $1, $2 jne), kiirendades täiustatud silumist.
• Vigade või hoiatuste lingil klõpsates jõuad otse rikkuva JS-faili reale.

Allikate paneel: staatiliste failide ja väliste ressursside kuvamine ja silumine

Selles jaotises kuvatakse veebisaidile üleslaaditud failide struktuur : skriptid, stiilid, pildid jne, mis on korraldatud domeenide kaupa:

• Uurige, kas kasutate väliseid ressursse, näiteks Google Fonts'ija kaalub kiiruse suurendamiseks nende kohalikku majutamist.
• See võimaldab teil lähtekoodifaile testimiseks avada, redigeerida ja salvestada.
• Analüüsige minimeeritud skripte, laiendage koodi parema loetavuse tagamiseks ja kontrollige peidetud sõltuvusi.

Diktofon: Simuleerib kasutaja teekonda ja mõõdab tema tegelikku kogemust

Salvestusfunktsioon võimaldab simuleerida kasutaja tegelikku sirvimist ja tuvastada konkreetseid probleeme:

• Saate salvestada navigeerimisvoogu (nt menüüdes klõpsamine, vormide täitmine, ühelt lehelt teisele liikumine), kontrollida veebisaidi reageeringut ja analüüsida iga toimingu laadimisaegu.
• Ideaalne kriitiliste konversioonide või kasutajakogemuse teekondade kitsaskohtade tuvastamiseks.

Tuletorn: tulemuslikkuse, ligipääsetavuse ja parimate tavade põhjalik audit

Chrome DevToolsi integreeritud ja ka pluginana saadaval olev Lighthouse on üks peamisi funktsioone:

• teostab automaatsed auditid jõudlus (WPO), ligipääsetavus, parimad tavad, SEO ja PWA (progressiivsed veebirakendused).
• Pakub a üldskoor ja iga jaotise kohta teostatavaid soovitusi nii juba avaldatud kui ka arendusjärgus veebisaitide jaoks.
• See võimaldab teil veebisaiti analüüsida nii laua- kui ka mobiilirežiimis, mistõttu on see väga kasulik mobiilisõbralikkuse probleemide tuvastamisel.

Praktilised rakendused: kuidas kasutada DevToolsi WPO ja SEO jaoks

Chrome DevTools on veebisaidi optimeerimise põhivahend igal tasandil: alates esialgsest kujundusest kuni reklaamipäringute analüüsi ja lehe SEO auditeerimiseni. Mõned peamised kasutusalad on järgmised:

Jõudluse optimeerimine (WPO)

• Tuvastab pildid ja suured failid vahekaardilt Võrk ja seadke prioriteediks selle optimeerimine (tihendamine, uued vormingud, laisk laadimine).
• Hinnake väliste ressursside koormustKui ajad on pikad, kaaluge nende allalaadimist oma serverist.
• Laadimise prioriteeti tuleb muuta nii, et kriitilised elemendid serveeritakse esimesena (Kriitiline tee).
• Keela vahemälu võrgupaneelilt Muudatuste analüüsimisel veenduge, et teavet ei salvestata lokaalselt.
• Kasutage mobiilse kasutajakogemuse testimiseks aeglase ühenduse simulaatorit.

Ressursside minimeerimine (CSS ja JavaScript)

• Vahekaardil Fondid leiab ülemõõdulisi, minimeerimata või duplikaatfaile.
• Ühendada ja minimeerida CSS-i ja JS-i, et vähendada päringuid ja parandada laadimisaegu.

Struktuurianalüüs, ligipääsetavus ja SEO

• Vaadake üle pealkirjade, atribuutide ja HTML-i semantika struktuur: veenduge, et loogiline struktuur (h2, h3, ALT sildid, rollid) oleks Google'i jaoks optimaalne.
• Kontrollige Lighthouse'ilt vajalike siltide ja andmete olemasolu SEO, ligipääsetavuse ja PWA jaoks.
• Analüüsi JavaScripti mõju renderdamisele ja pea meeles, et Google ei pruugi tõlgendada kasutaja interaktsioonist sõltuvat, kui see pole laadimisel nähtav.
• Jälgib küpsiste, kohaliku salvestusruumi ja muude brauseri ressursside kasutamist.

Sisu ekstraheerimine ja töötlemine kraapimiseks või eksportimiseks

• Suurte tabelite või loendite otse arvutustabelitesse või koodiredaktoritesse eksportimiseks saate kasutada funktsiooni „Kopeeri element”.
• Kasutage konsooli ja kujundusrežiimi ekraanil kuvatava sisu tõhusaks redigeerimiseks, jäädvustuste ettevalmistamiseks või asjakohase teabe eksportimiseks.

Reaalajas kohandamine ja veatuvastus

• Peida reklaamibännerid või tüütud elemendid otse, rakendades neid ekraan: puudub inspektori kaudu.
• Kasuta konsoolis JavaScripti valitud elementide käskude täitmiseks või isegi lehe redigeerimisrežiimi sisse ja välja lülitamiseks.

Chrome DevToolsi piirangud mobiilseadmetes

Kuigi „Inspect Element” ja kõik Chrome'i DevTools on alati töölauaversioonides saadaval, pole DevTools nutitelefonides ja tahvelarvutites otse ligipääsetav . Sellel on kaks põhjust: liides oleks väikestel ekraanidel ebapraktiline ja hiire täpsus on kahjustatud. Õnneks saate mobiilikogemust oma töölaualt jäljendada või isegi füüsilise seadme arvutiga ühendada, et saite reaalajas siluda, mis on eriti väärtuslik mobiilirakenduste arendajatele. Macis, kus on iOS, peate lubama vastava valiku menüüs „Seaded > Täpsemad” ja kasutama mõlemas seadmes sama iCloudi kontot.

Täiustatud kasutusjuhud: silumisest ekraanipiltide tegemiseni

Lisaks klassikalistele SEO arenduse ja analüüsi kasutusviisidele pakub Chrome DevTools väga praktilisi lisafunktsioone:

• Blokeerib teatud failide (näiteks: main.css) laadimise, et simuleerida võrgu rikke stsenaariume ja kontrollige, kuidas veebisait tõrgete korral käitub.
• Kasutage võrgupaneelil ekraanipildi funktsiooni, et näha samm-sammult renderdamisprotsessi ja seeläbi paremini mõista, kuidas ja millal teatud põhielemendid ilmuvad.
• Otsi globaalse otsingufunktsiooni abil konkreetseid HTTP päiseid või vastuseid (nt optimaalsete vahemällu salvestamise poliitikate leidmiseks).
• Filtreeri päringuid tüübi, domeeni või mustri järgi, et analüüsida välist liiklust või kriitilisi ressursse üksikasjalikult.
• Looge HTML-i ja CSS-i muudatuste kiireid prototüüpe ning jagage neid hõlpsalt oma meeskonnaga ilma algseid lähtefaile muutmata.

Chrome DevToolsist on saanud veebiarenduse ja -analüütika Šveitsi armee nuga, mis sobib võrdselt hästi nii isiklikeks projektideks kui ka suurteks platvormideks ja professionaalseteks projektideks. Alates disainidetaili kiirest kontrollimisest kuni kõigi veebisaidi ressursside (sh WPO, SEO ja ligipääsetavuse ülesannete) täieliku auditeerimiseni muudab selle integreerimine selliste tööriistadega nagu Lighthouse oluliseks ressursiks teie lehtede optimeerimiseks mitte ainult Google'i, vaid ka teie kasutajate jaoks.