A Chrome DevTools az egyik legnagyobb ok, amiért a fejlesztők megtagadják, hogy más böngészőket érintsenek.
A legtöbben azonban csak néhány funkciót használunk, és figyelmen kívül hagyjuk a sok észbontó funkciót, amelyek csendben kerülnek kiadásra.
Fedezzünk fel néhány rejtett drágakövet!
Mindenkinek megvan a kedvenc operációs rendszere, hardverplatformja, eszköztípusa, eszközformája stb. De egy dolog mindenkiben közös: a Chrome böngészőt és csak a Chrome böngészőt futtatják! Azt hiszem, nyugodtan kijelenthetjük, hogy a böngészőháborúknak vége, és a Chrome meggyőzően győzött.
A Windows-felhasználók az alapértelmezett böngészőt csak a Chrome letöltésére használják, majd ezt követően a Chrome-ot használják, figyelmen kívül hagyva a Windows összes „javaslatát”. Ugyanez vonatkozik az Apple eszközeire (főleg a MacBookokra és a nagyobb képernyős eszközökre), ahol a felhasználók és a fejlesztők kerülik a Safarit, annak ellenére, hogy az Apple számos erős követelést és konverziós taktikát alkalmaz.
És ha egy eszközön nem fut a Chrome, nagy az esélye, hogy Chrome-kompatibilis spinoffot futtat, mint pl Bátor vagy Vivaldi. Igen, tudom, technikailag ezek a böngészők nem Chrome-on alapulnak, de ez egy másik vita. Lehet, hogy az átlagos felhasználó ideológiai vagy speciális okokból használja ezeket a böngészőket, de ha a fejlesztőkről van szó, a Chrome-on kívül nincs más böngésző a láthatáron.
Még azt a tényt is figyelmen kívül hagyják, hogy ez egy memóriafaló szörnyeteg. Az ok egyszerű: Chrome DevTools.
Kép forrása: Hivatalos Chrome DevTools dokumentumok
Nos, ha ezt a cikket olvassa, nyugodtan feltételezheti, hogy Ön nagy felhasználó, trükkozó, webfejlesztő vagy valami hasonló. Mint ilyen, egyikünknek sincs szüksége a DevTools bevezetésére, megnyitására, különféle funkcióira stb.
Ehelyett időveszteség nélkül merüljünk el a Chrome DevTools néhány kevésbé ismert, de elképesztően hasznos funkciójában.
Tartalomjegyzék
Tervezési mód
Az egyik dolog, amit a fejlesztők rendszeresen megtesznek, hogy megvizsgálnak egy elemet az oldalon, majd módosítják annak HTML-kódját, hogy megtekintsenek valamit, vagy teszteljék a változtatás hatását.
Azonban a HTML-lel közvetlenül a DevToolsban dolgozni nem a legsimább dolog – átgázolni a címkelevesen, megerőltetni a szemét, hogy megtalálja a megfelelő nyitó/záró zárójelet, és nevetséges mennyiségű szóközzel kell bánni szöveg szerkesztése közben (a szóközök egyértelműen hiányzik a látott dokumentumból), néhány olyan probléma, amellyel meg kell küzdenie. Még rosszabb, ha tervező vagy, és nem akarsz szitálni a rendetlenséget.
Íme egy képernyőkép ennek a webhelynek (etoppc.com) egyik oldaláról:
A mélyen beágyazott HTML és a titokzatos, zavarba ejtő CSS-osztályok ma minden nem triviális webhelyre jellemzőek, ahol a DevTools tapasztalata enyhén szólva szuboptimális. 🤭
De van egy DevTools-funkció, az úgynevezett Design Mode, amely sok esetben csökkentheti a fájdalmat. A Tervezési mód használatával (mellesleg nem ez a hivatalos név; csak azért nevezték el az emberek, mert hogyan aktiválódik és mit csinál – ne aggódj, hamarosan meglátjuk!), megváltozik a oldal vizuálisan és élőben is elkészíthető, akárcsak egy táblázat vagy szövegszerkesztő szerkesztése! Az egyetlen bökkenő az, hogy ez a funkció alapértelmezés szerint nincs bekapcsolva, aktiválása pedig némi fejtörést okoz, főleg a nem fejlesztőknek.
Mindenesetre ez meglehetősen egyszerű; mindössze annyit kell tennie, hogy kövesse az alábbi utasításokat. Attól függően, hogy hol helyezkedik el a felhasználó kifinomultsági görbéjén, ez nevetségesen könnyű vagy közepesen nehéz lehet. A következőket kell tennie:
- Győződjön meg arról, hogy a szerkeszteni kívánt weboldal be van töltve, és éppen azt nézi (vagyis a kérdéses lap az aktív).
- Nyissa meg a DevTools panelt a szokásos módon (billentyűparancs, egérkattintás, bármi). Szeretem a billentyűparancsokat használni, és Mac-en az Opt + Cmd + I elvégzi a feladatot.
- Most, amikor a DevTools nyitva van, lépjen a „Konzol” lapra. Lehet, hogy néhányan forgatják a szemüket, hogy mindez milyen ostobának és nyilvánvalónak tűnik, de gondoljunk arra a (több száz?) emberre is, akik küszködnek, miközben a böngészőkonzollal és a JavaScripttel dolgoznak (bármilyen okból). ).
- Kattintsunk a kurzor melletti első sorra, amely egy gépelési felszólítást jelenít meg, és most már JavaScript kódot írhat oda (lásd a képernyőképet kicsit lejjebb).
- Most meg kell írnunk néhány JavaScript kódot. Ne izgulj, mert amit írnod/gépelned kell, az nagyon rövid és egyértelmű: document.designMode = “on”. A kódot erről az oldalról is kimásolhatja és beillesztheti (ha igen, ügyeljen arra, hogy a formázás ne kerüljön másolásra – csak sima szövegre van szükségünk), vagy ha magabiztosnak érzi magát, írja be.
- Nyomja meg az Enter/Return gombot.
„Ez az??!”
Igen, ez minden!
Mostantól szabadon szerkesztheti az oldalt, mintha az egy dokumentum lenne. Nézze meg ezt a példavideót, ahol élőben szerkesztem a Spotify webhelyet a Tervezési mód használatával:
A Design Mode funkció, bármilyen izgalmas is, nem egy ezüstgolyó; nem lehet például egyszerűen másolni-beilleszteni a gombokat, megváltoztatni a megjelenésüket stb. Egy álom vizuális weboldal-szerkesztőhöz képest nagyon alacsony a tényleges száma, amit meg tud tenni; azonban megoldja azokat a használati eseteket, amikor a tartalmat vizuálisan és menet közben kell módosítani.
Ennek ellenére nem túl elszánt azt állítani, hogy a Chrome-emberek tesztelik, mennyire jól fogadják ezt a funkciót; Ha jó vételt és erős használati esetet talál, akkor joggal számíthatunk arra, hogy hamarosan erősebb szerkesztési lehetőségek következnek majd! 🤞🏻🤞🏻
Hálózati feltételek szimulálása
A Chrome DevTools Hálózat lapja talán a legszélesebb körben használt (persze nincs róla adatom, de webfejlesztőként az esetek 20-30%-ában szoktam a Konzol lapot használni, és a a Hálózat lap a fennmaradó időben). Mindenféle információt ad nekünk az oldalról érkező kérésekről, azok típusáról, metaadatairól/fejléceiről, állapotáról, az eszközök (képek, stíluslapok stb.) letöltési folyamatáról, a betöltési időkről stb. Ilyen hihetetlen hasznosság mellett nem csoda, hogy a Hálózat fül a leggyakoribb.
És mégis, egyszerűen kihagyjuk az általunk tárgyalt funkciót; talán nem vett észre egy ártalmatlan legördülő listát, amely a nyilvánvalót mondja: Online.
Ha erre kattint, egy legördülő menü jelenik meg a különböző beállításokkal, amelyek lehetővé teszik a hálózat sebességének szabályozását: Gyors 3G, Lassú 3G, Offline stb. Bár ennek a lehetőségnek különféle felhasználási esetei lehetnek, a leggyakoribb a webhely tesztelése. teljesítmény lassú hálózatokon vagy a webalkalmazások viselkedése offline állapotban (feltéve, hogy az ilyen képességeket hozzáadták).
Vegyük ezt egy körbe. A hálózatot „Lassú 3G”-re állítom, és újratöltöm az előző képernyőképen lévő oldalt. Mielőtt ezt megtenném, vegye észre a korábbi képernyőképen, hogy a jelenlegi hálózati kapcsolatomon (40 Mbps szélessávú) a legtöbb eszköz 100 ezredmásodperc alatt töltődik le.
És most itt az ideje, hogy megnézzük, mit tesz vele a lassú 3G.
Micsoda különbség!
Figyelje meg, hogy az eszközök betöltési ideje most 5-10 másodperces tartományba esik. Ezenkívül az oldal 17,25 másodperc alatt teljesen betöltődött! Igen, tudom, mire gondol, de figyelembe kell vennie, hogy lassú 3G hálózaton minden modern webhely néhány másodpercig tart, amíg betöltődik. Az egy másik dolog, hogy gyors betöltést akar-e lassú hálózatokon, bár összességében üzleti döntésnek kell lennie, ahol a nyereség indokolja az erőfeszítést.
A fenti képernyőképen vegye észre a figyelmeztető ikont a Hálózat lapon. A Chrome így emlékezteti Önt arra, hogy valamilyen nem alapértelmezett, tartós változtatást hajtott végre, és ha nem tudja, mit csinál, akkor esetleg vissza kell állítania.
Interaktív színválasztó
A DOM-elemek ellenőrzése a DevToolsban szinte mindannyian mindennapos feladat. Megszoktuk a mellette megjelenő CSS-részletek szakaszt is, és tudjuk, hogy szerkeszthetjük, és azonnal láthatjuk az eredményeket.
Egy apró kényelem rejtőzik mindezek között, hogy ha rákattint egy CSS-színtulajdonságra, egy ismerős színválasztó felület jelenik meg!
Figyeljük meg, hogy ez nem egy csupasz, alapszínválasztó. Lehetővé teszi az átlátszóság szabályozását, a használt színrendszerek megváltoztatását, a szín kiválasztását közvetlenül az oldalról és még sok mást.
Így a következő alkalommal, amikor például egy webhely kiemelő színeivel kísérletezik, nem kell kitalálnia vagy kitalálnia a kívánt árnyalat megfelelő értékét! Valójában sokan szeretnek webhelyeket közvetlenül a böngészőben tervezni; számukra az ilyen funkciók isteni ajándék! 🙂
Események figyelése az oldalon található elemek
Gyakran kerülünk olyan helyzetbe, hogy bárcsak tudnánk, mi történik azzal az egy adott elemmel, amely érdekli. Ez különösen igaz, ha a jQuery-t nem triviális kódbázisban használjuk – legyen az Ön vagy másoké; Az eseménykezelők és a logika mindenhol elterjedt, és egy hiba felkutatása rémálom lehet.
Szerencsére a Chrome DevTools remek funkcióval rendelkezik erre a célra. Megfigyeli a jelzett elemet, és naplózza az eseményeket a konzolra. De van egy kis csalódás: ez a funkció nem rendelkezik CSS-osztálynevek alapján elemkiválasztási lehetőségekkel. Tehát a $(“#email”) jQuery módja nem elérhető. 🙂
Ezzel együtt lássuk, hogyan lehet ezt megvalósítani. Kezdjük egy egyszerű „ellenőrző elemmel” a DevTools ellenőrrel. Igen, ez ugyanaz az ellenőrző eszköz, amelyet minden nap használunk.
Az alábbi képernyőképen az ellenőrző eszközt használtam a szövegbevitel kiemelésére. A „kiemelés” alatt nem azt értem, hogy az oldalon lévő elem ki van emelve (ahogy látható, nem az); inkább az ellenőrző kurzorra kattintott a szövegbevitelre, és a megfelelő HTML-kód ki van emelve a DevToolsban.
Ezzel a jelenleg ellenőrzött elemet célozza meg az eseményfigyeléshez, ami az elemet egy speciális, $0 nevű JavaScript-változóként teszi elérhetővé. Ezután, ügyelve arra, hogy ne kattintsam hanyagul a böngészőablak más helyére (különösen a HTML-kód részre), rákattintok a konzolra, és csatolok egy eseményfigyelőt ehhez a szövegbevitelhez. Ehhez mindössze egyetlen kódsorra van szükségem: monitorEvents($0, ‘egér’). Az „egér” rész azt mondja a Chrome-nak, hogy csak az egér alapú események figyelése érdekel.
Amint megnyomom az Enter/Return billentyűt, a figyelés aktiválódik, és ha most a szövegbevitel fölé viszem az egeret, vagy rákattintok, ezek az események JavaScript objektumként naplózódnak a konzolon:
Amint a képernyőképen is látható, többféle egéreseményt rögzítettem, amikor rákattintottam az elemre, beírtam a nevemet, majd elmozdítottam az egeret (a gépelési eseményeket, mivel billentyűzetes események, nem naplóztam). Az események maguk a JavaScript-objektumok, amint az a képernyőképen látható; minden eseményobjektum óriási mennyiségű információt tartalmaz. Például kibővítettem a „click” eseményobjektumot, és a tulajdonságok száma nem fér el egyetlen képernyőképen!
Nagyon ajánlom, hogy azonnal próbálja ki ezt a funkciót, mert biztosan sok fejfájástól kíméli meg a közelgő projektjeit!
Weboldal teljesítményjelentések
Manapság a webhely teljesítménye létrehozza vagy megbontja az üzletet/webhelyet. Még a teljesítmény kismértékű növekedése is jelentős SEO-növekedést, valamint a felhasználók elégedettségét eredményezi. De honnan tudod, hogy weboldalad mely részei igényelnek figyelmet, és melyek már jók?
Fel kell bérelnie egy szakértői csapatot, és türelmesen várnia kell néhány napot?
Nos, vannak esetek, amikor ezt meg kell tenni, de szerencsére a Chrome DevTools a többiekre is kiterjed. A Chrome legújabb verzióiban (2020 vége) a DevToolsban egy Lighthouse lapot talál. Néhány hónappal ezelőtt Audits-nek hívták, és zavaró módon ez a név található a hivatalos dokumentumokban. Amúgy a lényeg az, hogy a Lighthouse egy divatos weboldal volt a weboldal teljesítményének ingyenes ellenőrzésére, de aztán a Google leszedte (indoklás nélkül). Szerencsére ugyanez a hatékony funkció később újra megjelent a DevToolsban.
A teljesítményjelentés elkészítéséhez mindössze egyetlen gombot kell megnyomnia, miután az Önt érdeklő oldal betöltődött:
Amint a képernyőképen a jobb oldalon látható, van néhány lehetőség annak szabályozására, hogy mennyi információt szeretne (és természetesen azt, hogy mit szeretne tesztelni). Ha elégedett a beállításokkal, nyomja meg azt a nagy kék gombot, dőljön hátra, és lazítson. Néhány másodperccel később hasznos jelentést kap, amely valahogy így néz ki:
A fenti képernyőképen látható számok az egyes kategóriák összpontszámát mutatják. A progresszív webalkalmazások (PWA) kategóriája ki van szürkítve, valószínűleg azért, mert ez a webhely nem rendelkezik PWA-képességekkel. Ezenkívül, amint azt a képernyőképen látható görgetősáv méretéből is láthatja (jobbra), ez egy hosszú jelentés.
Így néz ki a teljesítményről szóló szakasz egy része:
Nem állítom, hogy a Lighthouse és annak javaslatai a webhely teljesítményének szent grálja, de ezek rendkívül hasznosak; ennek az az oka, hogy a webhelytulajdonosok és a fejlesztők ritkán vannak fogalmuk arról, hogy milyen problémák vannak, és hogyan kell pontosan kezelni őket.
Őszintén szólva, még én is elveszettnek érzem magam webfejlesztőként, mivel a teljesítmény és a tesztelés általában egyfajta specializáció. Mint ilyen, a Lighthouse egy kevéssé ismert, alulértékelt eszköz, amely ma már a Chrome DevTools része, és óriási hasznot húz a cégtulajdonosok és a fejlesztők/rendszergazdák számára egyaránt.
Kódszerkesztő készség
A DevTools Források lapja lehetővé teszi, hogy hozzáférjünk a webhely által betöltött különféle fájlokhoz. Olyan képességekkel is rendelkezik, mint a kódszerkesztés, a részletek mentése stb. Ez nem meglepő a webfejlesztők számára. A DevTools azonban rendelkezik néhány beépített kényelemmel is, amelyek megkönnyítik a kedvenc IDE-kódjukhoz szokott fejlesztők életét.
A DevTools néhány jól ismert billentyűkódot használ, amelyek időt takarítanak meg, és minimálisra csökkentik a kódzavarás okozta frusztrációt. Például a Ctrl + D (vagy Mac rendszeren a Cmd + D) billentyűkombinációval egy szó többszörös előfordulását is kiemelheti. Hasonlóképpen, ha lenyomva tartja a Ctrl (vagy Mac-en a Cmd) billentyűt, és a kód több helyére kattint, több kurzort kap. Nézze meg az alábbi videót, hogy jobb képet kapjon:
Ha úgy gondolja, hogy ez klassz, vessen bele a hivatalos dokumentumokba, hogy kihasználhassa a DevTools által kínált összes kódszerkesztő funkciót.
A DOM elem állapotának szabályozása
Néha tesztelünk vagy hibakeresünk valamit, de az általunk követett viselkedés csak egy adott elemállapotban érhető el. Attól függően, hogy milyen állapotban van, szörnyű időket élhet át; számomra ez a „lebegés” állapot, mivel emlékszem, hogy számtalan percet vesztegettem azzal, hogy időzíteni próbáltam a lebegési műveletet, vagy további, ideiglenes CSS-t stb.
Szerencsére a Chrome DevTools segítségével egyszerűen módosíthatja a vizsgált elem állapotát. Sőt, erre is van lehetőség, ha jobb gombbal rákattintunk az elemre (az Elemek lapon), de figyelembe véve a funkciók számát és a napi munkával járó nyomást, ezt könnyen figyelmen kívül hagyhatjuk:
Igen, ez tényleg ilyen egyszerű!
Mostantól nem kell feltételes tesztelési logikát belevinni a kódba, nem kell további CSS-t írni, vagy nem kell átugrani más körökön, ha egy másik állapotú elemet figyel meg.
Eszközök panel
Végül, de nem utolsósorban ezen a listán található az Eszközök panel. Ez egy másik olyan hihetetlenül hasznos funkció, amely jól el van rejtve, és csak billentyűparancsokkal látható. Ahogy a neve is sugallja, az Eszközök panel nem egyetlen eszköz, hanem egyfajta irányítópult, ahol a DevTool szinte minden funkciója elérhető. Mivel túl sok funkció kínálja a DevTools általános funkcionalitását, a keresősáv közvetlenül a tetején érhető el.
Az Eszközök panel aktiválásához győződjön meg arról, hogy a DevTools panelen van, majd nyomja meg a Ctrl + Shift + P (vagy a Cmd + Shift + P billentyűket Mac felhasználók esetén):
Az Eszközök panel tele van lehetőségekkel és meglepetésekkel. Tudta például, hogy közvetlenül a DevToolsból készíthet képernyőképet?
Fogadok, hogy nem, mert be kell indítania az Eszközök panelt, és be kell írnia a „screenshot” szót a keresősávba, hogy kiderüljön:
Több lehetőséget is észre fog venni a képernyőképek készítésére, köztük egyet a kiválasztott DOM-csomóponthoz! Fedezze fel az Eszközök panelt, és garantálom, hogy nem fog csalódni!
Ha távolról képernyőképet kell készítenie bármely weboldalról, nézze meg a etoppc.com Képernyőkép eszközt.
Következtetés
Maga a Chrome böngésző funkciókban gazdag, de igazán a DevTools kínálata ragyog. Amint azt ebben a cikkben láttuk, van jó néhány jól elrejtett funkció – és vannak olyanok is, amelyek a szemünk előtt rejtőznek –, amelyekről a felhasználók túlnyomó többsége nem tud. Miért vannak elrejtve ezek a funkciók?
Feltételezem, hogy ezek közül néhány nagyon kísérleti jellegű (például a Tervezési mód), és a Chrome fejlesztői meg akarják akadályozni, hogy a hétköznapi felhasználók megtalálják ezeket a funkciókat. A többi szolgáltatásról úgy gondolom, hogy egyszerűen az információs túlterheltségről van szó: ha mondjuk 120 szolgáltatás van, amelyek közül néhánynak van alszolgáltatása és így tovább, akkor szinte lehetetlen megtervezni a megfelelő felhasználói felületet az ilyenekhez. egy forgatókönyv. Ezenkívül a Google történelmileg nem végzett nagy munkát termékei UX-jével, szóval ez van. 🤷🏻♂️
Ettől függetlenül remélem, hasznosnak talált néhány szolgáltatást. De ami még ennél is fontosabb, remélem, hogy ebből a cikkből megtudhattad, mi rejtőzik hol, hogy amikor legközelebb valami konkrét dolog felfedezésére vagy keresésre vágysz, tudd, hová menj a „mélyre ásáshoz”. 😆