"Google Chrome" yra viena iš populiariausių interneto naršyklių, skirtų žiniatinklio kūrimui, nes tai yra pažangios funkcijos. " Chrome" kūrėjo įrankiai gali būti labai naudinga derinant. Daugelis iš mūsų jau žino, kad galime redaguoti gyvąjį CSS naudodami "Chrome Dev Tools", tačiau yra daugiau patarimų, kuriuos šiandien pasidalinsime su jumis.
"Chrome" kūrimo įrankių patarimai
Yra daug nežinomų ir paslėptų "Chrome Dev" įrankių triukų, ir mes ieškosime labiausiai naudingų gudrybių tarp jų. Jei norite atidaryti kūrėjo įrankius "Chrome", paspauskite F12 savo klaviatūroje ir išbandykite šiuos gudrybes.
1. Suraskite ir atidarykite bet kokį failą
Kai vykdome interneto svetainių kūrimą, susiduriame su daugeliu HTML, CSS, JS ir kitų failų. Kai norime ištaisyti bet kokį dalyką, atidarome "Chrome Dev" įrankius. Galite greitai ieškoti ir surasti konkretų failą, kad jūsų darbas būtų lengvesnis. Tiesiog paspauskite Ctrl + P ir pradėkite rašyti failo vardą. Tai padės jums rasti konkretų failą iš failų sąrašo.
2. Ieškokite šaltinio failo
Ankstesniame apgauti mus pažinome, kaip ieškoti konkretaus failo. Jūs galite netgi ieškoti konkrečios eilutės visuose įkeltuose failuose. Paspauskite Ctrl + Shift + F ieškoti failų eilutės. Ji taip pat palaiko reguliarias išraiškas.
3. Eikite į konkrečią eilutę
Kai atidarote bet kokį šaltinio failą ir norite perkelti į konkrečią eilutę, tada paspauskite Ctrl + G ir nurodykite eilutės numerį ir paspauskite Enter.
4. DOM elementų pasirinkimas konsolės skirtuke
"Dev Tools" taip pat leidžia pasirinkti elementus konsolėje.
- $() – Grąžina pirmąjį atitikties CSS selektoriaus įvykį.
- $$() – Tai grąžina elementų masyvą, atitinkantį nurodytą CSS selektorių.
5. Naudokitės keliais spaustukais
Kartais jūs norite nustatyti kelis spaustukus skirtingose vietose, ir tai galite lengvai atlikti "Chrome Dev" įrankiuose laikydami Ctrl raktą ir spustelėję, kur norite juos įdėti. Tada pradėkite rašyti ir pamatysite, kad jis yra įvairiose pasirinktose vietose.
6. Išsaugokite žurnalą
Išsaugoti žurnalą padeda išsaugoti žurnalą, net jei puslapis yra įkeltas. Pažymėkite šalia esančią parinktį Išsaugoti žurnalą konsolės žurnale ir žurnalas yra išsaugotas. Tai parodo žurnalą, kol puslapis nėra iškrautas, ir yra naudingas tiriant klaidas.
7. Naudokite integruotą kodo pieštuką
"Chrome Dev" įrankiai turi įmontuotą kodo piešimo piktogramą gana spausdinti "{}". Kūrėjo įrankis rodo minimizuotą kodą ir nėra taip lengva skaityti. Paspauskite ant gražaus spausdinimo mygtuko, kuris rodomas atidaryto šaltinio failo apačioje kairėje, kad pamatytumėte šaltinio failą žmogaus skaitomoje formoje.
8. Ar jūsų svetainė yra mobili? Patikrinkite čia
"Chrome Dev Tools" taip pat leidžia mums patikrinti, ar svetainė yra draugiška, ar ne. Galite patikrinti, kaip jūsų svetainė atrodo įvairiuose įrenginiuose. Eikite į "Chrome Dev" įrankius ir žemiau Emuliacija skirtuke, galite pateikti įvairius įrenginius. Pasirinkite norimą įrenginį ir išbandykite, kaip jūsų svetainė atrodo šiame įrenginyje.
9. Mąstymo jutikliai ir geografinė padėtis
Galite net imuliuoti jutiklius, pavyzdžiui, jutiklinį ekraną ir akselerometrus. Galite net imuliuoti geografinę vietą. Norėdami tai padaryti, eik paskui Emuliacija -> jutikliai.
10. Pasirinkite kitą dabartinio žodžio atsiradimą
Jei norite pakeisti žodį Visais įvykiais, tada pasirinkite žodį ir paspauskite Ctrl + D pasirinkti kitą pasirinktą žodį. Jūs galite redaguoti šį žodį visais jo įvykiais vienu kadru.
11. Pakeiskite spalvotą formą
Tiesiog naudok Shift + spustelėkite spalvų peržiūra keistis keičiasi tarp rgba, šešioliktainio ir hsl formatavimo.
12. Pridėti darbo vietos pakeitimus į vietinius failus
Mes galime redaguoti šaltinio failus ir atlikti keletą pakeitimų CSS, "Java Script" ir kituose "Chrome Dev" įrankiuose. Norėdami pridėti šiuos pakeitimus į vietinius failus, čia nereikia kopijuoti įterptinių pakeitimų iš darbo vietos į failus diske. "Chrome Dev" įrankiai leidžia jums suderinti failus ir atnaujinti vietinį failą naudodami dev įrankiuose atliktus pakeitimus. Norėdami tai padaryti, dešiniuoju pelės klavišu spustelėkite šaltinio failą kairėje pusėje Šaltiniai skirtuką ir pasirinkite Pridėti aplanką į darbo vietą.
Norėdami gauti daugiau informacijos apie darbo vietas, eikite į "Chrome.com".
