Kaip naudoti „Chrome DevTools“ svetainės problemoms šalinti

Kaip naudoti „Chrome DevTools“ svetainės problemoms šalinti

„Chrome DevTools“ yra esminis kūrėjų turtas. Nors kitos naršyklės siūlo gana patogius trikčių šalinimo įrankius, „Chrome DevTools“ verta jūsų dėmesio dėl daugiafunkcinės sąsajos ir populiarumo.





„Chrome“ yra populiariausia kūrėjų naršyklė dėl galingo derinimo įrankių rinkinio. Naudoti „Chrome DevTools“ yra paprasta, tačiau jūs turite suprasti, kaip tai veikia, kad išnaudotumėte visas galimybes.



Kaip veikia „Chrome“ kūrėjo įrankiai

„Chrome DevTools“ leidžia išspręsti problemas svetainėje naudojant klaidų konsolę ir kitus derinimo bei stebėjimo įrankius. „DevTools“ naudojimas atskleidžia priekinės spragos ir leidžia stebėti, kaip jūsų svetainė rodoma mobiliuosiuose ir planšetiniuose įrenginiuose.





Naudodami „DevTools“ galite redaguoti svetainės kodą realiuoju laiku, pvz., „JavaScript“, HTML ir CSS, ir gauti greitų pakeitimų rezultatų.

Pakeitimai, kuriuos atliekate naudodami „DevTools“, neturi įtakos svetainei visam laikui. Jie tik laikinai parodo laukiamą rezultatą, tarsi būtumėte juos pritaikę tikrajam šaltinio kodui. Tai leidžia išsiaiškinti, kaip svetainė įkeliama daug greičiau, ir palengvinti klaidų šalinimą.



Kaip pasiekti „Chrome DevTools“

„Chrome DevTools“ galite pasiekti keliais būdais. Norėdami atidaryti kūrėjo įrankius naudodami „Mac OS“ nuorodų metodą, paspauskite Cmd + Opt + I . Jei naudojate „Windows“ OS, paspauskite „Ctrl“ + „Shift“ + I klaviatūros klavišus.

Arba galite pasiekti „Chrome“ kūrėjo įrankius spustelėję tris taškus viršutiniame dešiniajame ekrano kampe. Eikite į Daugiau įrankių ir pasirinkite Kurejo irankiai . Kitas variantas-dešiniuoju pelės mygtuku spustelėkite tinklalapį ir spustelėkite Patikrinkite variantas.



„Chrome“ kūrėjo įrankių naudojimas svetainių diagnostikai

„Chrome DevTools“ siūlo kelis būdus, kaip patobulinti ir pašalinti tinklalapio triktis. Pažvelkime į keletą būdų, kaip „DevTools“ gali jums padėti.

Pažiūrėkite, kaip jūsų svetainė atrodo išmaniajame telefone

Kai perjungiate „Chrome“ naršyklę į kūrėjo režimą, ji pateikia pusės dydžio jūsų tinklalapio versiją. Tačiau tai nesuteiks jums tikro vaizdo, kaip tai atrodytų išmaniajame telefone ar planšetiniame kompiuteryje.



Laimei, be to, kad nustatote tinklalapio ekrano dydį, „Chrome DevTools“ taip pat leidžia perjungti skirtingus mobiliųjų ekranų tipus ir versijas.

Norėdami pasiekti šią parinktį, įjunkite Patikrinkite režimu. Toliau spustelėkite Atsakingas išskleidžiamajame meniu viršutiniame kairiajame „DevTools“ kampe ir pasirinkite pageidaujamą mobilųjį įrenginį. Tada tinklalapis atvaizduojamas ir prisitaiko prie jūsų pasirinkto mobiliojo įrenginio dydžio.

Kaip atsisiųsti serijas iš hulu

Pasiekite tinklalapio šaltinio failus

