Mille Chrome DevTools on tarkoitettu?

Näyttökuva Chrome DevToolsista

Chrome DevTools -sovelluksen avulla näemme välittömästi koodin muutosten vaikutukset

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


Ole ensimmäinen kommentti

Jätä kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

*

*

  1. Vastaa tiedoista: AB Internet Networks 2008 SL
  2. Tietojen tarkoitus: Roskapostin hallinta, kommenttien hallinta.
  3. Laillistaminen: Suostumuksesi
  4. Tietojen välittäminen: Tietoja ei luovuteta kolmansille osapuolille muutoin kuin lain nojalla.
  5. Tietojen varastointi: Occentus Networks (EU) isännöi tietokantaa
  6. Oikeudet: Voit milloin tahansa rajoittaa, palauttaa ja poistaa tietojasi.