Chrome-kehitystyökalut Tutoriaalit, vihjeet, vihjeet

Chrome-kehittäjätyökaluja voi olla erittäin hyödyllinen virheenkorjauksen aikana. Google Chrome on yksi suosituimmista web-selaimista web-kehitykselle, koska se on edistyksellisiä ominaisuuksia. Useimmat meistä jo tietävät, että voimme muokata live-CSS: ää Chrome Dev -työkaluilla, mutta meillä on vielä lisää vinkkejä, jotka jakamme kanssasi tänään.

Chrome-kehitystyökalujen vinkit

Chrome Dev -versiota on paljon tuntemattomia ja piilotettuja temppuja Työkalut, ja etsimme niistä kaikkein hyödyllisimpiä temppuja. Voit avata Chrome-kehittäjien työkalut näppäimistöllä F12 ja kokeilla 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. Paina vain Ctrl + P ja aloita tiedostonimen kirjoittaminen. Tämän avulla voit etsiä tietyn tiedoston tiedostoluettelosta.

2. Hae lähdetiedostosta

Aiemmassa trikissä saimme tietää, kuinka etsiä tietyn tiedoston. Voit jopa etsiä tiettyä merkkijonoa kaikista ladatuista tiedostoista. Paina 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.

$ () -

• Palauttaa vastaavan CSS-valitsimen ensimmäisen esiintymän. $$ () -
• DOM-elementtien valinta Console-välilehdessä < > Palauttaa tietyn CSS-valitsimen mukaiset elementtiryhmät. Lisää konsolin komentoja päästäksesi tähän viestiin.

Hyödynnä useita kerroksia

Joskus haluat asettaa useampia kerroksia eri paikoissa ja voit tehdä sen helposti Chrome Dev -työkaluissa pitämällä

Ctrl -näppäintä painettuna ja napsauttamalla sitä, 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

Säilytä loki Console-lokin vieressä ja lokin säilytetään. Tämä näyttää lokin ennen sivua lataamattomana ja hyödyllistä tutkia vikoja. 7. Käytä sisäänrakennettua koodin kaunistamista

Chrome Dev -työkaluilla on sisäänrakennettu koodi beautifier

pretty print "{}". Kehittäjätyökalu näyttää pienennetyn koodin ja ei ole niin helppo lukea. Napsauta avattua lähdetiedostoa vasemmassa alakulmassa näkyvästä kauniista tulostuspainikkeesta, joka näyttää lähdetiedoston luettavassa muodossa. 8. Onko sivustosi mobiili ystävällinen? Tarkista se täältä

Chrome Dev Toolsin avulla voimme tarkistaa, onko verkkosivusto mobiili ystävällinen vai ei. Voit tarkistaa, miltä sivustosi näyttää eri laitteilta. Suorita Chrome Dev -työkaluihin ja alle

Emulointi -välilehdellä voit lähettää useita laitteita. Valitse haluamasi laite ja testaa verkkosivustosi näkyminen kyseisessä laitteessa. Lisätietoja on seuraavassa videossa.

9. Emuloida antureita ja maantieteellistä sijaintia

Voit jopa jäljitellä antureita, kuten kosketusnäyttöä ja kiihtyvyysmittareita. Voit jopa jäljitellä maantieteellistä sijaintia. Tee näin päästäksesi

Emulointi -> Anturit. 10. Valitse seuraava sana nykyinen sana

Jos haluat korvata sanan kaikessa sen esiintymässä, valitse sana ja valitse

Ctrl + D valitaksesi valitun sanan seuraava esiintyminen. Voit muokata sanaa kaikissa esiintymissään yhdessä kuvassa. 11. Alter Color Format

Käytä vain

Shift + Klikkaa värin esikatselussa muuttaaksesi rgba-, heksadesimaali- ja hsl-muotoilua. 12. Lisää muutoksia paikallisiin tiedostoihin työtilan

kauttaVoimme 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 lähdetiedostoa vasemmalla puolella

Lähteet -välilehdellä ja valitsemalla Lisää kansio työtilaan. Lisätietoja työtiloista siirtyy Chromet.fi:lle.