Failus, kurie sudaro tinklalapį, galite pasiekti naudodami „Chrome DevTools“. Norėdami pasiekti šiuos failus, spustelėkite Šaltiniai parinktį viršutinėje „DevTools“ meniu dalyje. Tai atskleidžia svetainės failų sistemą ir suteikia galimybę redaguoti.

Taip pat galite ieškoti šaltinio failų, kurie gali būti naudingi, kai dirbate su tinklalapiu, kuriame yra daug išteklių. Norėdami ieškoti šaltinio failo naudodami „DevTools“, spustelėkite Paieška parinktis tiesiai virš konsolės.

Tačiau, jei nerandate Paieška parinktis, geresnė alternatyva yra naudoti sparčiuosius klavišus. „Mac OS“ sistemoje paspauskite Cmd + Opt + F klavišus šaltinio failo paieškai. Jei naudojate „Windows“ OS, paspauskite „Ctrl“ + „Shift“ + F. klavišą, kad pasiektumėte šaltinio failo paieškos juostą.

Atlikite tiesioginius tinklalapio redagavimus

Vienas iš pagrindinių „DevTools“ naudojimo tikslų yra atlikti momentinis netikras tinklalapio elementų redagavimas . Kai perjungiate kūrėjo įrankius, galite redaguoti svetainės HTML turinį spustelėdami Elementai variantas. Tada dešiniuoju pelės mygtuku spustelėkite bet kurį tašką, kuriam norite taikyti pakeitimus kodo redaktoriuje, ir pasirinkite Redaguoti kaip HTML .

Jei norite redaguoti neįtrauktas CSS ypatybes, pasirinkite Šaltiniai . Tada pasirinkite CSS failą, kurį norite redaguoti. Norėdami atlikti tiesioginį redagavimą, užveskite žymeklį ant pasirinktos kodo konsolės eilutės. Tai atlikę gausite tiesioginį atsiliepimą apie bet kokius tinklalapiui taikomus stiliaus pakeitimus.

Atminkite, kad kai redaguojate puslapį naudodami „DevTools“, iš naujo įkeliant puslapį į naršyklę, jis grąžinamas į pradinę formą ir redagavimas matomas tik jums. Redagavimas naudojant „DevTools“ neturi įtakos sklandžiam šios svetainės veikimui ir naudojimui kitiems vartotojams.

Derinkite „JavaScript“ kodą naudodami „DevTools“ konsolę

Vienas iš geriausių „JavaScript“ derinimo būdų yra „Chrome“ kūrėjo įrankių naudojimas. Tai suteikia tiesioginę ataskaitą apie netinkamus scenarijus ir tikslią klaidos vietą.

Gera praktika kuriant svetainę naudojant „JavaScript“ visada išlaikyti „DevTools“ atidarytą. Pavyzdžiui, paleidus console.log () „JavaScript“ komanda instrukcijų rinkinyje rodo to žurnalo rezultatą „DevTools“ konsolėje, jei programa sėkmingai veikia.

Pagal numatytuosius nustatymus konsolė praneša apie visas jūsų svetainės „JavaScript“ problemas. Konsolę galite rasti apatinėje „DevTools“ dalyje arba pasiekti ją spustelėdami Konsolė parinktį „Chrome DevTools“ lango viršuje.

Stebėkite išteklių įkėlimą iš duomenų bazės

Be „JavaScript“ derinimo, konsolė taip pat gali suteikti jums išsamios informacijos apie išteklius, kurie netinkamai įkeliami iš svetainės duomenų bazės.

Nors tai ne visada yra geriausias būdas pašalinti pagrindinės programos problemas, jis vis tiek nurodo, kurie ištekliai grąžinami 404 klaida paleidus tų elementų duomenų bazės užklausą.

Susijęs: Dažnos svetainės klaidos ir ką jos reiškia

Pakeiskite „Chrome“ kūrėjo įrankių orientaciją

Norėdami pakeisti „Chrome“ kūrėjo įrankių padėtį, „DevTools“ spustelėkite tris meniu taškus (ne pagrindinį naršyklėje). Tada pasirinkite norimą poziciją iš Prieplaukos pusė variantas.

