Home-theater-designers
Chrome DevTools on kehittäjille tärkeä voimavara. Vaikka muut selaimet tarjoavat melko käteviä vianmääritystyökaluja, Chrome DevTools on huomion arvoinen sen monikäyttöisen käyttöliittymän ja suosion vuoksi.
Chrome on kehittäjien suosituin selain tehokkaiden virheenkorjaustyökalujen ansiosta. Chrome DevToolsin käyttäminen on helppoa, mutta sinun on ymmärrettävä, miten se toimii, jotta saat kaiken irti.
Chromen kehittäjätyökalujen toiminta
Chrome DevToolsin avulla voit ratkaista verkkosivuston ongelmia sen virhekonsolin ja muiden virheenkorjaus- ja valvontatyökalujen kautta. DevToolsin käyttäminen paljastaa käyttöliittymän porsaanreikiä ja mahdollistaa sen, miten verkkosivustosi näkyy mobiili- ja tablet -laitteissa.
DevToolsin avulla voit tehdä reaaliaikaisia muokkauksia verkkosivuston koodiin, kuten JavaScriptiin, HTML: ään ja CSS: ään, ja saada välittömiä tuloksia tekemistäsi muutoksista.
DevToolsin kautta tekemäsi muutokset eivät vaikuta verkkosivustoon pysyvästi. Ne näyttävät odotetun tuloksen vain väliaikaisesti ikään kuin olisit soveltanut niitä todelliseen lähdekoodiin. Näin voit selvittää tapoja saada verkkosivustosi latautumaan paljon nopeammin ja helpottaa virheiden poistamista.
Chrome DevToolsin käyttäminen
Voit käyttää Chrome DevToolsia useilla tavoilla. Voit avata kehittäjätyökalut Mac OS -käyttöjärjestelmän pikavalintamenetelmällä painamalla Cmd + Opt + I . Jos käytät Windows -käyttöjärjestelmää, paina Ctrl + Vaihto + I näppäimistön näppäimiä.
Vaihtoehtoisesti voit käyttää Chrome-kehittäjätyökaluja napsauttamalla näytön oikeassa yläkulmassa olevia kolmea pistettä. Suunnata Lisää työkaluja ja valitse Kehitystyökalut . Toinen vaihtoehto on napsauttaa verkkosivua hiiren kakkospainikkeella ja napsauttaa Tarkastaa vaihtoehto.
Chromen kehittäjätyökalujen käyttäminen verkkosivuston diagnosointiin
Chrome DevTools tarjoaa useita tapoja verkkosivun säätämiseen ja vianmääritykseen. Katsotaanpa joitain tapoja, joilla DevTools voi auttaa sinua.
Katso, miltä verkkosivustosi näyttää älypuhelimella
Kun vaihdat Chrome-selaimesi kehittäjätilaan, se hahmottaa verkkosivustosi puolikokoisen version. Tämä ei kuitenkaan anna sinulle todellista kuvaa siitä, miltä se näyttäisi älypuhelimella tai tabletilla.
Onneksi verkkosivun näytön koon asettamisen lisäksi Chrome DevToolsin avulla voit myös vaihtaa eri mobiilinäyttötyyppien ja -versioiden välillä.
Voit käyttää tätä vaihtoehtoa vaihtamalla Tarkastaa -tilaan. Napsauta seuraavaksi Reagoiva avattavasta valikosta DevToolsin vasemmassa yläkulmassa ja valitse haluamasi mobiililaite. Verkkosivu hahmottuu ja mukautuu valitun mobiililaitteen koon mukaan.
parhaat sivustot ilmaisten elokuvien suoratoistoon
Avaa verkkosivun lähdetiedostot
Voit käyttää verkkosivun muodostavia tiedostoja Chrome DevToolsin avulla. Pääset näihin tiedostoihin napsauttamalla Lähteet vaihtoehto DevTools -valikon yläosassa. Tämä paljastaa verkkosivuston tiedostojärjestelmän ja mahdollistaa myös muokkaamisen.
Voit myös etsiä lähdetiedostoja, joista voi olla apua, kun käsittelet verkkosivustoa, jolla on paljon resursseja. Jos haluat etsiä lähdetiedostoa DevToolsin kautta, napsauta Hae vaihtoehto konsolin yläpuolella.
Jos et kuitenkaan löydä Hae vaihtoehto, parempi vaihtoehto on käyttää pikanäppäimiä. Mac OS -käyttöjärjestelmässä paina Cmd + Opt + F näppäimillä lähdetiedoston etsimiseksi. Jos käytät Windows -käyttöjärjestelmää, paina Ctrl + Vaihto + F. -näppäintä päästäksesi lähdetiedoston hakupalkkiin.
Suorita Web -sivun live -muokkaukset
Yksi DevToolsin käytön päätavoitteista on suorittaa verkkosivun elementtien välitön väärennösmuokkaus . Kun olet siirtynyt kehittäjätyökaluihin, voit muokata verkkosivuston HTML -sisältöä napsauttamalla Elementit vaihtoehto. Napsauta sitten hiiren kakkospainikkeella mitä tahansa kohtaa, johon haluat tehdä muutoksia koodieditorissa, ja valitse Muokkaa HTML -muodossa .
Jos haluat muokata CSS -ominaisuuksia, jotka eivät ole upotettuja, valitse Lähteet . Valitse seuraavaksi muokattava CSS -tiedosto. Vie kursori haluamallesi riville koodikonsolissa suorittaaksesi muokkauksen. Tämä antaa sinulle välittömän palautteen kaikista verkkosivulle tekemistäsi tyylimuutoksista.
Huomaa, että kun muokkaat sivua DevToolsin avulla, sivun lataaminen uudelleen selaimellasi palauttaa sen alkuperäiseen muotoonsa ja muokkaus näkyy vain sinulle. Muokkaus DevToolsin kautta ei vaikuta kyseisen sivuston sujuvaan toimintaan eikä muuhun käyttöön.
Debug JavaScript Code with DevTools Console
Yksi parhaista tavoista korjata JavaScript on Chromen kehittäjätyökalujen käyttäminen. Se antaa sinulle suoran raportin virheellisistä skripteistä sekä virheen tarkan sijainnin.
On hyvä käytäntö pitää DevTools aina auki, kun suunnittelet verkkosivustoa JavaScriptillä. Esimerkiksi suorittamalla console.log () JavaScript -komento ohjeissa näyttää kyseisen lokin tuloksen DevTools -konsolissa, jos ohjelma toimii onnistuneesti.
Oletuksena konsoli ilmoittaa kaikista JavaScript -ongelmista verkkosivustollasi. Löydät konsolin DevToolsin alaosasta tai voit käyttää sitä napsauttamalla Konsoli vaihtoehto Chrome DevTools -ikkunan yläreunassa.
Seuraa resurssien lataamista tietokannasta
JavaScript -virheenkorjauksen lisäksi konsoli voi myös antaa sinulle yksityiskohtaisia tietoja resursseista, jotka eivät lataudu oikein verkkosivuston tietokannasta.
Vaikka tämä ei ole aina paras tapa korjata taustaongelmia, se kertoo silti, mitkä resurssit palauttavat a 404 virhe näiden elementtien tietokantakyselyn suorittamisen jälkeen.
Aiheeseen liittyviä: Yleisiä verkkosivustovirheitä ja niiden merkitys
Vaihda Chrome -kehittäjätyökalujen suunta
Jos haluat muuttaa Chrome -kehittäjätyökalujen sijaintia, napsauta DevToolsin kolmea valikkopistettä (ei selaimen tärkeintä). Valitse sitten haluamasi sijainti Telakan puoli vaihtoehto.
Asenna Chrome DevTools -laajennukset
Voit myös asentaa kieli- tai kehyskohtaisia laajennuksia, jotka toimivat Chrome DevToolsin kanssa. Näiden laajennusten asentamisen avulla voit korjata verkkosivusi virheenkorjauksen tehokkaammin.
Voit tarkastella Chrome DevToolsin laajennusten luetteloa Chromessa Suositellut DevTools -laajennukset galleria.
Tarkista tietoturvaongelmat verkkosivustolta
Chrome DevToolsin avulla voit arvioida, kuinka turvallinen verkkosivustosi on esimerkiksi sen saatavuuden perusteella Web -turvavarmenteet ja kuinka turvallinen yhteys on mm. Jos haluat tarkistaa, onko verkkosivustosi suojattu, napsauta Turvallisuus vaihtoehto DevToolsin yläosassa.
The Turvallisuus -välilehdessä on yleiskatsaus verkkosivustosi suojaustiedoista ja mahdolliset uhat.
Tarkasta verkkosivustosi
Chrome DevToolsissa on ominaisuus, jonka avulla voit tarkistaa verkkosivustosi yleisen suorituskyvyn tiettyjen parametrien perusteella.
Voit käyttää tätä ominaisuutta valitsemalla Majakka vaihtoehto DevTools -ikkunan yläreunassa. Valitse seuraavaksi tarkistettavat parametrit ja valitse sitten joko Matkapuhelin tai Työpöytä vaihtoehtoja nähdäksesi, miten verkkosivusi toimii eri alustoilla.
Napsauta seuraavaksi Luo raportti suorittaaksesi verkkosivusi analyysin aiemmin valitsemiesi parametrien perusteella.
Voit myös arvioida verkkosivuston käyttöaikaa tai lataustehoa napsauttamalla Esitys vaihtoehto. Jos haluat suorittaa testin, napsauta sen vieressä olevaa kuvaketta Napsauta tallennuspainiketta mahdollisuus suorittaa ajonaikainen analyysi. Vaihtoehtoisesti napsauta sen alla olevaa uudelleenlatauspainiketta arvioidaksesi latausaika. Klikkaa Lopettaa pysäyttääksesi analysaattorin ja näyttääksesi tulokset.
Hyödynnä Chrome DevToolsin etuja
Riippuen siitä, mihin sitä tarvitset, Chrome DevToolsin avulla voit tehdä muutakin kuin vain yksinkertaista verkkosivustojen virheenkorjausta. Onneksi DevTools on helppokäyttöinen kaikentasoisille ohjelmoijille. Voit jopa oppia joitain verkkosivustojen käyttöliittymän kehittämisen perusteita etsimällä käyttämiesi sivustojen lähdekoodin.
miten ladata windows 10 usb: lle
Saatat myös löytää muita vaihtoehtoja, joista emme keskustelleet tässä artikkelissa. Joten voit vapaasti pelata käytettävissä olevilla ominaisuuksilla. Lisäksi näiden ominaisuuksien säätäminen ei vahingoita verkkosivustoa hiukan.
Jaa Jaa Tweet Sähköposti Chrome -käyttöjärjestelmän käyttäminen Raspberry Pi -laitteessaEikö sinulla ole varaa Chromebookiin? Etsitkö vaihtoehtoa Raspbianille? Näin asennat Chrome -käyttöjärjestelmän version Raspberry Pi -laitteeseesi.
Lue seuraava Liittyvät aiheet- Internet
- Ohjelmointi
- HTML
- Verkkokehitys
- JavaScript
- Google Chrome
Idowu on intohimoinen kaikkeen älykkääseen tekniikkaan ja tuottavuuteen. Vapaa -ajallaan hän leikkii koodauksella ja vaihtaa shakkilaudalle, kun on kyllästynyt, mutta hän myös rakastaa irtautumista rutiinista silloin tällöin. Hänen intohimonsa näyttää ihmisille tie modernin tekniikan ympärillä motivoi häntä kirjoittamaan enemmän.
Lisää Idowu Omisolastatilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi