Webfejlesztő eszközök - Web development tools
A webfejlesztő eszközök (amelyeket gyakran devtools -nak hívnak ) lehetővé teszik a webfejlesztők számára, hogy teszteljék és hibakeresést végezzenek a kódjukkal . Ezek annyiban különböznek a weboldal -készítőktől és az integrált fejlesztői környezetektől (IDE -k), hogy nem segítenek egy weboldal közvetlen létrehozásában , inkább a webhely vagy webes alkalmazás felhasználói felületének tesztelésére használt eszközök .
A webfejlesztő eszközök böngészőbővítményként vagy beépített szolgáltatásként érkeznek a böngészőkbe . A legnépszerűbb webböngészők, mint például a Google Chrome , a Firefox , az Internet Explorer , a Safari , a Microsoft Edge és az Opera , beépített eszközökkel segítik a webfejlesztőket, és számos további kiegészítő megtalálható a megfelelő plugin-letöltő központokban.
Webfejlesztő eszközök lehetővé teszik a fejlesztők számára a munka, a különféle webes technológiák, többek között a HTML , CSS , a DOM , JavaScript és egyéb összetevők, amelyek kezelik a böngészőt. A webböngészők növekvő igénye miatt, hogy többet tegyenek, a népszerű webböngészők több, fejlesztőknek szánt funkciót is tartalmaztak.
Webfejlesztői eszközök támogatása
Számos figyelemre méltó webböngésző támogatja a webfejlesztői eszközöket, amelyek lehetővé teszik a webes tervezők és fejlesztők számára, hogy megnézzék oldalaik összetételét. Ezek mind olyan eszközök, amelyek a böngészőbe vannak beépítve, és nem igényelnek további modulokat vagy konfigurációt.
- Firefox - F12megnyitja a Web Console / Browser Console -t (Firefox 4 óta). A Web Console egyetlen tartalomlapra vonatkozik; a Böngésző konzol a teljes böngészőre vonatkozik. Sok kiegészítő is létezik, köztük a Firebug .
- Google Chrome - Chrome fejlesztői eszközök (DevTools)
- Internet Explorer és Microsoft Edge - F12megnyitja a Webfejlesztői eszközöket (a 8. verziótól kezdve)
- Opera - Opera Dragonfly
- Safari - Safari webfejlesztő eszközök (a 3. verzió óta)
Leggyakrabban használt funkciók
A böngésző beépített webfejlesztői eszközei általában akkor érhetők el, ha az egérrel egy weboldal valamelyik elemére mutatnak, és a helyi menüben az "Elem vizsgálata" vagy hasonló lehetőséget választják . Alternatív megoldásként a F12kulcs egy másik gyakori parancsikon lehet.
HTML és a DOM
A HTML és DOM megjelenítő és szerkesztő rendszerint megtalálható a beépített webfejlesztő eszközökben. A különbség a HTML- és a DOM -megtekintő, valamint a webböngészők nézetforrás -funkciója között az, hogy a HTML- és DOM -megjelenítő lehetővé teszi, hogy a DOM -ot úgy jelenítse meg, ahogyan azt megjelenítették, amellett, hogy módosíthatja a HTML -t és a DOM -ot, és megtekintheti a a változás az oldalon megjelenik a módosítás végrehajtása után.
A kiválasztáson és szerkesztésen túl a HTML elemek panelek általában a DOM objektum tulajdonságait is megjelenítik, például a megjelenítési méretet és a kaszkád stílusú lap tulajdonságait.
A Firefox 11–46 -os verzióit a WebGL -t használó 3D -s oldalellenőrzővel látták el , ahol az elemek egymásba ágyazását az oldalfelületből kiálló rétegekkel vizualizálták.
Weblapok, erőforrások és hálózati információk
A weboldalak általában betöltődnek, és további tartalmat igényelnek képek, szkriptek, betűtípusok és egyéb külső fájlok formájában. A webfejlesztő eszközök lehetővé teszik a fejlesztők számára, hogy fa struktúrájú listában ellenőrizzék a weboldalra betöltött és elérhető erőforrásokat, és a stíluslapok megjelenése valós időben tesztelhető.
A webfejlesztő eszközök lehetővé teszik a fejlesztők számára a hálózathasználattal kapcsolatos információk megtekintését is, például megtekinthetik a betöltési időt és a sávszélesség -használatot, valamint azt, hogy mely HTTP fejléceket küldik és fogadják.
Profilozás és auditálás
A profilozás lehetővé teszi a fejlesztők számára, hogy információkat rögzítsenek egy weboldal vagy webes alkalmazás teljesítményéről. Ezzel az információval a fejlesztők javíthatják a szkriptek teljesítményét. A naplózási funkciók az oldal elemzését követően javaslatokat tehetnek a fejlesztőknek az optimalizáláshoz az oldal betöltési idejének csökkentése és a válaszkészség növelése érdekében. A webfejlesztő eszközök általában rögzítik az oldal megjelenítéséhez szükséges időt, a memóriahasználatot és az eseménytípusokat is.
Ezek a funkciók lehetővé teszik a fejlesztők számára, hogy optimalizálják weboldalukat vagy webalkalmazásukat.
JavaScript hibakeresés
A JavaScriptet gyakran használják a webböngészőkben. A webfejlesztő eszközök általában tartalmaznak egy panelt a szkriptek hibakereséséhez, lehetővé téve a fejlesztők számára, hogy órajeleket, töréspontokat adjanak hozzá, megtekinthessék a hívásköteget, és szüneteltessenek, lépjenek át, lépjenek be és lépjenek ki a JavaScript hibakeresése közben.
A JavaScript konzol általában szerepel. A konzolok lehetővé teszik a fejlesztők számára, hogy beírják a JavaScript parancsokat és hívási függvényeket, vagy megtekinthessék azokat a hibákat, amelyek a szkript végrehajtása során előfordulhatnak.
Bővítmények és bővítmények
A modern webböngészők támogatják a bővítmények vagy bővítmények használatát a funkciók hozzáadásához vagy bővítéséhez. Sok közös plugin létezik, amelyek sokféle kiegészítő szolgáltatást nyújthatnak.