Įdiekite „Chrome DevTools“ plėtinius

Taip pat galite įdiegti konkrečiai kalbai ar sistemai skirtus plėtinius, kurie veikia su „Chrome DevTools“. Įdiegę šiuos plėtinius galite efektyviau derinti tinklalapį.

„Chrome“ naršyklėje galite pasiekti galimų „Chrome DevTools“ plėtinių sąrašą Siūlomi „DevTools“ plėtiniai galerija.

Patikrinkite, ar svetainėje nėra saugos problemų

„Chrome DevTools“ leidžia įvertinti jūsų svetainės saugumą, atsižvelgiant į tokius parametrus kaip, pvz., Pasiekiamumas žiniatinklio saugos sertifikatai ir kaip saugus ryšys, be kita ko. Norėdami patikrinti, ar jūsų svetainė yra saugi, spustelėkite Saugumas parinktį „DevTools“ viršuje.

The Saugumas skirtuke pateikiama jūsų svetainės saugos informacijos apžvalga ir nurodomos galimos grėsmės.

Audituokite savo svetainę

„Chrome DevTools“ turi funkciją, leidžiančią patikrinti bendrą svetainės našumą pagal konkrečius parametrus.

Norėdami pasiekti šią funkciją, pasirinkite Švyturys parinktį „DevTools“ lango viršuje. Tada pasirinkite parametrus, kuriuos norite patikrinti, tada pažymėkite arba Mobilus arba Stalinis kompiuteris parinktis, kad pamatytumėte, kaip jūsų tinklalapis veikia skirtingose ​​platformose.

Toliau spustelėkite Sukurti ataskaitą atlikti jūsų tinklalapio analizę pagal anksčiau pasirinktus parametrus.

Taip pat galite įvertinti svetainės veikimo ar įkėlimo našumą spustelėdami Spektaklis variantas. Norėdami atlikti testą, spustelėkite piktogramą šalia Spustelėkite įrašymo mygtuką galimybė atlikti vykdymo laiko analizę. Arba spustelėkite po juo esantį perkrovimo mygtuką, kad įvertintumėte įkėlimo laiko našumą. Spustelėkite Sustabdyti sustabdyti analizatorių ir rodyti rezultatus.

Pasinaudokite „Chrome DevTools“ pranašumais

Priklausomai nuo to, kam jums to reikia, „Chrome DevTools“ leidžia atlikti ne tik paprastą svetainės derinimą. Laimei, „DevTools“ lengva naudoti visų įgūdžių programuotojams. Jūs netgi galite išmokti kai kurių svetainių sąsajos kūrimo pagrindų, ieškodami aplankytų svetainių šaltinio kodo.

kaip įjungti blykstę „Chrome“

Taip pat galite atrasti kitų variantų, apie kuriuos šiame straipsnyje neaptarėme. Taigi, nedvejodami žaiskite su turimomis funkcijomis. Be to, šių funkcijų koregavimas nedaro jokios žalos svetainei.

Dalintis Dalintis „Tweet“ Paštu Kaip naudoti „Chrome“ OS „Raspberry Pi“

Negalite sau leisti „Chromebook“? Ieškote alternatyvos Raspbian? Štai kaip „Raspberry Pi“ įdiegti „Chrome“ OS versiją.

Skaityti toliau Susijusios temos
  • internetas
  • Programavimas
  • HTML
  • Interneto svetainių kūrimas
  • „JavaScript“
  • „Google Chrome“
Apie autorių Idisou Omisola(Paskelbti 94 straipsniai)

Idowu aistringai domisi visomis išmaniosiomis technologijomis ir produktyvumu. Laisvalaikiu jis žaidžia koduodamasis ir nuobodžiai persijungia į šachmatų lentą, tačiau taip pat mėgsta retkarčiais atitrūkti nuo rutinos. Jo aistra parodyti žmonėms kelią aplink šiuolaikines technologijas skatina jį daugiau rašyti.

Daugiau iš Idowu Omisola

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia