Chrome DevTools on a joukko verkkosivustojen luonti- ja virheenkorjaustyökaluja, jotka on rakennettu Google Chromeen. Tietenkin voimme myös käyttää niitä sen avoimen lähdekoodin versiossa; Kromi.
Voit käyttää kehittäjien Chrome-työkaluja painamalla näppäinyhdistelmää Ctrl + Shift + I, myös viemällä hiiren elementin päälle ja napsauttamalla hiiren kakkospainikkeella Tarkasta.
Komponentit
Kun avaat Chrome DevToolsin, näemme, että u ilmestyyn-paneeli selaamamme sivun oikealla puolella. Tämä paneeli omalta osaltaan eSe on jaettu välilehtiin, jotka vastaavat kutakin työkalua. Työkalut puolestaan on jaettu osiin.
Osat ovat:
- Elementit: näyttää sivun eri osat.
- Konsoli: Voit suorittaa diagnostiikan kehityksen aikana tai olla vuorovaikutuksessa Javascript-koodin kanssa kuten Linux-päätelaitteen kanssa.
- Lähteet: Helpottaa Javascript-koodin virheenkorjausta ja työskentelyä paikallisten tiedostojen kanssa.
- Verkko: Auttaa seuraamaan ja parantamaan sivun suorituskykyä.
- Aikajana: Sallii tallentaa ja tutkia erilaisia tapahtumia, jotka tapahtuvat vierailun aikana sivustolla.
- Sovellus: Tutki kaikki ladatut resurssit; muun muassa IndexedDB- tai Web SQL -tietokannat, paikallinen ja istuntotallennus, evästeet, sovelluksen välimuisti, kuvat, fontit ja tyylitaulukot.
- Suojaus: Tunnistaa koodin tietoturvaongelmat.
Katsotaan, mihin voimme käyttää Chrome DevToolsia
Korjaa mikä ei toimi
Se on tapahtunut jokaiselle kehittäjälle. Kirjoita koodi, tarkista, ettei siinä ole virheitä, ja totuushetkellä sivu ei kuitenkaan toimi niin kuin sen pitäisi. Konsoli-työkalu näyttää suorituksen aikana tapahtuvan virheen.
Pienennä latausaikaa
Jos sivun lataaminen kestää kauan, käyttäjä väsyy ja siirtyy toiselle sivustolle. Onneksi Flash-verkon ja sen animoitujen introjen ikä on ohi. Joka tapauksessa Chrome DevToolsin Verkot-välilehti on helpompaa löytää, mitkä elementit viivästyttävät kuormitusta. Voimme toistaa testin eri yhteysnopeuksille.
Muokkaa koodia
Elementit-välilehdessä voimme katso sivun elementit, niihin liittyvä HTML-koodi ja css-ominaisuudet. Voimme myös muuttaa niitä.
Voimme muokata sivun tekstiä komennolla
document.designMode = 'on';
Kokeile eri näytön kokoja
Tabletit, älypuhelimet, älytelevisiot, pöytätietokoneet. Luettelo laitteista, joilla surffailemme Internetissä, kasvaa. Chrome DevToolsin avulla voimme testaa, näyttääkö sivu hyvältä erikokoisina.
benchmarking
Johtamisessa termi benchmarking tarkoittaa oppimista niiden parhaista käytännöistä, jotka tekevät samoin kuin me. Chrome DevTolls -sovelluksella voimme pitää sisällämme verkkosivuston suunnittelun tarkastella HTML-koodia ja css-tyylitaulukoita ja kopioida ne sivustollemme.
Chrome DevTools -sovelluksen saaminen
Chrome DevTools on saatavana Google Chrome- ja Chromium-selaimissa. Kromi on tärkeimpien jakelujen arkistoissa. Se voidaan asentaa myös napsahtaa. Mitä tulee Google-kromiin, voit tule tänne. DEB- ja RPM-muodossa