13 technikák és trükkök dolgozó Chrome DevTools
A mai napig, a Google Chrome a legnépszerűbb böngésző a fejlesztők. Hála a hat hetes ciklus fejlesztési és széles választékát nyújtja, ez meg az eszközök már szinte nélkülözhetetlen. Az a lehetőség, hogy már hallott: CSS szerkesztő valós időben, a konzol és a debugger. Ebben a cikkben fogjuk megosztani veletek, és egyéb jellemzőit a szerszámot.
1. Gyors váltás a fájlokat
Ha Sublime szöveg, akkor valószínűleg nem tud élni anélkül, hogy lépjen a fájlt. Ez a megközelítés is elérhető a Google fejlesztői eszközök. Nyílt DevTools, nyomja meg a Ctrl + P, hogy gyorsan megtalálja a kívánt fájlt.
2. Keresés a forráskód
Ahhoz, hogy keressen egy adott sztring minden betöltött fájlok, tartsa meg a Ctrl + Shift + F Ez a megközelítés biztosítja a reguláris kifejezések.
3. Menj a vonal
Megnyitása után a forrás fájlt, akkor azonnal ugrik a kívánt vonalat a Ctrl + G, majd adja meg a kívánt sor számát.
4. A minta sejt a konzol
A konzol DevTools azt a lehetőséget, hogy a speciális változók és függvények letölteni DOM elemek:
- $ () - csökkentés document.querySelector (). Visszaadja az első eleme a kívánt CSS-választó (tehát $ ( „div”) visszatér az első div, ami megfelel az oldalon).
- $$ () - csökkentés document.querySelectorAll (). Visszaadja egy tömb elemeinek a CSS-választó.
- $ 0 - $ 4 - FIVE DOM elemeket, amelyeket utoljára kiválasztott $ 0.
5. Használjunk több csúszkák
Tovább romboló, akkor előfordulhat, találkoznak a Sublime szöveg. Ha módosítunk egy fájlt, akkor létrehozhat több csúszka párhuzamos szerkesztést egy pár sort, nyomja meg a Ctrl és rákattint a megfelelő helyeken.
6. törlése a tisztító naplóüzenetei
Szorongatva a kullancs a megőrzése Log opciót, akkor minden a naplók lesz írva a konzolra tisztítás nélkül letölti más oldalakon. Ez akkor lehet hasznos, ha a hibakeresés a kódot.
7. kód formázása <>
Gyakran találkoznak minimalizált fájlokat, ahol az összes kódot írt egy vagy több sorban. Annak érdekében, hogy a kód olvashatóbbá, akkor kattintson a megfelelő ikonra.
8. Az érzékelő eszköz emulátor
Tovább lenyűgöző chip képes szimulálni egy érintés, vagy érintse gyorsulásmérő. Azt is megadhatja, földrajzi elhelyezkedését.
9. megválasztása a minta színe
Munka közben a stílus tudjuk választani a szín nem csak képviseli a paletta, hanem magát az oldalt.
10. Állam változtatása a gomb
11. Display shadow DOM
Most böngészők gyakran használják az ilyen chipek a szöveges mezők, gombok és egyéb elemek, alapértelmezés szerint rejtettek. Azonban, akkor rögzítse a Beállítások -> Általános és aktiválja a lehetőség megjelenítése ágens árnyék DOM.
12. Válogatás a következő bejegyzés
13. közötti váltás színformátumok
Segítségével Shift + Click, akkor kapcsoljuk be a különböző szín formátum.
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!