Hibák a weboldalakon és azok megkeresése és javítása. Szkripthiba javítása az Internet Explorer programban a konzol használatával szintaktikai és egyéb kódhibák észlelésére

A felhasználók gyakran megfigyelhetnek olyan helyzetet, amikor egy parancsfájl-hibaüzenet jelenik meg az Internet Explorer (IE) böngészőjében. Ha a helyzet elszigetelt, akkor nem kell aggódnia, de amikor az ilyen hibák rendszeressé válnak, akkor el kell gondolkodnia a probléma természetén.

Az Internet Explorer szkripthibáit általában a HTML-oldal kódjának a böngésző általi helytelen feldolgozása, az ideiglenes internetes fájlok jelenléte, a fiókbeállítások és sok más ok okozza, amelyekről ebben az anyagban lesz szó. A probléma megoldására szolgáló módszereket is figyelembe kell venni.

Mielőtt folytatná az Internet Explorer szkripthibákat okozó problémák diagnosztizálásának általános módszereit, meg kell győződnie arról, hogy a hiba nem csak egy adott webhelyen, hanem egyszerre több weboldalon is előfordul. Ezenkívül ellenőriznie kell azt a weboldalt, amelyen ez a probléma jelentkezik egy másik fiókban, egy másik böngészőben és egy másik számítógépen. Ez leszűkíti a hiba okának keresését, és kizárja vagy megerősíti azt a feltételezést, hogy az üzenetek bizonyos fájlok vagy beállítások jelenléte miatt jelennek meg a számítógépen.

Az Internet Explorer aktív szkriptjei, az ActiveX és a Java blokkolása

Az aktív szkriptek, az ActiveX-vezérlők és a Java befolyásolják az információk létrehozásának és megjelenítésének módját a webhelyen, és a korábban leírt probléma valódi okai lehetnek, ha ezek blokkolva vannak a felhasználó számítógépén. Annak érdekében, hogy megbizonyosodjon arról, hogy emiatt szkripthibák fordulnak elő, csak vissza kell állítania a böngésző biztonsági beállításait. Ehhez kövesse az alábbi irányelveket.

• Nyissa meg az Internet Explorer 11-et
• Szolgáltatás

• Az ablakban lépjen a lapra Biztonság
• Ezután kattintson a gombra Alapértelmezett majd a gombot rendben

Internet Explorer ideiglenes fájlok

Minden alkalommal, amikor megnyit egy weboldalt, az Internet Explorer elmenti a weboldal helyi másolatát a számítógépére úgynevezett ideiglenes fájlokban. Ha túl sok ilyen fájl van, és az ezeket tartalmazó mappa mérete eléri a több gigabájtot, akkor problémák léphetnek fel a weboldal megjelenítésével, vagyis egy script hibaüzenet jelenik meg. Az ideiglenes fájlok mappájának rendszeres törlése segíthet a probléma megoldásában.
Az ideiglenes internetes fájlok törléséhez kövesse az alábbi lépéseket.

• Nyissa meg az Internet Explorer 11-et
• A böngésző jobb felső sarkában kattintson a ikonra Szolgáltatás fogaskerék formájában (vagy az Alt + X billentyűkombinációval). Ezután a megnyíló menüben válassza ki a lehetőséget
• Az ablakban lépjen a lapra Tábornok
• Szakaszban Böngészőelőzmények nyomja meg a gombot Töröl…

• Az ablakban Böngészési előzmények törlése jelölje be a tételek melletti négyzeteket Ideiglenes fájlok az internetről és webhelyekről, Cookie-k és webhelyadatok, Folyóirat
• Kattintson a gombra Töröl

Víruskereső szoftver működése

Szkripthibák egy víruskereső program működésén keresztül lehetségesek, amikor blokkolja az aktív szkripteket, az ActiveX- és Java-vezérlőket az oldalon, vagy mappákat az ideiglenes böngészőfájlok mentéséhez. Ebben az esetben olvassa el a telepített víruskereső termék dokumentációját, és tiltsa le a mappák vizsgálatát az ideiglenes internetes fájlok mentéséhez, valamint az interaktív objektumok blokkolásához.

A HTML-oldal kódjának helytelen feldolgozása

Általában egy adott webhelyen jelenik meg, és azt jelzi, hogy az oldal kódja nincs teljesen igazítva az Internet Explorerrel való működéshez. Ebben az esetben a legjobb, ha letiltja a szkriptek hibakeresését a böngészőben. Ehhez kövesse az alábbi lépéseket.

• Nyissa meg az Internet Explorer 11-et
• A böngésző jobb felső sarkában kattintson a ikonra Szolgáltatás fogaskerék formájában (vagy az Alt + X billentyűkombinációval). Ezután a megnyíló menüben válassza ki a lehetőséget
• Az ablakban lépjen a lapra Továbbá
• Ezután törölje a jelölést a négyzetből Értesítés megjelenítése minden szkripthibárólés nyomja meg a gombot rendben.

Ez a leggyakoribb okok listája, amelyek az Internet Explorer programban szkripthibákat okoznak, ezért ha elege van az ilyen üzenetekből, figyeljen egy kicsit és oldja meg a problémát egyszer s mindenkorra.

Előfordulhat, hogy a böngésző értesíti a felhasználót, hogy szkripthiba történt. Ez a szabványos Internet Explorerre is vonatkozik. Ebben egyébként egy ilyen hiba gyakrabban fordul elő, mint más böngészőkben. Mi okozhatja ezt a problémát és hogyan lehet megoldani?

Szkripthiba általában akkor fordul elő, ha a böngésző nem tudja megfelelően feldolgozni a HTML-oldal kódjait. Ezenkívül a letöltési hiba túl sok ideiglenes fájlt okozhat (főleg, ha a böngészőt hosszú ideig nem tisztították meg tőlük). Ezenkívül egyes fiókbeállítások megakadályozhatják az erőforrás megfelelő elindítását. Ma megvizsgáljuk, hogyan lehet eltávolítani a szkripthibát az Internet Explorer programban, figyelembe véve ezeket az okokat.

Első lépések

Ha ez először történt meg, akkor lehet, hogy elszigetelt esetről van szó. Ezért nincs miért aggódni. Próbáld meg újratölteni az oldalt. Ha ismét megjelenik egy értesítés, amely megkérdezi, hogy leállítja-e a szkript futtatását, kattintson a "Nem" gombra.

