Google Chrome on üks populaarsemaid veebibrauserit veebiarenduseks selle täiustatud funktsioonide tõttu. Chrome'i arendaja tööriistad võib olla väga kasulik, kui silumine toimub. Enamik meist juba teab, et me saame Chrome Dev-tööriista abil reaalajas CSS-i redigeerida, kuid on rohkem näpunäiteid, mida me teiega täna jagame.
Chrome'i arendusvahendeid näpunäited
Chrome Dev Tööriistadest on palju tundmatuid ja varjatud trikke ning me otsime nende seas kõige kasulikumat trikki. Chrome'i arendaja tööriistade avamiseks vajutage F12 oma klaviatuuril ja proovige järgmisi nippe.
1. Leidke ja avage kõik failid
Kui teeme veebiarendust, tegeleme paljude HTML-i, CSS-i, JS-i ja muude failidega. Kui tahame midagi siluda, avame Chrome Dev-i tööriistu. Saate kiirelt otsida ja leida konkreetset faili, et muuta oma töö lihtsamaks. Lihtsalt vajutage Ctrl + P ja alustage failinime kirjutamist. See aitab teil leida konkreetset faili failide loendist.
2. Otsi allika faili
Eelmises trikkis jõudsime teada, kuidas otsida konkreetset faili. Saate isegi otsida konkreetset stringi kõigis koormatud failides. Vajuta Ctrl + Shift + F otsida stringi failides. Samuti toetab see regulaaravaldisi.
3. Minge kindlale reale
Kui olete avanud mis tahes lähtekoodifaili ja soovite liikuda kindlale reale, siis vajutage Ctrl + G ja andke rea number ja vajutage sisestusklahvi.
4. DOM-i elementide valimine konsooli vahekaardil
Dev Tools võimaldab teil ka elemente konsoolis valida.
- $() – Tagastab sobiva CSS-valija esimest esinemist.
- $$() – See tagastab antud CSS-valijale vastavate elementide hulga.
5. Kasutage mitut haru
Mõnikord soovid määrata mitmesugused hoolduskohad erinevates kohtades ja saate Chrome Dev-tööriistades hõlpsalt seda teha Ctrl võti ja klõpsake, kuhu soovite neid asetada. Seejärel alustage kirjutamist ja näete, et see asetatakse erinevates valitud kohtades.
6. Säilitage logi
Salvesta log aitab teil säilitada logi isegi lehe laadimisel. Kontrollige kõrval olevat valikut Salvesta log konsooli logi ja logi on säilinud. See näitab logi enne lehe laadimist ja aitab uurida vead.
7. Kasuta sisseehitatud koodi ilustajat
Chrome Dev Tools on sisseehitatud koodi kujundaja ilus printimine "{}". Arendaja tööriist näitab minimeeritud koodi ja seda pole nii lihtne lugeda. Klõpsake ilusat printimist nuppu, mis on avatud lähtekoodifaili vasakus alanurgas, et näidata lähtefaili inimese loetavas vormingus.
8. Kas teie veebisait on mobiilne? Vaata seda siin
Chrome Dev Tools võimaldab meil ka kontrollida, kas veebisait on mobiilisõbralik või mitte. Saate kontrollida, kuidas teie veebisait erinevates seadmetes kuvatakse. Liikuge Chrome Dev'i tööriistadele ja alla Emuleerimine vahekaardil, saate faili mitmesuguseid seadmeid. Valige soovitud seade ja proovige, kuidas teie veebisait selles seadmes kuvatakse.
9. Määra andurid ja geograafiline asukoht
Saate isegi imiteerida andureid nagu puuteekraan ja kiirendusmõõturid. Võite isegi geomeetrilise asukoha järgi jäljendada. Selleks pea üle Emulatsioon -> andurid.
10. Valige aktiivse sõna järgmine sündmus
Kui soovite asendada sõna Kõigil sellel esinemisel valige sõna ja vajutage Ctrl + D vali valitud sõna järgmine sündmus. Te võite selle sõna muuta kõikides sündmustes ühes tulinas.
11. Altervärvi vormindamine
Lihtsalt ära kasuta Tõstuklahv + kliki värvide eelvaate muutmine muutub rgba, kuueteistkümnenda ja hsl-vormingu seas.
12. Lisage kohalike failide muudatused tööruumi kaudu
Me võime redigeerida lähtekoodifaile ja teha mõningaid muudatusi CSS-i, Java-skripti ja muudes Chrome Dev-tööriistadega seotud failides. Nende muudatuste lisamiseks kohalikesse failidesse pole siin vaja kopeerida muudatusi tööpiltidest kettale salvestatud failidesse. Chrome Dev'i tööriistad võimaldavad teil faile sobitada ja värskendada kohalikku faili koos dev tööriistadega tehtud muudatustega. Selle tegemiseks tehke hiire parema nupuga allalaaditud fail vasakul küljel Allikad vahekaarti ja valige Lisage kaust tööruumi.
Lisateavet tööruumide kohta saate Chrome.com-i juurde.
