Home-theater-designers
Chrome DevTools on arendajatele oluline vara. Kuigi teised brauserid pakuvad üsna mugavaid tõrkeotsingu tööriistu, on Chrome DevTools teie multifunktsionaalse liidese ja populaarsuse tõttu teie tähelepanu väärt.
Chrome on arendajate jaoks kõige populaarsem brauser tänu oma võimsale silumistööriistade komplektile. Chrome DevToolsi kasutamine on lihtne, kuid peate sellest kõige paremini aru saama, kuidas see töötab.
Kuidas Chrome'i arendustööriistad töötavad
Chrome DevTools võimaldab teil lahendada veebisaidi probleeme veakonsooli ning muude silumis- ja jälgimistööriistade kaudu. DevToolsi kasutamine avab kasutajaliidese lüngad ja võimaldab teil jälgida, kuidas teie veebisait mobiil- ja tahvelarvutites ilmub.
DevToolsi abil saate veebisaidi koodi, näiteks JavaScripti, HTML-i ja CSS-i, reaalajas muuta ja saada oma muudatuste kiireid tulemusi.
DevToolsi kaudu tehtud muudatused ei mõjuta veebisaiti püsivalt. Need kuvavad oodatud tulemuse ainult ajutiselt, justkui oleksite neid rakendanud tegelikule lähtekoodile. See võimaldab teil välja töötada viise, kuidas oma veebisaiti palju kiiremini laadida, ja hõlbustab vigade kõrvaldamist.
Kuidas pääseda juurde Chrome DevToolsile
Chrome DevToolsile pääsete juurde mitmel viisil. Arendustööriistade avamiseks otsetee meetodiga Mac OS -is vajutage Cmd + Opt + I . Kui kasutate Windowsi operatsioonisüsteemi, klõpsake nuppu Ctrl + Tõstuklahv + I klahvid klaviatuuril.
Teise võimalusena pääsete juurde Chrome'i arendustööriistadele, klõpsates ekraani paremas ülanurgas asuvat kolme punkti. Suunduge Veel tööriistu ja valige Arendaja tööriistad . Teine võimalus on paremklõps veebilehel ja klõpsata Kontrollige valik.
Chrome'i arendaja tööriistade kasutamine veebisaidi diagnoosimiseks
Chrome DevTools pakub veebisaidi kohandamiseks ja tõrkeotsinguks mitmeid viise. Vaatame mõningaid viise, kuidas DevTools teid aidata saab.
Vaadake, kuidas teie veebisait nutitelefonis välja näeb
Kui lülitate oma Chrome'i brauseri arendajarežiimi, renderdab see teie veebilehe poole väiksema versiooni. See aga ei anna teile tegelikku ülevaadet sellest, kuidas see nutitelefonis või tahvelarvutis välja näeks.
Õnneks võimaldab Chrome DevTools lisaks veebilehe ekraanisuuruse määramisele vahetada ka erinevate mobiiliekraanitüüpide ja -versioonide vahel.
Selle valiku avamiseks lülitage sisse Kontrollige režiimi. Järgmisena klõpsake nuppu Vastutulelik rippmenüüst DevToolsi vasakus ülanurgas ja valige oma eelistatud mobiilseade. Seejärel renderdatakse ja kohandatakse veebileht vastavalt teie valitud mobiilseadme suurusele.
kuidas vabastada oma arvuti mälu
Juurdepääs veebilehe lähtefailidele
Veebilehe failidele pääsete juurde Chrome DevToolsi kaudu. Nendele failidele juurdepääsemiseks klõpsake nuppu Allikad suvand menüü DevTools ülemises osas. See paljastab veebisaidi failisüsteemi ja võimaldab teil ka redigeerida.
Samuti saate otsida lähtefaile, millest võib abi olla, kui tegelete veebilehega, millel on palju ressursse. Lähtefaili otsimiseks DevToolsi kaudu klõpsake nuppu Otsing valik otse konsooli kohal.
Kui te aga ei leia Otsing valik, on parem alternatiiv kasutada kiirklahve. Mac OS -is vajutage nuppu Cmd + Opt + F klahve lähtefaili otsimiseks. Kui kasutate Windowsi operatsioonisüsteemi, vajutage Ctrl + Tõstuklahv + F. klahvi, et avada lähtefaili otsinguriba.
Tehke veebilehel reaalajas muudatusi
DevToolsi kasutamise üks peamisi eesmärke on teostada veebilehe elementide vahetu võltsredigeerimine . Kui olete arendaja tööriistadele üle läinud, saate veebisaidi HTML -i sisu muuta, klõpsates nupul Elemendid valik. Seejärel paremklõpsake mis tahes punkti, millele soovite koodiredaktoris muudatusi rakendada, ja valige Muuda HTML -ina .
Sisseehitatud CSS -i atribuutide muutmiseks valige Allikad . Seejärel valige CSS -fail, mida soovite muuta. Reaalajas redigeerimiseks viige kursor koodikonsooli valitud reale. Seda tehes saate kohest tagasisidet veebisaidi stiilimuudatuste kohta.
Pange tähele, et kui muudate lehte DevToolsi kaudu, taastab lehe brauseris uuesti laadimisel selle algse vormi ja muudatus on nähtav ainult teile. Muutmine DevToolsi kaudu ei mõjuta selle veebisaidi sujuvat toimimist ega kasutamist teiste kasutajate jaoks.
Siluge JavaScripti koodi DevToolsi konsooliga
Üks parimaid viise JavaScripti silumiseks on Chrome'i arendustööriistade kasutamine. See annab teile otsese aruande kehtetute skriptide kohta ja vea täpse asukoha.
Hea tava on JavaScriptiga veebisaidi kujundamisel DevTools alati lahti hoida. Näiteks käivitamine console.log () JavaScripti käsk juhiste komplektis kuvab selle logi tulemuse DevToolsi konsoolis, kui programm töötab edukalt.
Vaikimisi teatab konsool teie veebisaidi JavaScripti probleemidest. Konsooli leiate DevToolsi alumisest osast või pääsete sellele juurde, klõpsates nuppu Konsool suvandit Chrome DevToolsi akna ülaosas.
Jälgige andmebaasist ressursside laadimist
Lisaks JavaScripti silumisele võib konsool anda teile ka üksikasju ressurssidest, mida ei laadita veebisaidi andmebaasist õigesti.
Kuigi see pole alati parim viis taustaprobleemide silumiseks, ütleb see teile siiski, millised ressursid tagastatakse 404 viga pärast nende elementide andmebaasipäringu käivitamist.
Seotud: tavalised veebisaidi vead ja nende tähendus
Muutke Chrome'i arendustööriistade suunda
Chrome'i arendustööriistade positsiooni muutmiseks klõpsake DevToolsi kolmel menüüpunktil (mitte brauseri peamisel). Seejärel valige soovitud asukoht Doki pool valik.
Installige Chrome DevToolsi laiendused
Samuti saate installida Chrome DevToolsiga töötavaid keele- või raamistikupõhiseid laiendusi. Nende laienduste installimine võimaldab teil oma veebilehte tõhusamalt siluda.
Chrome'i DevToolsi jaoks saadaval olevate laienduste loendile pääsete juurde Esiletõstetud DevToolsi laiendused galerii.
Kontrollige veebisaidi turvaprobleeme
Chrome DevTools võimaldab teil oma veebisaidi turvalisust hinnata selliste parameetrite alusel nagu selle kättesaadavus veebi turvasertifikaadid ja kui turvaline ühendus on muu hulgas. Veebisaidi turvalisuse kontrollimiseks klõpsake nuppu Turvalisus valik DevToolsi ülaosas.
The Turvalisus vahekaart annab teile ülevaate oma veebisaidi turbe üksikasjadest ja ütleb teile võimalikud ohud.
Auditeerige oma veebisaiti
Chrome DevToolsil on funktsioon, mis võimaldab teil kontrollida oma veebisaidi üldist toimivust konkreetsete parameetrite alusel.
Sellele funktsioonile juurdepääsemiseks valige Tuletorn suvandit DevToolsi akna ülaosas. Seejärel valige parameetrid, mida soovite kontrollida, seejärel märkige kas Mobiilne või Töölaud võimalusi, et näha, kuidas teie veebileht toimib erinevatel platvormidel.
Järgmisena klõpsake nuppu Loo aruanne oma veebilehe analüüsi tegemiseks varem valitud parameetrite alusel.
Samuti saate hinnata veebisaidi käitusaega või laadimist, klõpsates ikoonil Jõudlus valik. Testi käivitamiseks klõpsake ikooni kõrval Klõpsake salvestusnuppu võimalus teostusaja analüüsi tegemiseks. Laadimisaja toimivuse hindamiseks klõpsake selle all olevat uuesti laadimise nuppu. Kliki Peatus analüsaatori peatamiseks ja tulemuste kuvamiseks.
Kasutage Chrome DevToolsi eeliseid
Sõltuvalt sellest, milleks seda vajate, võimaldavad Chrome DevTools teha enamat kui lihtsalt veebisaidi silumine. Õnneks on DevToolsi lihtne kasutada kõigi oskustega programmeerijate jaoks. Külastatud veebisaitide lähtekoodi otsides saate isegi õppida veebisaidi kasutajaliidese arendamise põhitõdesid.
miks kroom nii palju mälu võtab?
Võite avastada ka muid võimalusi, mida me selles artiklis ei arutanud. Niisiis, mängige vabalt olemasolevate funktsioonidega. Pealegi ei kahjusta nende funktsioonide muutmine veebisaiti natuke.
Jaga Jaga Piiksuma E -post Kuidas kasutada Chrome OS -i Raspberry Pi -lKas te ei saa Chromebooki endale lubada? Kas otsite Raspbianile alternatiivi? Siit saate teada, kuidas installida oma Raspberry Pi -sse Chrome OS -i versioon.
Loe edasi Seotud teemad- Internet
- Programmeerimine
- HTML
- Veebiarendus
- JavaScript
- Google Chrome
Idowu on kirglik kõige nutika tehnoloogia ja tootlikkuse vastu. Vabal ajal mängib ta kodeerimisega ja lülitab malelauale, kui tal on igav, kuid talle meeldib ka aeg -ajalt rutiinist lahti saada. Tema kirg näidata inimestele teed kaasaegses tehnoloogias motiveerib teda rohkem kirjutama.
Veel Idowu OmisolastTelli meie uudiskiri
Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
Tellimiseks klõpsake siin