Megállapítottuk, hogy ez nem egyedi eset. Mi legyen a következő? Nézze meg, hogy hibát jelez-e az összes oldal megnyitásakor, vagy csak egyet. Ha az egyiken, akkor lépjen egy másik fiókba ugyanazon a webhelyen, nyissa meg az oldalt egy másik böngészőben és számítógépen.

Használhat másik böngészőt is. Ma már nagyon sok van belőlük, miközben semmivel sem maradnak el egy standard hangszertől, sőt sok mindenben felülmúlják őket. Ha minden könyvjelzőjét elmentette az IE-ben, használhatja az adatexportálási funkciót.

Az aktív ActiveX és Java szkriptek blokkolása

Úgy döntött, hogy nem vált át másik programra? Ebben az esetben tovább oldjuk a problémát.

Az Active X és a Java le van tiltva vagy blokkolva. Ez a szkripthibák egyik leggyakoribb oka. Mi a teendő ebben az esetben? Vissza kell állítania a böngésző biztonsági beállításait.

Futtassa a programot. Kattintson a fogaskerék ikonra. Ő lesz a csillag mellett. A megjelenő lehetőségek listájában válassza az "Internetbeállítások" részt. Ez lesz az utolsó előtti pont.

Nyissa meg a második „Biztonság” lapot. Kattintson az "Alapértelmezett" gombra. Kattintson az OK gombra.

Ideiglenes fájlok a böngészőben

Az Internet Explorer elmenti az oldalverziókat, amikor elindulnak. Minden másolat egy ideiglenes fájlokat tartalmazó mappában tárolódik. Ezt a mappát időnként meg kell tisztítani. Ha a mappa például több gigabájtot ér el, a böngésző lefagy, és különösen szkripthibát ad ki. Ebben az esetben el kell távolítania a megadott tárhely összes tartalmát.

A következő módszer segít megszabadulni a gyorsítótárban lévő szeméttől, a böngészési előzményektől, a cookie-któl, a webes űrlapadatoktól és a jelszavaktól. Természetesen Önnek joga van kiválasztani, hogy milyen fájlokat töröljön és melyeket tartsa meg.

• Ismét kattintson a számunkra már ismerős fogaskerékre. Válassza az "Internetbeállítások" lehetőséget.
• Váltson az "Általános" szakaszra.
• A "Böngészőelőzmények" blokkban magabiztosan kattintson a "Törlés" gombra.
• Jelölje be az ideiglenes fájlok és más típusú fájlok jelölőnégyzeteit, amelyektől meg szeretne szabadulni, majd erősítse meg a törlést.

Antivírus blokkolás

Előfordulhat, hogy a szkriptek nem futnak, mert a víruskereső szoftver blokkolja őket, vagy ideiglenes fájlokat tartalmazó mappákat vizsgál. Mit kell csinálnunk? Nyissa meg a víruskereső ablakot, és tiltsa le az interaktív elemek blokkolását. Nincs egyetlen letiltási utasítás minden vírusirtóhoz. Az eljárás a víruskereső típusától függően eltérő lehet.

A HTML-oldal kódjának helytelen feldolgozása

Ez a helyzet általában akkor fordul elő, ha csak egy webhely fagy le. Ez azt jelenti, hogy az oldal kódja nem megfelelő az Internet Explorer számára. Az oldal betöltéséhez le kell tiltani a szkriptek hibakeresését.

• Menjen vissza az "Internetbeállítások" ablakhoz.
• Ezúttal ugorjon a negyedik „További” blokkra.
• Törölje a jelet az „Értesítés megjelenítése minden szkripthibánál” négyzetből. Mentse el a változtatásokat.

Ha a felhasználó letiltotta a szkriptek hibakeresését, a hibaértesítés többé nem jelenik meg. Az oldal úgyis lefagy, így ez a módszer csak akkor használható, ha csak egy oldalon van probléma.

Töltse le az elérhető frissítéseket

A szkript az is előfordulhat, hogy hibásan fut, mert hiányoznak a szükséges frissítések a rendszerhez és az Internet Explorerhez. A frissítés teljesen megoldhatja a problémát.

Nyissa meg a frissítési központot a számítógépén, és ellenőrizze, hogy minden frissítés telepítve van. Ha nem, akkor futtassa a telepítést.

A rendszerleíró adatbázis használata

A hiba akkor jelentkezhet, amikor a Windows elindul, vagyis amikor a számítógép elindul. Ez messze nem súlyos kudarc, de még korrigálni kell. A rendszerleíró adatbázis átveszi az irányítást. A hiba elhárításának módja sokkal bonyolultabb, mint az előzőekben. Ha új vagy, kérj meg egy hozzáértőbb felhasználót, hogy tegye meg helyetted.
1. Indítsa el a "Futtatás" ablakot, és írja be a regedit parancsot a sorba.

2. Kattintson a HKEY_LOCAL_MACHINE blokkra a jobb egérgombbal, és válassza az "Engedélyek" lehetőséget.

3. Az alább megjelenő ablakban állítsa be a teljes hozzáférést és az olvasást.

4. Nyissa meg a Speciális beállításokat. Kattintson a „Módosítás” gombra, és állítsa be az „Engedélyezés” lehetőséget

5. Megerősítjük a beállítások mentését. Kattintson az OK gombra.

6. Indítsa újra a készüléket. Parancssor hívása. Az utolsó érintés a következő parancs: regsvr32 msxml.dll. Nyomja meg az Enter billentyűt a billentyűzeten.

Az Internet Explorer szkripthibája számos módon megoldható. Egyszerre bemutattuk az egyszerűket és az összetetteket. A módszer megválasztása az októl függ, és mivel nem olyan egyszerű meghatározni, használjon módszert módszerre.

Az F12 fejlesztői eszközök használata a JavaScript hibák elhárítására

Ez a tartalom az F12 Developer Tools egy régebbi verziójára hivatkozik. Töltse le a legújabb F12 dokumentációt.

Az F12 eszközök lehetővé teszik a fejlesztők számára a JavaScript kód gyors hibakeresését a böngésző elhagyása nélkül. A Windows Internet Explorer 9 minden példányába beépített F12 fejlesztői eszközök hibakereső eszközöket biztosítanak, például töréspontokat, figyelést és helyi változók megtekintését, üzenetkonzolt és azonnali kódfuttatást.

Ez a cikk bemutatja, hogyan használhatja az F12 fejlesztői eszközöket JavaScript-kód hibakeresésére. Ez a cikk nem egy teljes körű hibakeresési oktatóanyag, célja, hogy kiemelje azokat az eszközöket, amelyek segíthetik a fejlesztőt a generált kód használatának megkezdésében. Az Internet Explorer 9 böngészőben nyomja meg a gombot F12 a Fejlesztői eszközök megnyitásához, és kattintson a fülre Forgatókönyv kezdeni.

A lapon Forgatókönyv a bal oldalon található a forráskód terület, ahol a fejlesztő megtekintheti a JavaScript-kódját, beállíthatja a töréspontokat, és átlépheti a funkcióit. A jobb oldali ablaktáblában válthat a konzollapok, a figyelési változók, a helyi változók, a figyelési halom és a töréspontok között.

A hibakereső elindítása és leállítása

Amikor először nyitja meg az F12 fejlesztői eszközöket, és kattintson a fülre Forgatókönyv, a kód a bal oldalon, a konzol pedig a jobb oldalon jelenik meg. Egy üzenet jelenhet meg a konzolon: „Frissítse az oldalt, hogy megtekinthesse az F12 fejlesztői eszköz megnyitása előtt kapott üzeneteket.” A weboldal frissítésekor a konzol megjeleníti a böngésző által okozott hibákat és figyelmeztetéseket.

A töréspontok beállításához, a vezérlőelemek és a helyi változók megtekintéséhez, valamint egy függvénysorozat hívási veremének megtekintéséhez kattintson a Indítsa el a hibakeresést. Gombnyomás Indítsa el a hibakeresést frissíti a weboldalt, és újra futtatja a kódot a hibakeresőben.

A konzol használata szintaktikai és egyéb kódhibák keresésére

A legtöbb programozási projektben a hibákat szintaktikai, logikai és adatbeviteli hibákra osztják. A konzolnézet megjeleníti a JavaScript-hibákat és kivételeket, valamint a DOM-kivételeket. A kódon belül a konzolobjektum segítségével programállapot- és hibaüzeneteket küldhet a konzolnak az „alert()” vagy a rendelkezésre álló képernyőterület hívása helyett. Például hozzáadhatja a sort

Window.console.log("A fájl sikeresen megnyílt");

A JavaScript-kódba, hogy információt kapjon a szkript állapotáról anélkül, hogy megszakítaná a végrehajtását. További információ: .

A szkriptek megjelenésének javítása

Az F12 fejlesztői eszközök a kód megjelenítési módjától függetlenül képesek a JavaScript hibakeresésére sor vagy utasítás szinten. Még a tömörített szkripteken is átléphet, hogy úgy nézzenek ki, mint egy nagy kódblokk. De néha nehéz nyomon követni a logikát, ha a kód egy blokkból áll.

A szkript formázásához kattintson a gombra Konfigurációés válassza ki az elemet Formázza a JavaScriptet. A következő képernyőképeken a JavaScript kódblokk látható a formázás előtt és után.

A kód végrehajtásának megszakítása

A töréspontok beállítása az F12 fejlesztői eszközökben hasonló a töréspontok beállításához a bináris kódú hibakeresőkben, például a Microsoft Visual Studioban. A bal oldali ablaktáblában kattintson a leállítani kívánt kódsor bal oldalán. A töréspontok átkapcsolhatók, így egy kattintás hozzáad egy töréspontot, a második kattintás pedig eltávolítja azt.

Annyi töréspontot adhat hozzá a kódhoz, amennyire szüksége van. Kattintson a jobb gombbal egy kódsorra, és válassza a parancsot Töréspont beszúrása, vagy kattintson a bal oldali mezőbe azon utasítás mellett, ahol töréspontot szeretne beállítani.

Az F12 szerzői eszközök használatával töréspontot állíthat be az utasítás szintjén, még akkor is, ha ezek az utasítások több utasítás blokkjában vagy sorában vannak. Ez lehetővé teszi töréspont létrehozását egy tömörített kódszegmensben. A töréspont beállításának legjobb módja ilyen feltételek mellett, ha jobb gombbal kattint a kódra, és kiválasztja Töréspont beszúrása. A korábban leírt script formázást (szép nyomtatás) is használhatja a vonalak formázásával, hogy könnyebben kattintsanak a margókon.

Több töréspontot is kezelhet a Töréspontok lapon

Ha nagy mennyiségű kódot használ nagyszámú törésponttal, vagy akár több fájlból áll, használhatja a lapot Töréspontok az összes kívánt pont nyomon követéséhez. A lapon Forgatókönyv kattintson a fülre Töréspontok a tulajdonságban vagy a jobb oldali ablaktáblában. Példaként tekintse meg a következő képet:

A lapon Töréspontok a fejlesztő engedélyezheti vagy letilthatja, törölheti, kiválaszthatja és másolhatja a töréspontokat anélkül, hogy a kívánt töréspontok pontos helyére kellene navigálnia. Egy töréspont engedélyezéséhez vagy letiltásához jelölje be vagy törölje a jelölőnégyzetet a módosítani kívánt beállítás mellett. A listában duplán kattintva közvetlenül is ugorhat egy töréspontra a kódban. A gomb megnyomásával egyszerre több töréspontot is kiválaszthat CTRLés kattintson a kívánt töréspontokra.

A lapon Töréspontok A helyi menüt (amely jobb gombbal megnyílik) is használhatja a töréspont-csoportok eltávolításához, engedélyezéséhez, letiltásához vagy másolásához. Ezeket a paramétereket a következő táblázat mutatja be.

Menü tétel	Akció
Töröl	Töréspont törlése a helyreállítás lehetősége nélkül.
törölj mindent	Az összes töréspont törlése a helyreállítás lehetősége nélkül.
Az összes engedélyezése	Az összes jelölőnégyzet bejelölése a listában.
Az összes letiltása	Törölje az összes jelölőnégyzetet a listában.
Feltétel	Lehetővé teszi feltételes töréspont beállítását egyetlen ponthoz. Ez az elem nem érhető el, ha több töréspont van kiválasztva.
Másolat	Másolja a kiválasztott töréspontok leírását.
Mindet kiválaszt	Kijelöli az összes töréspontot a listában.
Menjen a forráskódhoz	A kiválasztott töréspont megjelenítéséhez lépjen a kód bal oldalára. Ez az elem nem érhető el, ha több töréspont van kiválasztva.

Feltételes töréspontok

A kódsor feltétel nélküli leállítása hasznos, de még erősebb a leállítás, amikor egy tulajdonság vagy változó elér egy adott értéket. Ha le szeretne állítani egy adott érték elérésekor vagy beállításakor, hozzon létre egy töréspontot, majd nyissa meg a lapot Töréspontok. Kattintson a jobb gombbal a kívánt töréspontra, és válassza a parancsot Feltétel.

A feltételek párbeszédpanelen adja hozzá a megfelelő JavaScript utasítást. A végrehajtó kód ezen a törésponton leáll, amikor az utasítás kiértékelése igaz. Például a következő képen a kód végrehajtása leáll, ha az oAudio.paused tulajdonság értéke hamis lesz.

Megadhat egyetlen feltételt, vagy logikai operátorokat használhat összetettebb leállítási feltétel létrehozásához. De ne feledje, hogy a változók és objektumok hatóköre ugyanaz marad, mint amikor a töréspont-nézegető ablakában jelennek meg. A hatókörön kívüli feltétel értéke nem lesz igaz.

Átlépni a kódon

Ha a kód végrehajtása leáll egy törésponton, az ugrás gombokkal folytathatja a végrehajtást ( F5), a végrehajtás megszakad ( CTRL+SHIFT+B), lépésről lépésre belép a funkcióba ( F11), függvény kihagyja ( F10) vagy kilép a funkcióból ( SHIFT+F11). Ha a végrehajtást leállítják egy törésponton vagy átlépve, a hibakereső ablak valójában modálissá válik.

Ezért, mielőtt folytatná az interakciót a weboldallal, le kell állítania a hibakeresést ( SHIFT+F5) vagy folytassa a végrehajtást ( F5). Ezt szem előtt kell tartania, ha úgy tűnik, hogy egy weboldal nem válaszol. Ha több ablak megnyitásakor a hibakereső ablak nincs felül, akkor várhat a töréspont reakciójára. Ebben az esetben a weboldal feletti irányítás visszavételéhez keresse meg az adott weboldal hibakereső ablakát, és kattintson a gombra F5 a folytatáshoz vagy kattintson a gombra SHIFT+F5 hogy hagyja abba a hibakeresést.

Változók megtekintése az óra és a helyi lapok használatával

Tab néz lehetővé teszi a figyelési változók meghatározását és megtekintését a hibakereső kódban. Tartalmazza az adott változók nevét, értékét és típusát. A megjelölt sorra kattinthat kattintson a hozzáadáshoz..., a lapon Referencia értékekés adjon meg egy változónevet. Ha nincs kedve beírni a változó nevét, kimásolhatja és beillesztheti a vezérlőváltozók listájába.

A figyelési változók listájában szereplő értékek attól függetlenül jelennek meg, hogy a kód jelenleg hibakeresés alatt áll-e vagy sem. Ha a hibakeresés engedélyezve van, és a kódkövetés vagy a töréspontok be vannak állítva, a listában szereplő változók értékeinek hatókörét a szkript aktuális végrehajtási pontja határozza meg. Ha a hibakeresés le van tiltva, a hatókör globális, és csak a globális változók értékei jelennek meg.

A lappal ellentétben Referencia értékek, amelynek értékei attól függetlenül megjelennek, hogy a megfelelő változók hatókörben vannak-e, a lapon Helyi csak az aktuális hatókör változói jelennek meg. A megtekintéshez nem kell változókat hozzáadnia, mert ha módosítja a hatókört, ez a lap frissül, hogy megjelenítse az összes elérhető változót.

A különbség megtekintéséhez nyissa meg a következő példát az Internet Explorer 9-ben, és kövesse a megadott lépéseket.

Fuss

1. Töltse le a példát az Internet Explorer 9-ben.
2. Nyomja meg a gombot F12 az F12 fejlesztői eszközök megnyitásához, és kattintson a fülre Forgatókönyv.
3. A bal oldali ablaktáblában görgessen az első függvényhez, kattintson jobb gombbal a "var a = 5;" sorra. és válassza a parancsot Töréspont beszúrása.
4. Kattintson a gombra Indítsa el a hibakeresést, majd a böngészőben kattintson a gombra Fuss(Végrehajtás).
5. Az F12 Fejlesztői eszközökben kattintson a fülre Referencia értékek a jobb oldalon, és adja hozzá az "a, b, c és d" változókat.
6. Lépjen át a kódon a gomb megnyomásával F11 vagy gombot Közbelép, és tekintse meg a változókat a lapon Referencia értékek.

Az egyes funkciók átlépésekor a keresési értékeknek definiálatlanról néhány értékre kell változniuk.

Érezni a különbségeket a lapon Helyi, nyomja meg a gombot F5 hogy folytassa a fejlesztői eszközökkel F12. A böngészőben kattintson a gombra a weboldalon Fuss(Futtatás) a kód újbóli futtatásához és az F12 fejlesztői eszközökhöz való visszatéréshez. A lap jobb oldalán Forgatókönyv kattintson a fülre Helyiés nyomja meg a gombot F11 hogy újra átlépje a funkciókat. Vegye figyelembe, hogy a helyi változók listája csak olyan változókat tartalmaz, amelyeknek van értéke. Tekintettel Helyi megmutatja a függvénynek átadott argumentumokat, azok értékét és típusát is.

Hívásverem nézet

Tab hívási lista lehetővé teszi a bejárt útvonal megtekintését függvények kódból történő meghívásakor. Ez segíthet felderíteni egy váratlan kódútvonalat, amely hibából eredt. A lapon hívási lista kattintson duplán bármelyik függvényre, és ugorjon a hívásához a forráskódban.

Próbálja ki a fenti példát, és kövesse a lapot hívási lista amikor lépésről lépésre kódvégrehajtás a funkciók megadásával.

A lapon hívási lista az aktuális funkció vagy hely mindig felül van (nyíl jelzi, mint a fülön hívási lista, és a kód mezőiben). A lista bármelyik függvényére duplán kattintva kiemeli a függvényt meghívó operátort.

Több forgatókönyv hibakeresése

A nagy weboldalak általában több JavaScript fájlt használnak. Az F12 fejlesztői eszközök lehetővé teszik, hogy több szkriptfájllal dolgozzon, akárcsak a kód hibakeresése során. Másik fájl megtekintéséhez kattintson a gomb melletti lefelé mutató nyílra. Indítsa el a hibakeresést a weboldalhoz társított szkriptek felsorolásához. Az F12 fejlesztői eszközök használatakor a kód az összes fájlon keresztül halad. Bármely szkriptfájlból hozzáadhat változókat a megtekintéshez, és a hívási verem nézet megmutatja a végrehajtási útvonalat a különböző parancsfájlokban található függvényeken keresztül.

A dokumentum mód beállításának módosítása

