Google Chrome on yksi suosituimmista web-selaimista, jotka ovat kehittyneitä ominaisuuksia. Chrome-kehittäjätyökalut voi olla erittäin hyödyllinen virheenkorjauksen aikana. Useimmat meistä jo tietävät, että voimme muokata live-CSS: ää käyttämällä Chrome Dev Tools -ohjelmaa, mutta meillä on vielä lisää vinkkejä, jotka jakamme kanssasi tänään.
Chrome-kehitystyökalut vinkkejä
Chrome Dev -työkaluilla on monia tuntemattomia ja piilotettuja temppuja, ja tarkastelemme niiden hyödyllisimpiä temppuja. Avaa Chrome-kehittäjien työkalut painamalla F12 näppäimistöltä ja kokeile seuraavia temppuja.
1. Etsi ja avaa tiedosto
Kun teemme web-kehitystä, käsittelemme monia HTML-, CSS-, JS- ja muita tiedostoja. Kun haluamme korjata jotain, avaa Chrome Dev -työkalut. Voit nopeasti etsiä ja löytää haluamasi tiedoston helpottamaan työsi. Vain, paina Ctrl + P ja aloita tiedostonimen kirjoittaminen. Tämä auttaa sinua etsimään tiettyä tiedostoa tiedostoluettelosta.
2. Hae lähdetiedostosta
Aiemmassa trikissä saimme tietää, kuinka etsiä tietyn tiedoston. Voit jopa etsiä tiettyä merkkijonoa kaikista ladatuista tiedostoista. Lehdistö Ctrl + Shift + F etsiä merkkijono tiedostoista. Se tukee myös säännöllisiä lausekkeita.
3. Siirry tiettyyn riviin
Kun olet avannut minkä tahansa lähdetiedoston ja haluat siirtyä tiettyyn riviin, paina sitten Ctrl + G ja anna rivinumero ja paina enter.
4. DOM-elementtien valinta Console-välilehdellä
Dev Toolsin avulla voit myös valita elementtejä konsolissa.
- $() – Palauttaa vastaavan CSS-valitsimen ensimmäisen esiintymisen.
- $$() – Se palauttaa joukon elementtejä, jotka vastaavat tietyn CSS-valitsimen.
5. Hyödynnä useita kerroksia
Joskus haluat asettaa useamman haun eri paikoissa ja voit tehdä sen helposti Chrome Dev -työkaluilla pitämällä sitä ctrl avain ja napsauttamalla, missä haluat sijoittaa ne. Aloita sitten kirjoittaminen ja näet, että se on sijoitettu eri paikkoihin.
6. Säilytä loki
Säilytä loki auttaa pysäyttämään lokin, vaikka sivu ladataan. Valitse vaihtoehto vieressä Säilytä loki konsolin lokissa ja lokissa säilytetään. Tämä näyttää lokin ennen sivua lataamattomana ja hyödyllistä tutkia vikoja.
7. Käytä sisäänrakennettua koodin kaunistusta
Chrome Dev -työkaluilla on sisäänrakennettu koodi beautifier kutsuttu kaunis tuloste "{}". Kehittäjätyökalu näyttää pienennetyn koodin, eikä se ole niin helppo lukea. Napsauta avattua lähdetiedostoa vasemmassa alakulmassa näkyvän melkoisen tulostuspainikkeen, joka näyttää lähdetiedoston luettavassa muodossa.
8. Onko sivustosi mobiili ystävällinen? Tarkista se täältä
Chrome Dev -työkaluilla voidaan myös tarkistaa, onko verkkosivusto mobiili ystävällinen vai ei. Voit tarkistaa, miltä sivustosi näyttää eri laitteilta. Päätä Chrome Dev -työkaluille ja alla jäljittely -välilehti, voit lähettää useita laitteita. Valitse haluamasi laite ja testaa, miten sivustosi näyttää kyseisessä laitteessa.
9. Emuloida antureita ja maantieteellistä sijaintia
Voit jopa jäljitellä antureita, kuten kosketusnäyttöä ja kiihtyvyysmittareita. Voit jopa jäljitellä maantieteellistä sijaintia. Voit tehdä tämän päästä eteenpäin Emulointi -> Anturit.
10. Valitse nykyisen sanan seuraava esiintyminen
Jos haluat korvata sanan kaikessa sen esiintymässä, valitse sana ja paina Ctrl + D valitaksesi valitun sanan seuraavan esiintymisen. Voit muokata sanaa kaikissa esiintymissään yhdessä kuvassa.
11. Muuta värimuotoa
Käytä vain Vaihto + Napsauta värin esikatselussa muuttamaan rgba-, heksadesimaali- ja hsl-muotoilua.
12. Lisää muutoksia paikallisiin tiedostoihin työtilan kautta
Voimme muokata lähdetiedostoja ja tehdä joitain muutoksia CSS: ssä, Java Scriptissä ja muissa tiedostoissa Chrome Dev -työkaluissa. Jos haluat lisätä nämä muutokset paikallisiin tiedostoihin, tässä ei tarvitse kopioida muutoksia työtilasta tiedostoihin levylle. Chrome Dev -työkalujen avulla voit sovittaa tiedostoja ja päivittää paikallisen tiedoston muutoksilla, jotka olet tehnyt dev-työkaluissa. Voit tehdä tämän napsauttamalla hiiren oikealla puolella olevaa lähdetiedostoa Lähteet välilehti ja valitse Lisää kansio työtilaan.
Lisätietoja työtiloista viedään eteenpäin osoitteeseen Chrome.com.
