Kako koristiti Chrome DevTools za rješavanje problema s web stranicama

Kako koristiti Chrome DevTools za rješavanje problema s web stranicama

Chrome DevTools bitno je za programere. Dok drugi preglednici nude prilično zgodne alate za rješavanje problema, Chrome DevTools vrijedan je vaše pažnje zbog svog višenamjenskog sučelja i popularnosti.





Chrome je najpopularniji preglednik za programere zbog svog moćnog paketa alata za ispravljanje pogrešaka. Korištenje Chrome DevTools je jednostavno, ali morate razumjeti kako to funkcionira kako biste izvukli maksimum iz njega.



Kako funkcioniraju alati za razvojne programere Chrome

Chrome DevTools omogućuje vam rješavanje problema na web stranici putem konzole za pogreške i drugih alata za otklanjanje pogrešaka i nadgledanje. Korištenje DevTools -a otkriva rupe u sučelju i omogućuje vam praćenje izgleda vaše web stranice na mobilnim i tablet uređajima.





Uz DevTools možete uređivati ​​kôd web stranice u stvarnom vremenu, poput JavaScripta, HTML-a i CSS-a, i dobiti trenutne rezultate vaših promjena.

Promjene koje napravite putem DevTools -a ne utječu trajno na web stranicu. Oni samo privremeno prikazuju očekivani ishod kao da ste ih primijenili na stvarni izvorni kod. To vam omogućuje da smislite načine za brže učitavanje vaše web stranice i olakšava ispravljanje grešaka.



Kako pristupiti Chrome DevTools

Chrome DevTools možete pristupiti na nekoliko načina. Za otvaranje alata za razvojne programere pomoću metode prečaca na Mac OS -u pritisnite Cmd + Opt + I . Ako koristite Windows OS, pritisnite Ctrl + Shift + I tipke na tipkovnici.

Alternativno, možete pristupiti alatima za razvojne programere Chrome klikom na tri točke u gornjem desnom kutu zaslona. Krenite na Više alata i odaberite Razvojni alati . Druga je mogućnost da desnom tipkom miša kliknete web stranicu i kliknete na Pregledati opcija.



Korištenje alata za razvojne programere Chrome za dijagnosticiranje web stranica

Chrome DevTools nudi nekoliko načina za dotjerivanje i rješavanje problema web stranice. Pogledajmo neke od načina na koje vam DevTools može pomoći.

Pogledajte kako vaša web stranica izgleda na pametnom telefonu

Nakon što svoj preglednik Chrome prebacite u način za programere, on prikazuje verziju vaše web stranice polovične veličine. Međutim, ovo vam neće dati pravi uvid u to kako bi to izgledalo na pametnom telefonu ili tabletu.



Srećom, osim što postavlja veličinu zaslona web stranice, Chrome DevTools omogućuje vam i prebacivanje između različitih vrsta i verzija zaslona za mobilne uređaje.

Da biste pristupili toj opciji, uključite Pregledati načinu rada. Zatim kliknite na Uzvratni padajućem izborniku u gornjem lijevom kutu DevTools i odaberite željeni mobilni uređaj. Web stranica se zatim generira i prilagođava veličini mobilnog uređaja koji ste odabrali.

nintendo prekidač se ne može povezati s mrežom

Pristupite izvornim datotekama web stranice

Pomoću Chrome DevTools možete pristupiti datotekama koje čine web stranicu. Za pristup tim datotekama kliknite na Izvori opciju u gornjem dijelu izbornika DevTools. Time se otkriva datotečni sustav web stranice i omogućuje uređivanje.

Također možete tražiti izvorne datoteke, što može biti korisno kada imate posla s web stranicom koja ima mnogo resursa. Za traženje izvorne datoteke putem DevTools -a kliknite na traži opciju tik iznad konzole.

Međutim, ako ne možete pronaći traži opcija, bolja alternativa je korištenje prečaca na tipkovnici. Na Mac OS -u pritisnite Cmd + Opt + F tipke za traženje izvorne datoteke. Ako koristite Windows OS, pritisnite Ctrl + Shift + F ključ za pristup traci za pretraživanje izvorne datoteke.

Izvršite uređivanje web -stranice uživo

Jedna od glavnih svrha korištenja DevTools -a je izvođenje trenutno lažno uređivanje elemenata na web stranici . Kad se prebacite na alate za razvojne programere, možete urediti HTML sadržaj web stranice klikom na Elementi opcija. Zatim desnom tipkom miša kliknite bilo koju točku na koju želite primijeniti promjene u uređivaču koda i odaberite Uredite kao HTML .

Da biste uredili CSS svojstva koja nisu umetnuta, odaberite Izvori . Zatim odaberite CSS datoteku koju želite urediti. Postavite pokazivač miša na liniju po izboru unutar konzole koda da biste izvršili uređivanje uživo. Time ćete dobiti trenutnu povratnu informaciju o svim promjenama stila koje primijenite na web stranici.

Imajte na umu da se prilikom uređivanja stranice putem DevTools -a ponovno učitavanje stranice u pregledniku vraća u izvorni oblik, a uređivanje je vidljivo samo vama. Uređivanje putem DevTools niti utječe na nesmetan rad niti na korištenje te web stranice za druge korisnike.

