Home-theater-designers
A Chrome DevTools elengedhetetlen eszköz a fejlesztők számára. Míg más böngészők nagyon praktikus hibaelhárítási eszközöket kínálnak, a Chrome DevTools érdemes figyelmet fordítani a multifunkcionális felület és a népszerűség miatt.
A Chrome a fejlesztők legnépszerűbb böngészője a hibakeresési eszközök hatékony csomagja miatt. A Chrome DevTools használata egyszerű, de meg kell értenie, hogyan működik, hogy a legtöbbet hozhassa ki belőle.
A Chrome fejlesztői eszközök működése
A Chrome DevTools lehetővé teszi a webhely problémáinak megoldását a hibakonzolon és más hibakeresési és felügyeleti eszközökön keresztül. A DevTools használata feltárja a kezelőfelület kiskapuit, és lehetővé teszi, hogy nyomon kövesse webhelye megjelenését mobil- és táblagépeken.
A DevTools segítségével valós idejű szerkesztéseket végezhet a webhely kódján, például JavaScript, HTML és CSS, és azonnal láthatja a módosítások eredményeit.
A DevTools eszközön végrehajtott módosítások nem érintik véglegesen a webhelyet. Csak ideiglenesen jelenítik meg a várt eredményt, mintha a tényleges forráskódra alkalmazta volna őket. Ez lehetővé teszi, hogy kidolgozza azokat a módszereket, amelyek segítségével a webhely sokkal gyorsabban betöltődhet, és megkönnyíti a hibák kiküszöbölését.
A Chrome DevTools elérése
A Chrome DevTools programot többféleképpen is elérheti. Ha a fejlesztői eszközöket Mac OS rendszeren a parancsikon módszerrel szeretné megnyitni, nyomja meg a gombot Cmd + Opt + I . Ha Windows operációs rendszert használ, nyomja meg a gombot Ctrl + Shift + I billentyűk a billentyűzeten.
Alternatív megoldásként elérheti a Chrome fejlesztői eszközeit a képernyő jobb felső sarkában található három pontra kattintva. Irány a További eszközök és válassza ki Fejlesztői eszközök . Egy másik lehetőség, hogy jobb gombbal kattint a weboldalra, majd a Ellenőrizze választási lehetőség.
A Chrome fejlesztői eszközök használata a webhely diagnosztizálásához
A Chrome DevTools számos lehetőséget kínál a weboldal csípésére és hibaelhárítására. Vessünk egy pillantást a DevTools segítségére.
Tekintse meg, hogyan néz ki webhelye okostelefonon
Miután átállította a Chrome böngészőt fejlesztői módra, a weboldal félméretű verzióját jeleníti meg. Ez azonban nem ad valódi képet arról, hogyan nézne ki okostelefonon vagy táblagépen.
Szerencsére a weboldal képernyőméretének beállítása mellett a Chrome DevTools lehetővé teszi a különböző mobil képernyő típusok és verziók közötti váltást is.
Az opció eléréséhez kapcsolja be a Ellenőrizze mód. Ezután kattintson a Fogékony legördülő menüben a DevTools bal felső sarkában, és válassza ki a kívánt mobileszközt. A weboldal ezután megjeleníti és beállítja, hogy illeszkedjen a kiválasztott mobileszköz méretéhez.
hogyan készítsünk keretet a facebookon
Nyissa meg a weboldal forrásfájljait
A Chrome DevTools segítségével elérheti a weboldalt alkotó fájlokat. Ezen fájlok eléréséhez kattintson a gombra Források opciót a DevTools menü felső részén. Ez feltárja a webhely fájlrendszerét, és szerkesztést is biztosít.
Kereshet forrásfájlokat is, amelyek hasznosak lehetnek, ha olyan webhelyet kezel, amely sok erőforrást tartalmaz. Ha forrásfájlt szeretne keresni a DevTools segítségével, kattintson a Keresés opció közvetlenül a konzol felett.
Ha azonban nem találja a Keresés opció, jobb alternatíva a billentyűparancsok használata. Mac OS esetén nyomja meg a gombot Cmd + Opt + F gombokat a forrásfájl kereséséhez. Ha Windows operációs rendszert használ, nyomja meg a gombot Ctrl + Shift + F gombot a forrásfájl keresősávjának eléréséhez.
Élő szerkesztések végrehajtása a weboldalon
A DevTools használatának egyik fő célja egy a weboldal elemeinek azonnali hamis szerkesztése . Miután átváltott a fejlesztői eszközökre, a webhelyre kattintva szerkesztheti a HTML -tartalmat Elemek választási lehetőség. Ezután kattintson a jobb gombbal arra a pontra, amelyen módosítani kívánja a kódszerkesztőt, és válassza a lehetőséget Szerkesztés HTML -ként .
A soron kívüli CSS -tulajdonságok szerkesztéséhez válassza a lehetőséget Források . Ezután válassza ki a szerkeszteni kívánt CSS -fájlt. Helyezze a kurzort a választott sorra a kódkonzolon az élő szerkesztéshez. Ezzel azonnali visszajelzést kap a weboldalon alkalmazott stílusmódosításokról.
Ne feledje, hogy amikor egy oldalt a DevTools eszközön keresztül szerkeszt, az oldal újratöltése a böngészőben visszaállítja eredeti formáját, és a szerkesztés csak Ön számára látható. A DevTools segítségével történő szerkesztés nem befolyásolja a webhely zökkenőmentes működését és használatát más felhasználók számára.
Javítsa ki a JavaScript kódot a DevTools Console segítségével
A JavaScript hibakeresésének egyik legjobb módja a Chrome fejlesztői eszközeinek használata. Közvetlen jelentést ad az érvénytelen szkriptekről, valamint a hiba pontos helyéről.
Jó gyakorlat, ha a DevTools eszközt mindig nyitva tartja, miközben JavaScript -alapú webhelyet tervez. Például a console.log () JavaScript parancs utasításkészleten megjeleníti a napló eredményét a DevTools konzolban, ha a program sikeresen fut.
Alapértelmezés szerint a konzol jelent minden JavaScript -problémát a webhelyen. A konzolt a DevTools alsó részén találja, vagy a gombra kattintva érheti el Konzol lehetőséget a Chrome DevTools ablakának tetején.
Erőforrás -betöltés figyelése adatbázisból
A JavaScript hibakeresésen túl a konzol olyan erőforrások részleteit is megadhatja, amelyek nem megfelelően töltődnek be a webhely adatbázisából.
Bár ez nem mindig a legjobb módja a háttérprogramok hibakeresésének, mégis azt jelzi, hogy mely erőforrások térnek vissza a 404 hiba az elemek adatbázis lekérdezésének futtatása után.
Kapcsolódó: Gyakori webhelyhibák és azok jelentése
Váltsa át a Chrome fejlesztői eszközök tájolását
A Chrome fejlesztői eszközök pozíciójának megváltoztatásához kattintson a három menüpontra a DevTools eszközön belül (nem a fő a böngészőben). Ezután válassza ki a kívánt pozíciót a Kikötő oldal választási lehetőség.
Telepítse a Chrome DevTools bővítményeket
Telepíthet nyelvi vagy keretrendszer-specifikus bővítményeket is, amelyek működnek a Chrome DevTools alkalmazásban. Ezeknek a bővítményeknek a telepítése lehetővé teszi a weboldal hatékonyabb hibakeresését.
A Chrome DevTools bővítményeinek listáját a Chrome -ban érheti el Kiemelt DevTools bővítmények Képtár.
Biztonsági problémák keresése a webhelyen
A Chrome DevTools segítségével olyan paraméterek alapján értékelheti webhelyének biztonságát, mint például webes biztonsági tanúsítványok és többek között mennyire biztonságos a kapcsolat. A webhely biztonságának ellenőrzéséhez kattintson a gombra Biztonság opciót a DevTools tetején.
Az Biztonság lapon áttekintheti webhelye biztonsági adatait, és elmondja az esetleges fenyegetéseket.
Ellenőrizze webhelyét
A Chrome DevTools rendelkezik egy olyan funkcióval, amely lehetővé teszi webhelye általános teljesítményének ellenőrzését bizonyos paraméterek alapján.
A funkció eléréséhez válassza a Világítótorony opciót a DevTools ablak tetején. Ezután válassza ki az ellenőrizni kívánt paramétereket, majd jelölje be a Mobil vagy Asztal lehetőségeket, hogy lássa, hogyan teljesít weboldala a különböző platformokon.
Ezután kattintson a gombra Jelentést készít hogy elemezze a weboldalát a korábban kiválasztott paraméterek alapján.
A weboldal futási vagy betöltési teljesítményét a gombra kattintva is felmérheti Teljesítmény választási lehetőség. A teszt futtatásához kattintson a ikon melletti ikonra Kattintson a felvétel gombra lehetőség futásidejű elemzés elvégzésére. Alternatív megoldásként kattintson az alatta lévő újratöltés gombra a betöltési idő teljesítményének értékeléséhez. Kattintson Álljon meg az elemző leállításához és az eredmények megjelenítéséhez.
Használja ki a Chrome DevTools előnyeit
Attól függően, hogy mire van szüksége, a Chrome DevTools nem csak egyszerű webhely -hibakeresést tesz lehetővé. Szerencsére a DevTools könnyen használható minden készségszintű programozó számára. Még a weboldal frontend fejlesztésének néhány alapját is megtanulhatja, ha megkeresi a felkeresett webhelyek forráskódját.
hogyan lehet törölni a cookie -kat az iPhone -on
Lehet, hogy más lehetőségeket is felfedez, amelyeket ebben a cikkben nem tárgyaltunk. Tehát nyugodtan játsszon a rendelkezésre álló funkciókkal. Ezenkívül ezeknek a funkcióknak a módosítása nem árt egy webhelynek.
Részvény Részvény Csipog Email A Chrome OS használata Raspberry Pi -nNem engedheti meg magának a Chromebookot? Alternatívát keres a Raspbianra? A következőképpen telepítheti a Chrome OS verzióját a Raspberry Pi -re.
Olvassa tovább Kapcsolódó témák- Internet
- Programozás
- HTML
- Webfejlesztés
- JavaScript
- Google Chrome
Idowu szenvedélyes minden intelligens technológia és termelékenység iránt. Szabadidejében kódolással játszik, és ha unatkozik, sakktáblára vált, de szeret időnként elszakadni a rutintól. Szenvedélye, hogy megmutassa az embereknek a modern technológia körüli utat, arra ösztönzi, hogy többet írjon.
Továbbiak Idowu Omisola -tólIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide