Chrome DevTools: Elements, Console ja Network
Siirry Elements-, Console- ja Network-paneeleissa, jotta voit tarkastella tyylejä, etsiä JavaScript-virheitä ja seurata HTTP-pyyntöjä.
Chrome DevTools: Elements, Console ja Network on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
DevToolsin tehokas avaaminen
Napsauttakaa mitä tahansa elementtiä hiiren oikealla painikkeella ja valitkaa Inspect, jolloin DevTools avautuu kyseinen elementti valittuna. F12 näyttää paneelin tai piilottaa sen. Cmd+Shift+C (Mac) tai Ctrl+Shift+C (Windows) siirtyy suoraan tarkastelutilaan avaamatta koko paneelia.
Elements-paneeli — DOM-tarkastin
Elements-paneeli näyttää reaaliaikaisen, jäsennetyn DOM-puun — ei raakaa HTML-lähdekoodia. Se heijastaa JavaScriptin tekemiä muutoksia. Korostakaa solmu sivulla viemällä hiiren sen päälle. Muokatkaa HTML:ää suoraan kaksoisnapsauttamalla.
Styles- ja Computed-paneelit
Kun elementti on valittuna, Styles-paneeli näyttää kaikki käytössä olevat CSS-säännöt spesifisyyden mukaan järjestettyinä. Yliviivatut säännöt on ohitettu. Computed-paneeli näyttää kaikkien ominaisuuksien lopulliset lasketut arvot.
Elementtien tilojen pakottaminen
Napsauttakaa Styles-paneelin :hov-painiketta pakottaaksenne CSS-tilan, kuten :hover-, :focus-, :active- tai :visited-tilan. Näin voitte tarkastella hover-tyylejä pitämättä kohdistinta täydellisesti paikallaan.
Box modelin visualisointi
Computed-paneeli näyttää vuorovaikutteisen box model -kaavion: sisällön, paddingin, borderin ja marginin. Näette kunkin alueen arvon viemällä hiiren sen päälle. Muokatkaa margin- ja padding-arvoja suoraan napsauttamalla niitä.
Konsolin perusteet — lokitus ja koodin suorittaminen
Console näyttää virheet, varoitukset ja lokit. Kirjoittakaa mikä tahansa JavaScript-lauseke ja suorittakaa se painamalla Enter, jolloin se arvioidaan reaaliaikaisella sivulla. Käyttäkää Consolea vuorovaikutteisena REPL-ympäristönä koodinpätkien välittömään testaamiseen.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Console-API:n metodit
console.log-metodin lisäksi käytettävissä ovat console.warn() (keltainen varoitus), console.error() (punainen virhe), console.table() (esittää taulukon tai olion taulukkona), console.group() ja console.groupEnd() ryhmiteltyä tulostetta varten sekä console.time() ajan mittaamiseen.
Network-paneelin yleiskatsaus
Jokainen HTTP-pyyntö (HTML, JS, CSS, kuvat, XHR, Fetch) näkyy omana rivinään. Sarakkeissa näkyvät metodi, tila, koko ja ajoitus. Näette pyynnön ja vastauksen kaikki tiedot napsauttamalla riviä.
Verkkopyyntöjen suodattaminen
Voitte hakea URL-osoitteen perusteella suodatinpalkilla tai suodattaa tyypin mukaan: All, XHR/Fetch, JS, CSS, Img, Media, Font, WS. XHR/Fetch-suodatin on hyödyllisin, kun selvitätte JavaScriptin tekemiä API-kutsuja.
Pyyntöjen ja vastausten tarkastelu
Valitkaa verkkopyyntö, niin näette seuraavat tiedot: Headers (pyynnön ja vastauksen otsakkeet), Preview (muotoiltu JSON/HTML), Response (raaka runko) ja Timing (yhteyden vaiheet). Payload-välilehti näyttää POST-rungon parametrit.
Throttling — hitaiden verkkojen simulointi
Simuloikaa hidasta yhteyttä napsauttamalla throttling-pudotusvalikkoa (oletus: No throttling) ja valitsemalla Slow 3G, Fast 3G tai Offline. Disable cache -valintaruutu estää selainta käyttämästä välimuistissa olevia resursseja testauksen aikana.
Pikatarkistus
Mistä Chrome DevToolsin kohdasta näette kaikki valitun elementin CSS-säännöt, myös ohitetut?
Kertaus: Chrome DevToolsin paneelit
Elements: tarkastelkaa ja muokatkaa reaaliaikaista DOM-puuta ja CSS:ää. Pakottakaa pseudotilat hover-tyylien tarkastelemiseksi. Console: lokittakaa, selvittäkää ongelmia ja suorittakaa JavaScriptiä reaaliajassa. Network: seuratkaa kaikkia HTTP-pyyntöjä, tarkastelkaa otsakkeita ja vastauksia sekä simuloikaa hitaita yhteyksiä throttling-toiminnolla.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Chrome DevTools: Elements, Console ja Network” ilmainen?
Kyllä – oppitunnin ”Chrome DevTools: Elements, Console ja Network” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Chrome DevTools: Elements, Console ja Network”?
Siirry Elements-, Console- ja Network-paneeleissa, jotta voit tarkastella tyylejä, etsiä JavaScript-virheitä ja seurata HTTP-pyyntöjä. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Chrome DevTools: Elements, Console ja Network”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Chrome DevTools: Elements, Console ja Network
- VSCode: laajennukset, Emmet ja pikanäppäimet
- Prettier- ja ESLint-asetukset
- Selainten yhteensopivuus ja caniuse.com