Otklonite pogreške u JavaScript kodu pomoću DevTools konzole

Jedan od najboljih načina za ispravljanje pogrešaka u JavaScriptu je korištenje Chromeovih alata za razvojne programere. Daje vam izravno izvješće o nevažećim skriptama, kao i točnu lokaciju greške.

Dobra je praksa da DevTools uvijek bude otvoren dok dizajnirate web stranicu s JavaScriptom. Na primjer, pokretanje console.log () naredba JavaScript na skupu uputa prikazuje rezultat tog dnevnika na konzoli DevTools ako se program uspješno pokrene.

Konzola prema zadanim postavkama prijavljuje sve probleme s JavaScriptom na vašoj web stranici. Konzolu možete pronaći u donjem dijelu DevTools -a ili joj pristupiti klikom na Konzola opciju pri vrhu prozora Chrome DevTools.

Pratite učitavanje resursa iz baze podataka

Osim otklanjanja pogrešaka u JavaScriptu, konzola vam može dati i detalje o resursima koji se ne učitavaju ispravno iz baze podataka web stranice.

Iako ovo nije uvijek najbolji način za rješavanje problema s pozadinom, ipak vam govori koji resursi vraćaju 404 pogreška nakon pokretanja upita u bazi podataka tih elemenata.

Povezano: Uobičajene pogreške na web stranicama i njihovo značenje

Promijenite orijentaciju alata za razvojne programere Chrome

Da biste promijenili položaj alata za razvojne programere Chrome, kliknite tri točke izbornika unutar DevTools (ne glavnu u pregledniku). Zatim odaberite željeni položaj s Priključna strana opcija.

Instalirajte Chrome DevTools proširenja

Također možete instalirati jezična ili okvirna proširenja koja rade s Chrome DevTools. Instaliranje ovih proširenja omogućuje vam učinkovitije uklanjanje pogrešaka na web stranici.

Popisu dostupnih proširenja za Chrome DevTools možete pristupiti u Chromeovim Istaknuta proširenja DevTools galerija.

Provjerite sigurnosne probleme na web stranici

Chrome DevTools omogućuje vam da procijenite koliko je vaša web stranica sigurna, na temelju parametara poput dostupnosti web sigurnosni certifikati te koliko je veza sigurna, među ostalim. Da biste provjerili je li vaša web stranica sigurna, kliknite na Sigurnost opciju na vrhu DevTools -a.

The Sigurnost kartica daje pregled sigurnosnih pojedinosti vaše web stranice i govori vam o svim potencijalnim prijetnjama.

Revidirajte svoju web stranicu

Chrome DevTools ima značajku koja vam omogućuje da provjerite ukupnu izvedbu vaše web stranice na temelju određenih parametara.

Za pristup toj značajci odaberite Svjetionik opciju na vrhu prozora DevTools. Zatim odaberite parametre koje želite provjeriti, a zatim označite ili Mobilni ili Desktop mogućnosti da vidite izvedbu svoje web stranice na različitim platformama.

Zatim kliknite na Generirajte izvješće za pokretanje analize vaše web stranice na temelju prethodno odabranih parametara.

Također možete procijeniti vrijeme izvođenja ili učitavanje web stranice klikom na Izvođenje opcija. Da biste pokrenuli test, kliknite ikonu pored Pritisnite gumb za snimanje mogućnost izvođenja analize vremena izvođenja. Alternativno, kliknite gumb za ponovno učitavanje ispod njega kako biste procijenili performanse vremena učitavanja. Kliknite na Stop za zaustavljanje analizatora i prikaz rezultata.

Iskoristite prednosti Chrome DevTools

Ovisno o tome što vam treba, Chrome DevTools omogućuje vam više od jednostavnog ispravljanja pogrešaka na web stranicama. Srećom, DevTools su jednostavni za korištenje za programere svih razina vještina. Možete čak i naučiti neke osnove razvoja sučelja web stranice tako da potražite izvorni kod web stranica koje posjećujete.

kako igrati ps3 igre na ps4

Možda ćete otkriti i neke druge mogućnosti o kojima nismo govorili u ovom članku. Dakle, slobodno se poigrajte s dostupnim značajkama. Osim toga, podešavanje ovih značajki ne šteti malo web stranici.

Udio Udio Cvrkut E -pošta Kako koristiti Chrome OS na Raspberry Pi

Ne možete si priuštiti Chromebook? Tražite alternativu Raspbian -u? Evo kako instalirati verziju Chrome OS -a na svoj Raspberry Pi.

Pročitajte Dalje Povezane teme
  • Internet
  • Programiranje
  • HTML
  • Web razvoj
  • JavaScript
  • Google Chrome
O autoru Idisou Omisola(94 objavljena članka)

Idowu je strastven u bilo čemu pametnom tehnologiji i produktivnosti. U slobodno vrijeme igra se kodiranjem i prebacuje na šahovsku ploču kad mu je dosadno, ali također voli povremeno odmaknuti se od rutine. Njegova strast prema pokazivanju ljudi suvremene tehnologije motivira ga da piše više.

Više od Idowua Omisole

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu