Kako z orodji Chrome DevTools odpraviti težave s spletnim mestom

Kako z orodji Chrome DevTools odpraviti težave s spletnim mestom

Chrome DevTools je bistveno sredstvo za razvijalce. Medtem ko drugi brskalniki ponujajo precej priročna orodja za odpravljanje težav, je Chrome DevTools vreden vaše pozornosti zaradi svojega večnamenskega vmesnika in priljubljenosti.





Chrome je zaradi močnega nabora orodij za odpravljanje napak najbolj priljubljen brskalnik za razvijalce. Uporaba orodij Chrome DevTools je preprosta, vendar morate razumeti, kako deluje, da kar najbolje izkoristite.



Kako delujejo orodja za razvijalce za Chrome

Chrome DevTools vam omogoča reševanje težav na spletnem mestu prek konzole za napake in drugih orodij za odpravljanje napak in spremljanja. Z uporabo DevTools odkrijete vrzeli na zunanjih straneh in vam omogoča, da spremljate, kako je vaše spletno mesto prikazano v mobilnih in tabličnih napravah.





Z orodji DevTools lahko urejate kodo spletnega mesta v realnem času, na primer JavaScript, HTML in CSS, in tako dobite takojšnje rezultate svojih sprememb.

Spremembe, ki jih naredite prek DevTools, ne vplivajo trajno na spletno mesto. Začasno prikažejo pričakovani rezultat, kot če bi jih uporabili za dejansko izvorno kodo. Tako lahko določite načine za hitrejše nalaganje spletnega mesta in olajšate odpravljanje hroščev.



Kako dostopati do orodij za razvijalce Chrome

Do orodij Chrome DevTools lahko dostopate na več načinov. Če želite odpreti orodja za razvijalce z metodo bližnjice v sistemu Mac OS, pritisnite Cmd + Opt + I . Če uporabljate operacijski sistem Windows, pritisnite Ctrl + Shift + I tipke na tipkovnici.

Druga možnost je, da dostopate do orodij za razvijalce za Chrome s klikom na tri pike v zgornjem desnem kotu zaslona. Namenjen Več orodij in izberite Orodja za razvijalce . Druga možnost je, da z desno miškino tipko kliknete spletno stran in kliknete na Preglejte možnost.



Uporaba orodij za razvijalce Chrome za diagnosticiranje spletnih mest

Chrome DevTools ponuja več načinov za popravljanje in odpravljanje težav na spletni strani. Oglejmo si nekaj načinov, kako vam lahko DevTools pomaga.

Oglejte si, kako izgleda vaše spletno mesto na pametnem telefonu

Ko brskalnik Chrome preklopite v način za razvijalce, bo upodobil polovico različice vaše spletne strani. Vendar vam to ne bo dalo pravega pogleda na to, kako bi bilo videti na pametnem telefonu ali tabličnem računalniku.



Na srečo vam Chrome DevTools poleg nastavitve velikosti zaslona spletne strani omogoča tudi preklapljanje med različnimi vrstami in različicami zaslona za mobilne naprave.

Za dostop do te možnosti vklopite Preglejte način. Nato kliknite na Odziven spustnem meniju v zgornjem levem kotu DevTools in izberite želeno mobilno napravo. Spletna stran se nato upodobi in prilagodi velikosti izbrane mobilne naprave.

kako prenesti svoje fotografije na instagramu

Dostop do izvornih datotek spletne strani

Do datotek, ki sestavljajo spletno stran, lahko dostopate prek Chrom DevTools. Za dostop do teh datotek kliknite na Viri možnost v zgornjem delu menija DevTools. To razkrije datotečni sistem spletnega mesta in vam omogoča tudi urejanje.

Iščete lahko tudi izvorne datoteke, kar je lahko v pomoč, ko imate opravka s spletno stranjo, ki vsebuje veliko virov. Če želite iskati izvorno datoteko prek DevTools, kliknite na Iskanje možnost tik nad konzolo.

Če pa ne najdete Iskanje možnost, boljša alternativa je uporaba bližnjic na tipkovnici. V operacijskem sistemu Mac OS pritisnite Cmd + Opt + F tipke za iskanje izvorne datoteke. Če uporabljate operacijski sistem Windows, pritisnite Ctrl + Shift + F. za dostop do vrstice za iskanje izvorne datoteke.

Izvedite urejanje spletne strani v živo

Eden glavnih namenov uporabe DevTools je izvajanje takojšnje ponarejeno urejanje elementov na spletni strani . Ko preklopite na orodja za razvijalce, lahko vsebino HTML spletnega mesta uredite s klikom na Elementi možnost. Nato v urejevalniku kode z desno miškino tipko kliknite katero koli točko, za katero želite uporabiti spremembe, in izberite Uredite kot HTML .

Če želite urediti lastnosti CSS, ki niso vgrajene, izberite Viri . Nato izberite datoteko CSS, ki jo želite urediti. Za izvedbo urejanja v živo postavite kazalec na izbrano vrstico v kodni konzoli. S tem boste dobili takojšnje povratne informacije o vseh spremembah sloga, ki jih uporabite za spletno stran.

Upoštevajte, da ko urejate stran prek orodij DevTools, jo ob ponovnem nalaganju strani v brskalniku vrnete v prvotno obliko, urejanje pa vidite samo vi. Urejanje prek DevTools ne vpliva niti na nemoteno delovanje niti na uporabo tega spletnega mesta za druge uporabnike.