Dokumentum mód beállítása a sor jobb oldalán Menü elérhető minden F12 fejlesztői eszközök lapon, de ez a beállítás különösen hasznos az F12 lapon található kód hibakeresésekor. Forgatókönyvek. Az Internet Explorer 9 lehetővé teszi a dokumentummód módosítását, hogy emulálja a Windows Internet Explorer korábbi verzióinak szabványait. Az Internet Explorer 9-ben lépjen ki a hirdetésbőlalapértelmezés szerint a dokumentumtípust kompatibilitási módra állítja. Amikor egy új funkcióval vagy új szabvánnyal foglalkozunk, például a HTML5-ben, néhány hiba programozási hibának tűnhet, de valójában egy hiányzó vagy helytelen doctype deklaráció okozza.

Az Internet Explorer 9 F12 fejlesztői eszközei nem tudják kijavítani a kódot, de megkönnyítik a JavaScript-hibák megtalálását.

A Habréról számos cikk található, amely a webfejlesztés érdekes és összetett aspektusait írja le, de sok olyan olvasó van, aki webfejlesztői pályafutása elején szeretne olyan anyagokat látni, amelyek segítségével megteheti az első lépést a „ PHP 24 óra alatt” komoly szintű fejlesztéshez, és szeretném megosztani ezzel kapcsolatos tapasztalataimat.

A webalkalmazás funkciói két részre osztják: kliensre és szerverre. Kliens oldalon JavaScript kód működik (talán VBScript is megtalálható valahol, de ezt az esetet valószínűleg nem vesszük figyelembe), szerver oldalon - elvileg sok minden, de a PHP-t, a legnépszerűbb nyelvet fogjuk figyelembe venni webes alkalmazások szerveroldalához. Érdekes lenne szót ejteni a Flash-alkalmazások hibakereséséről és profilozásáról is a kliens oldalon, de a téma már most is kiterjedt, úgyhogy ezt most hagyjuk.

A HTML kód elemzése és validálása szintén a klienskód hibakeresési feladataihoz köthető. Úgy tűnik, ez nem teljesen a programozás területéről származó feladat, hanem fontos is.

A vizsgált feladatok egyes részeivel más cikkekben már foglalkoztunk, ezekhez hivatkozásokat is biztosítottam.

Hibakeresés és profilozás az ügyfélkódban

A JavaScript kód hibakeresésének „klasszikus” módja az alert függvény és származékai használata. Emlékszem, hogy pályafutásom elején személyesen írtam a print_r függvényt JavaScripthez, mert nem láttam lehetőséget a hibakeresési információk megjelenítésére tömbökön és objektumokon. Valahogy így nézett ki:
függvény print_r(változó) ( if (változópéldány tömb || objektum változó példánya) ( var kulcs; for (változó kulcsa) alert(kulcs + " => " + változó); ) else ( alert(változó); ) )

Természetesen szó sem volt semmilyen profilalkotásról.

Ezzel a megközelítéssel még a konzolobjektumról szóló információk is forradalmiak.

A webalkalmazások kliens oldalának sajátosságai megkövetelik a kód hibakeresését minden népszerű böngészőben. Természetesen leggyakrabban elegendő hibakeresés az Internet Explorerben és bármely más normál böngészőben, de minden lehetőséget megfontolunk.

Mozilla Firefox

Valószínűleg a Firefoxot nevezhetjük a klienskódok hibakeresésének úttörőjének. Sokáig a fejlesztésre legalkalmasabb böngészőként szerepelt, és mindezt a Firebug bővítménynek köszönheti, amely valószínűleg minden szükséges funkciót tartalmaz, kivéve a HTML kód érvényesítését.

Ezenkívül a 4-es verziótól kezdve megjelent egy beépített webkonzol, amely megvalósítja a Firebug "Console" és "Network" füleinek néhány funkcióját, valamint néhány CSS hibakeresési lehetőséget.

A 6-os verziótól kezdve megjelent a Simple JavaScript Editor, amely a Firebug egyik funkcióját is megvalósítja, és lehetővé teszi a kód írását és végrehajtását közvetlenül a böngészőben.

A 10-es verziótól kezdve megjelent a Page Inspector, amely lehetővé teszi a HTML kód és a CSS tulajdonságainak tanulmányozását, azaz megvalósítja a HTML fül funkcióit.

A HTML-kód érvényesítéséért általában a HTML-ellenőrző bővítmény felel. Csak az ikonja, amely a hibák számát jelzi a habrahabr.ru webhely főoldalán, a böngésző jobb alsó sarkában látható az oldalellenőrző képen.

Továbbá, megragadva az alkalmat, felhívom a figyelmet arra, hogy ehhez a böngészőhöz számos olyan bővítmény létezik, amelyek megkönnyítik az életét, amelyekről a Habré-n már volt megfelelő.

Google Chrome és Safari

Ezek a WebKit-alapú böngészők beépített Web Inspector szerzői eszközzel rendelkeznek, amely nagyon jól kidolgozott, és szinte ugyanazokat a funkciókat valósítja meg, mint a Firebug. Ugyanakkor tisztelegnünk kell előtte, nem lassítja le a böngészőt, ami a "nagy testvérben" található.

Chrome-ban a Ctrl+Shift+I vagy egyszerűen az F12 lenyomásával hívható meg. A Safariban jól el van rejtve, használatához engedélyezni kell a fejlesztési lehetőségeket a böngésző beállításaiban. Később a fejlesztői eszközök a főmenü „Fejlesztés” menüpontjából vagy a Ctrl+Alt+I billentyűparancs megnyomásával válnak elérhetővé.

A HTML-kód érvényesítéséhez harmadik féltől származó bővítményeket is telepítenie kell. Például a Chrome esetében ez lehet az Érvényesség . A Safarihoz még nem találtak megfelelőt.

Opera

Az Opera rendelkezik egy beépített fejlesztői eszközzel is, az "Opera Dragonfly" néven, amely a Ctrl+Shift+I billentyűkombinációval bármikor előhívható. Hasonló ahhoz, amit a WebKit bemutat nekünk, és hasonló tulajdonságokkal és előnyeivel rendelkezik, bár személyes véleményem szerint kevésbé kényelmes.

Hibakeresés és profilalkotás szerverkód

xdebug

Ahogy az elején megállapodtunk, mérlegeljük azt az esetet, amikor PHP-t használnak a szerveren. Itt a "klasszikus" hibakeresési módszerek az echo , a print_r és a var_dump , de van egy hibakereső eszköz is, mint a legjobb házakban - Xdebug . Nekem személy szerint az intézeti tanulás sajátosságaiból adódóan úgy nézett ki, mint a Delphiben.

Az xdebug kiterjesztés lehetővé teszi, hogy legalább átlépjen a kódon és megtekintse a változók értékét, ami új szintre emeli a PHP programozást. Az xdebug-gal való munka bonyolultságáról egy megfelelő . Az XDebug általában a GNU/Linux tárolókban érhető el, Windowson szintén nem túl nehéz a dll fájl másolásával telepíteni.

A bővítmény használatakor bejövő kapcsolat érkezik a szervertől a fejlesztői számítógéphez (alapértelmezés szerint a 9000-es porton), amelyet fel kell dolgoznia. Ehhez ennek megfelelően kell konfigurálnia az IDE-t.

Egyébként az IDE használata is előfeltétele a továbblépésnek. Egyes programozók úgy vélik, hogy a kódkiemeléses jegyzettömbben és az IDE-ben való programozás közötti különbség csak nagy projekteknél látható, de én személy szerint az a véleményem, hogy a különbség még a "Hello world!" programon is látható. - A szabványos függvények nevének és argumentumainak egy automatikus helyettesítése ér valamit.

XHProf

A kiterjesztésről

Igen, az xdebug profilalkotási lehetőséget biztosít, de nekem személy szerint tetszik a Facebook ilyen célú fejlesztése, az XHProf . Őszintén szólva nem végeztem semmilyen tesztet, de ez a bővítmény sokkal jobban megfelel éles szerverekhez és valós terhelés alatti profilalkotáshoz.

Telepítés

Sajnos ez a kiterjesztés nem szerepel egyetlen adattárban sem. Benne van a PECL-ben, de valamiért a rendszeres telepítése gyakran okoz gondot. Emiatt forrásból kell telepítenie.

# Szerezze be a forrásokat wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Csomagolja ki a forrásokat tar -xvf xhprof-0.9.2.tgz # Váltson a cd xhprof- kiterjesztési kódot tartalmazó könyvtárra 0.9 2/extension/ # A phpize fordítása és tesztelése ./configure make make test # Telepítse civilly checkinstall
Az xhprof.ini konfigurációs fájl valami ilyesmit ad nekünk:

extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Könyvtár a naplókhoz
xhprof.output_dir="/var/log/xhprof/"

Profilalkotás

A könyvtár, amelyet az archívum kicsomagolása után kapunk, a kiterjesztési forrásokon kívül tartalmaz egy webes felületet a profilalkotási eredmények tanulmányozására, valamint könyvtárakat az alkalmazás profilozására.

Vegyünk egy példát a profilalkotásra. A következő elemeket kell szerepeltetni a pályázati kódban:
// A szkript eleje, profilozás engedélyezése // mind a CPU, mind a memóriaterhelésnél xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* * Fő alkalmazás kódja */ // Szkript vége, profilozás befejezése, // az eredmény beírása a naplóba $xhprofData = xhprof_disable(); include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_lib.php"; include_once XHPROF_DIR."/xhprof_lib/utils/xhprof_runs.php"; $xhprofRuns = new XHProfRuns_Default(); $namespace = "egyedi név"; $runId = $xhprofRuns->save_run($xhprofData, $namespace); visszhang"\n";
Itt az XHPROF_DIR konstans arra a könyvtárra mutat, ahová a letöltött archívumot kicsomagoltuk.

Az eredmények elemzéséhez ugyanarra a webes felületre van szükség. A $XHPROF_DIR/xhprof_html/ könyvtárban található - jelöljük hagyományosan így. Például a webszerver számára elérhető helyen elhelyeztük, és az example.com/system/xhprof/ címen érhető el, majd a munka eredményének elemzéséhez a következőképpen kell hozzáférnünk:

example.com/system/xhprof/?run=%runId%&source=%namespace%

Hasonló eredményt kapunk:

A profilozás állandó jelleggel bekerülhet az alkalmazás kódjába, vagy például véletlenszerűen, bizonyos valószínűséggel vagy feltétel fennállása esetén futtatható. Például így:

$needProfiler = (mt_rand(0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
Ebben az esetben, ha az ügyfelek panaszai vagy gyanúja merül fel, egy bizonyos ideig a profilalkotás eredményeihez fordulhat. A névtér paraméter segítségével meghatározhatja, hogy az alkalmazás melyik része (melyik szkript, vezérlő, művelet) profilozott.

SQL lekérdezések profilozása

Általában az adatbázissal végzett munka jelenti a szűk keresztmetszetet az alkalmazásban. Emiatt a lekérdezés profilozása javasolt. Vegyük például egy olyan osztály részét, amely a mysql kiterjesztési függvényeket veszi körül. Igen, tudom, hogy ezt a bővítményt nem nagyon szeretik, és legalább a jó öreg IE6-nál kívánom, hogy meghaljon. Nem sürgetem a használatát, csak egy ilyen óra a kezem ügyében van.

/** * Lekérdezés * @param string $sql Lekérdezés * @param tömb $params Paraméterek * @param string $query Lefordított lekérdezés * @return array Eredmény */ public function query($sql, tömb $params = array(), & $query = "") ( $start = microtime(TRUE); // A lekérdezés végrehajtása, beleértve a "protection" paramétert is $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData($ sql , $time); // Eredmény visszaadása ) privát függvény _addProfilerData($query, $time) ( if (is_array(self::$profilerData)) ( self::$profilerData = array("query" => $query, " time" => $time); ) ) public function __destruct() ( if (is_array(self::$profilerData)) ( $this->_writeProfilerData(); self::$profilerData = FALSE; ) // Leválasztás az adatbázis ) privát függvény _writeProfilerData() ( $értékek = array(); foreach (self::$profilerData mint $sor) ( $query = mysql_real_escape_string($row["query"], $this->con); $idő = ( lebegés)$sor["idő"]; $hash = crc32($sor["lekérdezés"]); $értékek = "($hash, "$query", $time)"; ) if ($értékek) ( $strValues ​​= implode(", ", $értékek); $sql = "INSERT DELAYED A `profiler_queries` (`query_hash`, `query`, `munkaidő`) ÉRTÉKEK $strÉrtékek"; @mysql_query($sql, $this->con); ) )
Itt a lekérdezés profilozási adatai a profiler_queries táblában tárolódnak. Ez a tábla lehet MyISAM vagy Archive típusú, mivel lehetővé teszik a lusta beszúrások végrehajtását, ami nem okoz szükségtelen késleltetést a válaszadásban a profilalkotás során. Valamint a táblázatban a lekérdezések jobb keresése érdekében érdemes létrehozni egy INT típusú oszlopot, ahol a lekérdezés crc32 hash-je lesz írva, amelyen indexet kíván létrehozni.

Következtetés

A cikk elég nagy. Talán itt átmentem az elejére és érintettem a már érintett témákat, de ha idejében olvastam volna valami hasonlót - egy cikket, ahol minden információ össze van gyűjtve és hasznos linkek találhatók, akkor felbecsülhetetlen értékű lett volna. segíts nekem. Remélem, hogy cikkem segíteni fog valakinek a megvilágosodás útján.

Vannak persze mások is – ezeket mindenképpen megemlítem.

Firebug Firefoxhoz

Nem tudom biztosan, hogy szentjánosbogár más fejlesztői eszközök elődje, de határozottan a legnépszerűbb, legfelhasználóbarátabb és funkciókkal teli .

A Firebug a Firefox kiegészítője, ami azt jelenti, hogy le kell tölteni a Firefox kiegészítők webhelyéről, és telepíteni kell.

A firebug hívásához nyomja meg az F12 billentyűt.

Ennek a kiegészítőnek a jellemzői:

• Dinamikusan változó HTML ellenőrzése és szerkesztése;
• CSS szerkesztés menet közben;
• JavaScript hibakeresés, parancssor a szkriptek végrehajtásához;
• Hálózati kérések figyelése - láthatja a fájlok és szkriptek méretét és letöltési idejét, a kérések fejléceit;
• DOM elemző.

Ezekről a tulajdonságokról még sokáig lehet részletesen beszélni, de úgy gondolom, hogy minden olvasónk ismeri őket, és ha nem, akkor részletes információk a Firebug kezdőlapján, vagy ugyanezt Kantor Ilja fordítja.

Magán a firebug-on kívül szükséged lehet egy hasznos krémre is - tűzi süti, amellyel (meglepetés:-) megtekintheti és módosíthatja a sütiket.

WEB fejlesztői eszköztár Firefoxhoz

Egy másik hasznos kiegészítés az Ognelishez. Ez így néz ki:

Menjünk végig a pontokon.

Letiltás

Lehetővé teszi a JavaScript kikapcsolását, a gyorsítótár használatának letiltását, ami nagyon hasznos a fejlesztés során (lehetővé teszi, hogy az oldal a legfrissebb frissítésekkel legyen betöltve), törölje az oldalon használt színeket és cserélje le őket szabványosra, tiltsa le a küldést a hivatkozó fejlécben (az oldal, amelyről az átmenet történt).

Cookie-k

Hasznos lehetőség a cookie-kkal való munkához: megtekinthetők, törölhetők, blokkolhatók és hozzáadhatók.

css

Ez a menü tartalmazza a Fejlesztői Eszköztár legmenőbb funkcióját – a menet közbeni CSS-szerkesztést. Ezen kívül lehetőség van css megtekintésére, letiltására stb., stb. Véleményem szerint a billentyűparancsok jelenléte nagyon hasznos itt (a CTRL + SHIFT + C például lehetővé teszi, hogy azonnal lépjen az oldalstílusok megtekintéséhez)

Űrlapok

Minden az űrlapokkal való munkához: jelszavak megjelenítése, űrlapokkal kapcsolatos információk megjelenítése, űrlapmódszerek konvertálása (GET » POST és fordítva) és még sok más. Hasznos „Űrlapmezők kitöltése” funkció az űrlapmezők automatikus kitöltéséhez (például egy webhely tesztelésekor, amikor a jelszóemlékezési funkció le van tiltva. Egyébként nem látok semmi hasznosat ebben a bekezdésben.

képeket

Van egy hasznos funkció a képek kikapcsolására – megtekintheti, hogyan néz ki a webhelye képek nélkül. A képek körbeírhatók, méretük, alt-attribútumok megjelenítése.

Információ

Ebben a menüben rengeteg lehetőség van. Hasznos lehet az osztály és az id attribútumok megjelenítése az oldalon. Ezenkívül érdekes a „Színinformáció megtekintése” elem - hogy gyorsan tájékozódjon az oldalon használt színekről. "Nézet dokumentumméret" - oldalméret megtekintése. „Válaszfejlécek megtekintése” – az oldalfejlécek megtekintése.

Vegyes

A leggyakrabban használt funkció a gyorsítótár törlése. Ezen kívül az "Oldalvonalzó" - vonalzó, "Oldalnagyító" - nagyító és "Vonalvezetők" - néhány sor elérhető itt, amelyek hasznosak lehetnek a sablon kivágásához.

vázlat

Különféle oldalelemek kiválasztása - táblázatok, címsorok, hivatkozások, keretek, blokkok. Az Átméretezés lehetővé teszi a böngészőablak átméretezését, hogy illeszkedjen bármely szabványos képernyőbővítményhez. Az itt található eszközök az oldal ellenőrzéséhez tárolt funkciók. Helyi és külső egyaránt. Kényelmes és gyors hozzáférés a HTML, CSS és egyebek érvényesítéséhez. Használhatja a CTRL+SHIFT+H billentyűparancsot a HTML érvényesítéséhez.

Forrás megtekintése

Forráskód megtekintése. Lehetőség külső alkalmazásban való megtekintésre, a generált kód megtekintésére.

A jobb oldali a kedvencem. Ez egy gyors HTML, CSS érvényesítő és JavaScript hibajelző. Ha nincs probléma, az ikon zöld, ha pedig probléma van, piros.

Internet Explorer fejlesztői eszköztár

A 8.0-tól kezdődően a hibakeresés már be van építve ebbe a böngészőbe. Könnyen hívják F12 billentyű. Igaz, a 90-es évek programjaként nyomorult.

De ehhez a böngészőhöz van egy sokkal menőbb eszköz, a linkről letölthető az úgynevezett Internet Explorer Developer Toolbar.

Kinézetre ez az eszköztár természetesen úgy néz ki, mint a firebug, de sajnos még nem nőtt fel hozzá. Bár másrészt van néhány olyan funkciója, amivel a firebug nem rendelkezik. Az Internet Explorer fejlesztői eszköztárát a Firebug és a hibrid hibrideknek nevezném firefox webfejlesztő Eszköztár.

A firebughoz hasonlóan itt is egy kattintással meg lehet vizsgálni egy elemet. De ha azonnal látjuk a párnázást és a margókat, akkor itt nincs ilyen lehetőség.

Ezenkívül az Internet Explorer fejlesztői eszköztára nem frissíti dinamikusan az elemfát, ahogy a Firebug teszi. Vagyis ha valamit megváltoztatunk az oldalon js segítségével, akkor ezen az eszköztáron nem fogunk látni semmit.

Abból, amit élvezhet – menet közbeni CSS módosítása (egyszerű módja annak, hogy megtalálja, mit kell feltörnie :), a CSS és a képek letiltásának lehetősége, a gyorsítótár gyors törlése és a sütikkel való játék, gyors hozzáférés az érvényesítéshez.

A legfinomabb: van egy beépített színválasztó, amely lehetővé teszi, hogy egy szemcseppentő segítségével bármilyen színt hozzon ki az oldalról. (az ff-hez külön ColorZilla plugin van).

Debug Debug Bar Internet Explorerhez

A DebugBar for Internet Explorer letölthető a megadott linkről.

Önmagában is érdekes bővítmény. A böngésző kiegészítő paneljeként telepítve:

Valamiért van beépített kereső, szemcseppentő, átméretezhető az ablak, és megint valamiért az a lehetőség, hogy egy oldalt elküldhetünk egy barátnak szappanért. Bár hasznos lehet. De nem sikerült kihasználnom ezt a lehetőséget.

Ezen kívül van egy ellenőr:

A kattintással, mutogatással történő ellenőrzés módszere nem jött be a fejlesztőknek: érdekesebb dolgot találtak ki. A DebugBar-ban a célt a kívánt elemre kell húznia, hogy láthassa a fában. Nincs lehetőség a CSS szerkesztésére. De van egy validátor és egy beépített js konzol.

És ha belemélyedsz a beállításokba, ezt találod:

Egyszerre vicces és szomorú.

Ismeretes, hogy a Fejlesztői Eszköztár beépül a nyolcadik felfedezőbe. Hasonló lesz a harmadik bekezdésben leírtakhoz, de reméljük, hogy jobb lesz.

A DragonFly hibakeresése az Operához

A DragonFly a 9.5-ös verzió óta be van építve az Operába, így nem kell telepíteni. A Dragonfly aktiválásához lépjen az Eszközök → Speciális → Fejlesztői eszközök menüpontra. És ha angolul, akkor Tools → Advanced → Developer Tools.

Azonnal figyelmeztetem, hogy a DragonFly Alpha2 fázisban van, ez magyarázza sok hibáját.

Jellemzők listája:

• DOM ellenőr;
• Kattintson az Ellenőrzés elemre (ismét nem fogunk olyan kitöltést látni, mint a FireFoxban);
• Szerkesztés ;
• Gyors hozzáférés a hibakonzolhoz.

A DF olyan, mint egy külön oldal egy keretben. Ha megnyitod, minden lapra nyitva lesz (ellentétben a firebug-gal). Ezért egy elem vizsgálata előtt ki kell választanunk a listából a megtekinteni kívánt oldalt.

Sajnos itt, akárcsak az Internet Explorerben, a Dav Toolbar nem jeleníti meg a dinamikusan létrehozott elemeket. És általában, amikor megvizsgáljuk az oldalt, nem fut le a JavaScript: a hivatkozásokra és a gombokra nem kattintanak. Reméljük, hogy a DragonFly megjelenéséhez közeledve látni fogjuk ezeket a funkciókat.

Debug WEB Inspector a Safariban

Azonnal elmondom a böngészőről szafari Kifütyültem az információt, ezért, ahogy mondani szokták, nem vállalok felelősséget az anyag megfelelőségéért.

A „Fejlesztés” elem engedélyezéséhez a Safari menüben engedélyeznie kell a megfelelő elemet a beállításokban (az „Speciális” lapon):

A „Fejlesztés” menüben a következő funkciók állnak rendelkezésünkre:

Nézzük meg közelebbről a WEB ellenőrt:

Alapértelmezés szerint az ellenőr HTML nézet módban nyílik meg. De át lehet kapcsolni DOM nézet módba. Ehhez a felső lemezen van egy kapcsoló. Ha az ellenőrzőben egy elem fölé viszi az egérmutatót, az magán az oldalon lesz kiemelve. Nem láthatja menet közben a kitöltést, nem módosíthatja a jelölést vagy a CSS-t, és nem láthatja a DOME dinamikus változásait menet közben, ahogyan a FireBugban sem. De látod, nagyon jól néz ki.

Ha böngészőablakban szeretne dolgozni az ellenőrrel, kattintson a bal alsó sarokban található gombra.

Még a safariban is elérhető egy olyan funkció, mint a „Hálózati idővonal” (a „Hálózat” gomb az ellenőrzőben):

Jól láthatja, hogy mikor és mennyi ideig töltődnek be a fájlok. A kérés fejléceit is megtekintheti, de magát a tartalmat sajnos nem.

Hibakeresés fejlesztőknek a Google Chrome-ban

Lame haladó formában született, és azonnal megvannak, bár egyelőre ferdén, de még mindig eszközei a fejlesztőknek.

• DOM felügyelő;
• javascript hibakereső;
• JavaScript konzol.

Egy elem vizsgálatához kattintson rá jobb gombbal, és válassza a helyi menüben az "Elemkód megtekintése" menüpontot:

A funkcionalitás ugyanaz, mint a Safariban: az elemek kiemelve vannak, de a CSS és HTML szerkesztés nem érhető el, a DOM változásait nem követi nyomon. Csak a bal alsó sarokban lévő gomb, amely az ellenőrt a böngészőablakhoz kell csatolnia, nem működik.

Az "Erőforrások" lapon a következőket láthatjuk:

Kicsit eltér a szafari méretétől. Az áttetsző ábrán a relatív fájlméretek láthatók, a teljes szín pedig a letöltési idő. Így vagy úgy, de nyilvánvaló, hogy a Chrome ezen része még messze van a befejezéstől.

Ebben a cikkben áttekintettem a böngészők leghíresebb bővítményeit és beépített eszközeit.

Vannak mások is, pl.

• Az Internet Explorer WEB Development Helper jó segítő az ASP.NET fejlesztők számára (Internet Explorer);
• WEB Developer Toolbar – eszköztár az Internet Explorer és a FireFox számára. Számos hasznos funkció van;
• WEB-kisegítő lehetőségek eszköztár – eszköztár az Internet Explorerhez. Semmi érdekes.

Ha vannak olyan kiegészítők, amiket nem említettem, de érdemes lenne, vagy az említett bővítményekhez vannak olyan funkciók, amiket kihagytam, írj.

Használd egészségre!