Odpravljanje napak kode JavaScript s konzolo DevTools

Eden najboljših načinov za odpravljanje napak JavaScript je uporaba Chromovih orodij za razvijalce. Ponuja neposredno poročilo o neveljavnih skriptah in natančno lokacijo hrošča.

Pri oblikovanju spletnega mesta z JavaScriptom je dobra praksa, da je DevTools vedno odprt. Na primer, zaženite datoteko console.log () ukaz JavaScript na nizu navodil prikaže rezultat tega dnevnika v konzoli DevTools, če se program uspešno zažene.

Konzola privzeto poroča o vseh težavah s JavaScript na vašem spletnem mestu. Konzolo najdete v spodnjem delu DevTools ali do nje dostopate s klikom na Konzola možnost na vrhu okna DevTools za Chrome.

Spremljajte nalaganje virov iz baze podatkov

Poleg odpravljanja napak v JavaScriptu lahko konzola poda tudi podrobnosti o virih, ki se ne nalagajo pravilno iz baze podatkov spletnega mesta.

Čeprav to ni vedno najboljši način za odpravljanje napak pri zaledju, vam vseeno pove, kateri viri vračajo a 404 napaka po izvajanju poizvedbe v zbirko podatkov teh elementov.

Povezano: Pogoste napake spletnega mesta in njihov pomen

Preklopite na smer orodja za razvijalce za Chrome

Če želite spremeniti položaj orodij za razvijalce za Chrome, kliknite tri pike menija v orodju DevTools (ne glavno v brskalniku). Nato izberite želeni položaj iz Priklopna stran možnost.

Namestite razširitve za Chrome DevTools

Namestite lahko tudi jezikovne ali okvirne razširitve, ki delujejo z orodji Chrome DevTools. Namestitev teh razširitev vam omogoča učinkovitejše odpravljanje napak na vaši spletni strani.

Dostopate lahko do seznama razširitev za Chrome DevTools, ki so na voljo v Chromovih orodjih Predstavljene razširitve DevTools galerija.

Preverite varnostne težave na spletnem mestu

Chrome DevTools vam omogoča, da na podlagi parametrov, kot je razpoložljivost, ocenite, kako varno je vaše spletno mesto certifikati za spletno varnost in kako varna je med drugim povezava. Če želite preveriti, ali je vaše spletno mesto varno, kliknite na Varnost možnost na vrhu orodij DevTools.

The Varnost zavihek ponuja pregled varnostnih podrobnosti vašega spletnega mesta in vam pove morebitne grožnje.

Revidirajte svojo spletno stran

Chrome DevTools ima funkcijo, ki vam omogoča, da na podlagi posebnih parametrov preverite splošno uspešnost svojega spletnega mesta.

Za dostop do te funkcije izberite Svetilnik možnost na vrhu okna DevTools. Nato izberite parametre, ki jih želite preveriti, nato označite polje Mobilni ali Namizni računalnik možnosti za ogled uspešnosti vaše spletne strani na različnih platformah.

Nato kliknite na Ustvari poročilo za izvedbo analize vaše spletne strani na podlagi parametrov, ki ste jih izbrali prej.

Prav tako lahko ocenite čas delovanja ali nalaganje spletne strani s klikom na Izvedba možnost. Če želite zagnati preskus, kliknite ikono poleg Kliknite gumb za snemanje možnost izvedbe analize med izvajanjem. Druga možnost je, da kliknete gumb za ponovno nalaganje pod njim, da ocenite učinkovitost nalaganja. Kliknite na Stop zaustaviti analizator in prikazati rezultate.

Izkoristite Chrome DevTools

Odvisno od tega, za kaj ga potrebujete, vam Chrome DevTools omogoča več kot le preprosto odpravljanje napak na spletnem mestu. Na srečo so DevTools enostavni za uporabo za programerje vseh ravni znanja. Lahko se celo naučite nekaj osnov razvoja spletnih strani, tako da poiščete izvorno kodo spletnih mest, ki jih obiščete.

kako videti, kdo vas ni spremljal na instagramu

Morda boste odkrili tudi nekatere druge možnosti, o katerih v tem članku nismo razpravljali. Zato se poigrajte z razpoložljivimi funkcijami. Poleg tega spreminjanje teh funkcij ne škoduje spletnemu mestu.

Deliti Deliti Cvrkutati E-naslov Kako uporabljati Chrome OS na Raspberry Pi

Si ne morete privoščiti Chromebooka? Iščete alternativo Raspbian? Tukaj je opisano, kako namestite različico Chrome OS na svoj Raspberry Pi.

Preberite Naprej Sorodne teme
  • Internet
  • Programiranje
  • HTML
  • Spletni razvoj
  • JavaScript
  • Google Chrome
O avtorju Idisou Omisola(94 objavljenih člankov)

Idowu je navdušen nad vsemi pametnimi tehnologijami in produktivnostjo. V prostem času se igra s kodiranjem in se, ko mu je dolgčas, preklopi na šahovsko tablo, rad pa se občasno tudi odmika od rutine. Njegova strast, da ljudem pokaže pot okoli sodobne tehnologije, ga motivira, da piše več.

Več od Idowu Omisola

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti