Hibák a weboldalon. Távolítsa el a parancsfájl hibáját a Windows rendszerben

Az F12 fejlesztői eszköz használata a JavaScript hibák hibakereséséhez

Ez a tartalom az F12 fejlesztő régebbi verziójára utal. Töltse le az F12 dokumentáció legújabb verzióját.

F12 eszközök lehetővé teszik a fejlesztők számára, hogy gyorsan hibakeresés JavaScript kódot elhagyása nélkül a böngésző. A Windows Internet Explorer 9 egyes példányainak beágyazása 9 Az F12 fejlesztői eszközök hibakeresési eszközöket biztosítanak, például a stoppoints, a nézetvezérlő és a helyi változók, valamint a kódkonzol és a kód azonnali végrehajtása.

Ez a cikk megvitatja, hogyan kell használni az F12 fejlesztői eszközt a JavaScript kód hibakereséséhez. Ez a cikk nem kimerítő tankönyv, célja, hogy kiemelje az eszközöket, amelyek segíthetnek a fejlesztőnek a létrehozott kóddal való együttműködésben. Az Internet Explorer 9 nyomja meg a gombot F12.A fejlesztői eszközök megnyitásához kattintson a lapra. Forgatókönyv Munka megkezdéséhez.

A lapon Forgatókönyv A bal oldalon a forráskód-terület, ahol a fejlesztő megtekintheti JavaScript-kódját, állítsa be a stoppoint és a lépésről lépésre a funkciók végrehajtásához. A jobb oldali területen átkapcsolhat a konzol lapok, az óraváltozók, a helyi változók, az óra verem és a stop pontok között.

Fuss és stop debugger

Amikor először megnyitja az F12 fejlesztői eszközöket, és kattintson a lapra ForgatókönyvA kód a bal oldalon jelenik meg, és a konzol helyes. A konzolban láthatja az üzenetet: "Az oldal frissítése az F12 fejlesztői eszköz megnyitása előtt beérkezett üzenetek megtekintéséhez." A konzol weboldalának frissítése során megjelenik a böngésző által okozott összes hiba és figyelmeztetés.

A töréspontok beállítása, a Vezérlés és a helyi változók beállítása, valamint a Funkciószekvencia beállítási verem, kattintson a gombra Indítsa el a hibakeresést. Gombnyomás Indítsa el a hibakeresést Frissíti a weboldalt, és újraindítja a kódot a hibakeresőben.

A konzol használata a szintaktikai és más kódhibák felderítéséhez

A legtöbb hiba programozási projektek szintaktikai, logikai és adatbeviteli hibákra vannak osztva. A konzol bemutatása hibákat és kivételeket mutat a JavaScript-rel, valamint a DOM modell kizárásával. A kód belsejében a konzol objektumot az állapotkonzolhoz és az üzenethibaüzenetekhez való átvitelhez használhatja a "Alert ()" vagy a rendelkezésre álló helyet a képernyőn. Például hozzáadhat egy karakterláncot

Ablak.console.log ("A fájl megnyitotta sikeresen");

A JavaScript kódjában a szkript állapotáról való információ beszerzése nélkül megszakítás nélkül. További információ: .

A forgatókönyvek megjelenésének korrekciója

Az F12 fejlesztői eszközök hibakereményezhetnek a JavaScriptet a sorban vagy a kezelői szinten, függetlenül a kód megjelenítésének módjától. Léphetsz lépésről lépésre, hogy még forgatókönyvet hajtson végre, tömörítve, 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 blokk.

A parancsfájl formázásához kattintson Konfiguráció és válassza ki Formátum JavaScript. A következő képernyőképek megjelenítik a JavaScript kódblokkot a formázás előtt és után.

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

Az F12 fejlesztői eszközökben lévő megállási pontok feladata a bináris kód hibakerek, például a Microsoft Visual Studio feladathoz hasonló. A bal oldali területen kattintson a kódolás bal oldalán, amelyben le kell állnia. A stoppointok kapcsolhatók, ezért kattints hozzá egy leállítási pontot, és az újra kattintás eltávolítja.

A kódban annyi bontási pontot adhat hozzá, amennyire szüksége van. A jobb egérgombbal kattintson a kódsorolásra, és válassza ki a parancsot Helyezze be a töréspontotVagy kattintson a bal oldali mezőre az üzemeltető mellett, amelyben meg szeretné állítani a stoppontot.

Az F12 fejlesztői eszközök használatával beállíthatja a stoppontot a kezelői szinten, még akkor is, ha ezek a szolgáltatók több operátorból blokkban vagy karakterláncban vannak. Ez lehetővé teszi, hogy egy sűrített kód szegmensben megállóhelyet hozzon létre. A leállítási pont beállításának optimális módja az ilyen körülmények között az, hogy kattintson a jobb egérgombbal, és a kiválasztás az elem helyi menüjében Helyezze be a töréspontot. A szkript korábban leírt formázását is használhatja (gyönyörű nyomtatás), formázza a karakterláncokat a mezők egyszerűsítéséhez.

Többszörös leállítási pontok kezelése a "Stop Point" lap segítségével

Ha nagy mennyiségű kódot használ nagy mennyiségű stopponttal, vagy akár több fájlból is, használhatja a lapot. Megállási pontokAz összes kívánt pont nyomon követéséhez. A lapon Forgatókönyv Kattintson a lapra Megállási pontok az ingatlanban vagy a megfelelő területen. Lásd a példát a következő képen:

A lapon Megállási pontok A fejlesztő engedélyezheti vagy letilthatja, törölheti, törölheti és másolja a megállási pontot anélkül, hogy a kívánt pontok helyének pontos áthelyezése szükséges. A leállítási pont engedélyezéséhez vagy letiltásához telepítse vagy törölje a módosítani kívánt paraméter melletti jelölőnégyzetet. Azonnal menjen tovább a szünetpontba a kódban, kattintson duplán a listára. A gomb megnyomásával egyidejűleg többszörös megállást választhat. Ctrl és megragadja a szükséges stoppontokat.

A lapon Megállási pontok A helyi menüt is használhatja (amely megnyílik a jobb egérgombbal), amely lehetővé teszi a stoppoint csoportok törlését, engedélyezését, letiltását vagy másolását. Ezek a paraméterek az alábbi táblázatban jelennek meg.

Menü tétel	törvény
Töröl	A megállási pont eltávolítása a helyreállítás lehetősége nélkül.
Törölje mindent	Az összes megállási pont eltávolítása a helyreállítás lehetősége nélkül.
Az összes engedélyezése	Minden zászló telepítése a listában.
Tiltsa le mindent	Az összes zászlót eltávolítja a listában.
Feltétel	Lehetővé teszi, hogy egy pontot megállítsák egy megállási pontot. Ez az elem nem érhető el, ha több stoppont van kiválasztva.
Másolat	A kiválasztott leírási pontok szöveges leírásainak másolása.
Mindet kiválaszt	A listán szereplő összes leállítási pont elosztása.
A forráskódhoz	Menjen a kód bal oldalára a kiválasztott leállítási pont megjelenítéséhez. Ez az elem nem érhető el, ha több stoppont van kiválasztva.

Feltételes pontok

A kódsorolás feltétel nélküli megállítása hasznos, de még erősebb eszközök, ha az ingatlan vagy a változó eléri az adott értéket. Ha meg kell állnia, ha eléri vagy telepít egy adott értéket, hozzon létre egy leállítási pontot, majd nyissa meg a Tabot. Megállási pontok. Kattintson jobb gombbal a kívánt leállítási pontra, és válassza ki a parancsot. Feltétel.

A Feltételek párbeszédpanelen adja hozzá a megfelelő JavaScript operátort. A végrehajtható kód ebben a törési ponton abbahagyja, ha az üzemeltető eredménye igaz lesz. Például a következő képen a kód végrehajtása megáll, ha az Oaudio.Paused tulajdonság értéke megegyezik a FALSE.

Megadhatja az egyik feltétel vagy a logikai operátorok használatát, nehezebb megállási állapotot hozhat létre. De ne feledjük, hogy a különböző változók és objektumok ugyanaz marad, mint amikor megjelenik a kikapcsolási pont nézõablakhoz. Az a feltétel értéke, amely nem tartozik a hatályba, nem értékelhető igaz.

Lépésenkénti kódfuttatás

Ha a kódfuttatás leáll a stoppontnál, az átmeneti gombokkal folytathatja a végrehajtást ( F5), végrehajtási megszakítások ( Ctrl + Shift + B), lépésről lépésre bemenet a funkcióhoz ( F11), Funkció kihagyása ( F10.) vagy kilépési funkció ( Shift + F11). Ha a végrehajtás leállt a törésponton, vagy amikor lépésenkénti végrehajtás esetén a hibakeresési ablak tényleg modális lesz.

Ezért, mielőtt folytatná az interakciót a weboldalon, meg kell állítania a hibakeresést ( Shift + F5.) vagy folytassa a végrehajtást ( F5). Emlékeztetni kell, ha úgy tűnik, hogy a weboldal leállt. Ha több ablak nyitva van, a hibakeresési ablak nem a tetején van, akkor a leállítási ponton reagálhat. Ebben az esetben a weboldal menedzsmentének visszaküldéséhez keresse meg a hibakeresési ablakot a weboldalhoz, majd kattintson F5 Folytatás vagy kattintás Shift + F5. Megállítani a hibakeresést.

Változók megtekintése az "Watch" és a helyi lapok segítségével

Lap Néz. Lehetővé teszi a vezérlési változók meghatározását és megtekintését az adósságkódban. A változó által meghatározott változók nevét, értékét és típusát tartalmazza. Kattintson a jelölt karakterláncra kattintson ide, hogy ..., Tab Vezérlési értékek és írja be a változó nevét. Ha nem szeretné megadni a változó nevét, akkor másolhatja és illessze be a vezérlőváltozók listájába.

A vezérlési változók listáján szereplő értékek függetlenül attól, hogy a kód jelenleg hibakeresése vagy sem. Amikor bekapcsolja a hibakeresési és nyomon követési kódot vagy a megadott pontokat, hogy megállítsa a lista változó értékeinek leállítását az aktuális szkript végrehajtási pontja. Ha a hibakeresés le van tiltva, akkor a hatóköre globális, és megjelenik a globális változók értékei.

A lapon ellentétben Vezérlési értékek, az értékek, amelyeken láthatóak, függetlenül attól, hogy a megfelelő változók a cselekvési területen vannak-e, a lapon Helyi Csak a változók jelennek meg az aktuális művelet területén. Nem kell hozzáadnia változókat hozzáadni, mivel az akcióterület megváltoztatásakor ezt a lapot frissíti, megjeleníti az összes rendelkezésre álló változót.

A különbség megtekintéséhez nyissa meg az alábbi példát az Internet Explorer 9-ben, és kövesse az alábbi műveleteket.

JavaScript hibakeresési példa

Töltsön be egy példát az Internet Explorer 9-ben.
Nyomja meg a gombot F12.Az F12 fejlesztői eszközök megnyitásához, és kattintson a lapra Forgatókönyv.
A bal oldali területen kövesse az első funkció görgetését, kattintson jobb gombbal a "VAR A \u003d 5;" sorra És válassza a Csapat lehetőséget Helyezze be a töréspontot.
nyomja meg a gombot Indítsa el a hibakereséstMajd a böngésző weblapján kattintson a gombra FUSS. (Végezze el).
Az F12 fejlesztői eszközökben kattintson a lapra. Vezérlési értékek A jobb oldalon és adjon hozzá változókat "A, B, C és D.".
Lépésről lépésre hajtsa végre a kódot a gomb megnyomásával F11 vagy gomb Lépés az eljövetelévelés nézze meg a változókat a lapon Vezérlési értékek.

A lépésről-lépésre végrehajtása az egyes funkciók, a megjelenített értékek változhatnak bizonytalan egyes értékeket.

A fültől származó különbségek érzése HelyiKattintson a gombra F5 Folytassa az F12 fejlesztőt. A böngésző weblapján kattintson a gombra FUSS. (Futtatás) a kód ismét végrehajtásához, és térjen vissza az F12 fejlesztőhöz. A lap jobb oldalán Forgatókönyv Kattintson a lapra Helyi és nyomja meg a gombot F11A funkciók elvégzéséhez ismét lépésről lépésre. Ne feledje, hogy a helyi változók listája csak olyan változókat tartalmaz, amelyek értékei vannak. A prezentációban Helyi A funkcióhoz továbbított argumentumok is megjelennek, értékük és típusuk.

Stack hívások megtekintése

Lap Hívások verem Lehetővé teszi, hogy megtekinthesse az utat, amikor a hívás funkciókat a kódból. Ez segíthet a hibajelentés eredményének váratlan kódexének észlelésében. A lapon Hívások verem Kattintson duplán bármely funkcióra, és folytassa a hívását a forráskódban.

Próbálja meg végrehajtani a fenti példát, és kövesse a fület. Hívások verem A kód lépésenkénti végrehajtásával a funkció alkalmával.

A lapon Hívások verem Az aktuális funkció vagy a hely mindig tetején van (azokat a nyíl jelzi, mint a fülön Hívások veremés a kódex területén). A dupla kattintással a lista bármelyik funkciója kiemeli a funkciót, amely a funkciót hívja.

Debugging Több forgatókönyv

A nagy weboldalak több JavaScript fájlt használnak. Az F12 fejlesztői azt jelenti, hogy több forgatókönyvű fájlokkal, valamint a kód hibakeresése esetén dolgozik. Egy másik fájl megtekintéséhez kattintson a gombra a gomb melletti nyílra Indítsa el a hibakereséstA weboldalhoz társított forgatókönyvek listájának megjelenítése. Az F12 fejlesztői eszközök használata esetén a kód lépcsős végrehajtása minden fájlon történik. Hozzáadhatja a változók megtekintéséhez bármilyen szkriptfájlból, és a híváscsomag nézetben megjelenik a különböző forgatókönyvekben található funkciók.

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

A dokumentum mód beállítása a karakterlánc jobb oldalán Menü Minden F12 fejlesztői lapon elérhető, de ez különösen hasznos ez a beállítás, amikor hibakeresése a lapon a lapon. Forgatókönyvek. Az Internet Explorer 9 lehetővé teszi a dokumentum mód megváltoztatását a Windows Internet Explorer korábbi verzióinak szabványainak emulálására. Az Internet Explorer 9 Exit Classifieds Alapértelmezés szerint a dokumentum típusának kompatibilitási módja. Ha új funkciót vagy új szabványt, például HTML5-et dolgozunk, egyes hibák programozási hibáknak tűnhetnek, de a valóságban a kimaradt vagy helytelen hirdetési doctípus okozta.

Az Internet Explorer 9 F12 fejlesztői eszközei nem javíthatják meg a kódot, de valamivel megkönnyítik a JavaScript hibákat.

Frissítve: 2007. november

Az ASP.NET platform fejlett webes alkalmazás hibakeresési támogatást nyújt. Azonban a webes alkalmazások elosztott jellege miatt hibakeresésüket bizonyos funkciók jellemzik.

Általánosságban elmondható, hogy a webes alkalmazások hibakeresek, valamint más vizuális stúdió alkalmazások. Beállíthatja a megállókat, futtathatja a hibakeresőt, szüneteltetheti a kód végrehajtását, ellenőrizze a változók értékeit, és végezze el a Visual Studio hibakereső funkcióval kapcsolatos összes funkciót. További információ: Fejezet. Ezenkívül az ASP.NET platform támogatja a nyomkövetési módot, amely lehetővé teszi a szerszám beillesztését az űrlapon. A részletekért lásd a szakaszokat és.

A távoli hibakeresésről bővebben lásd: Szakasz.

Függetlenül attól, hogy hol lesz a hibakeresés - a helyi számítógépen vagy a távvezérlőn, meg kell győződni arról, hogy a webes alkalmazáshoz hibakeresés megengedett. A web.config fájl hibakeresés engedélyezéséhez, amely része a webes alkalmazás projektnek. Ez a paraméter előírja a fordítót, hogy helyezze be a hibakeresési karaktereket az összeállított alkalmazáskódba, hogy a hibakereső felhasználható. A webhely adminisztrációs eszközzel engedélyezheti a hibakeresést. További információ: Fejezet.

Néha a böngésző értesítheti a felhasználót a forgatókönyv hibájáról. Ez vonatkozik a szabványos Internet Explorerre is. Benne, az ilyen hiba gyakrabban fordul elő, mint más megfigyelők. Mi okozhat ez a probléma, és hogyan oldja meg?

A szkript hiba általában olyan esetekben fordul elő, amikor a böngésző nem tudja megfelelően feldolgozni a HTML oldalak kódjait. A terhelés meghibásodása túlzott számú ideiglenes fájlt okozhat (különösen, ha a böngészőt nem tisztítják tőlük). Emellett egyes fiókok beállítása zavarhatja az erőforrás helyes futtatását. Ma megfontoljuk, hogyan kell eltávolítani az Internet Explorer parancsfájl-hibáját, figyelembe véve ezeket az okokat.

Első akciók

Ha ez először történt, akkor egyetlen eset lehet. Következésképpen, aggódni, hogy mit. Próbálja újra betölteni ezt az oldalt. Ha egy értesítés ismételten megjelenik egy kérdéssel, függetlenül attól, hogy a parancsfájl végrehajtását hagyja abba, kattintson a "NO" gombra.

Megállapította, hogy ez nem egyetlen eset. Mi legyen a következő? Nézd, hogy hibát ad az összes oldal megnyitásakor, vagy csak egy. Ha egy, akkor menjen egy másik fiókra ugyanazon a webhelyen, nyissa meg az oldalt egy másik böngészőben és számítógépen.

Használhat egy másik böngészőt. Ma van egy csomó közülük, miközben nem rosszabbak a szokásos eszközhöz, sokan még meghaladják. Ha az összes könyvjelzőt az IE-ben tárolják, használhatja az adatport funkciót.

Lock aktív ActiveX és Java parancsfájlok

Úgy döntöttél, hogy nem megy egy másik programba? Ebben az esetben tovább fogjuk oldani a problémát.

Az aktív X és a Java letiltható vagy blokkolható. Ez a forgatókönyvek egyik gyakori oka. Mit kell tenni ebben az esetben? Vissza kell állítania az interjúalany biztonsági beállításait.

Futtassa a programot. Kattintson az ikonra a felszerelés formájában. Ő lesz a csillag mellett. A megjelenő Lehetőségek listában válassza ki a "Böngésző tulajdonságait" részt. Ez lesz az utolsó előtti elem.

Nyissa meg a "Biztonság" második lapját. Kattintson az "Alapértelmezett" gombra. Kattintson a kb.

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

Az Internet Explorer megmenti az oldal verzióit, amikor elkezdődött. Tárolja az összes másolatot az ideiglenes fájlokkal rendelkező mappában. Ezt a mappát időről időre meg kell tisztítani. Ha a mappa eléri például a több gigabájt térfogatát, a böngésző különösen a szkript hibát fogja lógni és kiállítani. Ebben az esetben el kell távolítania a megadott tároló összes tartalmát.

A következő módon segít megszabadulni a szemetet a gyorsítótárban, a történelem, a cookie-k, az adatok webes formákhoz, valamint a jelszavakhoz. Természetesen joga van kiválasztani, hogy milyen típusú fájlok törölni kell, és mit hagyjon.

Nyomja meg újra a felszerelést a már ismerősnek. Válassza ki a "böngésző tulajdonságait".
Váltson az "Általános" szakaszra.
A böngésző magazin blokkjában, magabiztosan kattintson a "Törlés" gombra.
Jelölje be az ideiglenes fájlokat és más típusú fájlok, amelyekből megszabadulni szeretne, majd erősítse meg a törlést.

Blokkolja az antivírust

A forgatókönyveket nem lehet elvégezni, mivel az anti-vírus szoftver blokkolja működésüket, vagy az ideiglenes fájlokkal rendelkező mappákat szkennel. Mit kell csinálnunk? Nyissa ki az AntiVirus ablakot, és kapcsolja ki az interaktív elemek zárolását. Nincs egyetlen lekapcsolási utasítás minden víruskereső számára. Az eljárás a víruskereső típusától függően eltérő lesz.

Helytelen HTML oldalkód feldolgozása

Ott van ilyen helyzet abban az esetben, ha csak egy hely lóg. Ez azt jelenti, hogy az oldalkód nem alkalmas az Internet Explorer számára. Az oldal letöltéséhez a hibakeresési parancsfájlokat le kell tiltani.

Menjen vissza a böngésző tulajdonságai ablakába.
Séta ebben az időben a negyedik blokkban "Opcionális".
Távolítsa el a jelölőnégyzetet az "Minden szkript hiba megjelenítéséről". Mentse a módosításokat.

Ha a felhasználó tiltotta a szkript hibakeresését, a hibaüzenet nem jelenik meg többé. Az oldal egyébként függ, így ez a módszer csak akkor használható, ha a problémák csak egy webhelyen vannak.

Letöltés elérhető frissítések

A szkriptet nem lehet helytelenül elvégezni, mivel a rendszernek nincs szükségük a rendszerre és az Internet Explorerre. A frissítés teljesen megoldhatja a teljes problémát.

Menjen a Frissítési központba a számítógépen, és győződjön meg róla, hogy az összes frissítés telepítve van. Ha nem, indítsa el a telepítést.

Rendszer-nyilvántartást használunk

A Windows rendszerindításakor hiba jelenhet meg, azaz a számítógép indításakor. Ez nem komoly kudarc, de még mindig ki kell javítania a helyzetet. A rendszer-nyilvántartás lépésbe lép. A hibajavító módszer sokkal bonyolultabb, mint a korábbiak. Ha újonc vagy, kérje meg ezt egy ismerő felhasználó számára.
1. Szerezd meg a "RUN" ablakot, és regisztrálja a Regedit parancsot a karakterláncban.

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

3. Az alján megjelenő ablakban helyezze be a teljes hozzáférést és az olvasást.

4. Kattintson a További paraméterek gombra. Kattintson a "Change" gombra, és tegye "Engedélyezze

5. Hivatkozva a beállítások mentésére. Kattintson az OK gombra.

6. Megszakítja a készüléket. Hívja a parancssorot. A végső vonalkód - adja át a következő parancsot: regsvr32 msxml.dll. Kattintson a billentyűzetre az Enter gombra.

Az Internet Explorer szkripthibaja számos módon megoldható. Egyszerű és összetettünk. A módszer kiválasztása az októl függ, és mivel olyan könnyű meghatározni, használja a módszer módszerét.

Az interneten végzett munka közben az Internet Explorer böngésző üzeneteket adhat ki arról, hogy az oldal hibákat tartalmaz, és helytelenül jeleníthető meg. Fontolja meg több módot a probléma megoldására.

Utasítás

Ha nincsenek látható nehézség a böngészőben, kivéve a rendszeresen megjelenő hibát, megpróbálhatja letiltani a szkript hibakeresési hibakeresését úgy, hogy az üzenet ne jelenjen meg többé (ha a hiba nem jelenik meg, de azonnal több telephelyen, menjen a következő lépés). A "Service" menüben nyissa meg a Observer tulajdonságok elemet, válassza ki a "Speciális" fület, és jelölje be a "Pre-debug Scripting hibakeresés" jelölőnégyzetet. Ha meg kell tiltania a figyelmeztetést az összes hibáról, törölje a jelölőnégyzetet a "Mutasd Értesítés megjelenítése az egyes parancsfájl-hibáról".

Próbálja meg megnyitni a webhelyet, amikor hibaüzenet jelenik meg egy másik fiókból vagy egy másik számítógépről, hogy megtudja, hogy a probléma helyi. Ha a hiba megjelenik, valószínűleg a rossz weboldal kódja okozza. Ebben az esetben kikapcsolhatja a szkriptek hibakeresését, az előző lépés utasításait követve. Ha egy másik számítógép vagy fiók használatával megtekintheti, a probléma eltűnik, menjen a következő lépéshez.

Talán az Internet Explorer böngésző az oldalak megtekintése során nem blokkolja az aktív parancsfájlokat, a Java-t és az ActiveX-t, amely meghatározza az oldalak megjelenítését az oldalon. A probléma kijavításához vissza kell állítania a böngésző biztonsági beállításait. Ehhez a "Service" menüben válassza a "Observer tulajdonságok" lehetőséget, és lépjen a Biztonsági fülre. Kattintson az Alapértelmezett gombra, majd az "OK" gombra. Ha az oldal újraindítása után hiba történt, a probléma továbbra is fennáll, próbálja meg a következő módszert.

Mint tudják, a böngésző tárolja az ideiglenes fájlokat és az oldalak másolatát egy külön mappában, a későbbi forgalomba. Ha a mappa méretei túl nagyokká válnak, akkor hibák fordulhatnak elő, ha egyes oldalak megjelennek. A probléma megoldható, rendszeresen tisztítsa meg az ideiglenes fájlokkal rendelkező mappát. Ehhez nyissa meg a Observer tulajdonságai párbeszédpanelt a "Service" menüből. Az Általános lapon, a Történelemcsoportban kattintson a Törlés gombra. Ellenőrizze az "Internet ideiglenes fájlok" jelölőnégyzetét, a "Cookie-k", a "Napló", a "Website Data" lehetőséget, és kattintson az "OK" gombra.

Természetesen és mások is - biztosan megemlítem őket.

Firefug a Firefox számára

Nem tudom, hogy biztosan Szentjánosbogár. A fejlesztők más eszközeinek előterjesztése, de határozottan a legnépszerűbb, kényelmes és funkcionális.

A Firebug a Firefox hozzáadása, ami azt jelenti, hogy letölteni kell a Firefox kiegészítő weboldalról és telepítve.

A Firebug hívásához elegendő az F12 megnyomása.

Ennek lehetősége ennek a kiegészítőnek:

Dinamikusan változó HTML ellenőrzése és szerkesztése;
CSS szerkesztése a repülésen;
JavaScript hibakeresés, parancssor parancsfájlok végrehajtásához;
Hálózati lekérdezés-figyelés - Láthatja a fájlok és szkriptek, lekérdezési fejlécek letöltésének méretét és idejét;
Dom analizátor.

Hosszú időt tudsz mondani ezekről a lehetőségekről a részletekben, de azt hiszem, minden olvasónk számára ismert, és ha nem - részletes információ van a homebag kezdőlapján, vagy ugyanaz a fordítás az Ilya Cantor fordításában.

A Firebug'a mellett hasznos sort használhat hozzá - Firecookie.Melyik (meglepetés :-) megtekinthető és megváltoztatható cookie-kat.

Webfejlesztő eszköztár a Firefox számára

Egy másik hasznos kiegészítés a tűzre. Ez így néz ki:

Megvizsgáljuk a pontokat.

Letilt

Lehetővé teszi, hogy kikapcsolja a JavaScriptet, tiltja a gyorsítótár használatát, ami nagyon hasznos, ha fejlesztéskor (lehetővé teszi, hogy biztos legyen benne, hogy a legújabb frissítésekkel együtt indítható), törölje az oldalán használt színeket, és cserélje ki őket szabványos, tiltja az indulás a referrer fejlécében (az oldal, amely az átmenet volt).

Cookie-k.

Hasznos lehetőség a cookie-kkal való munkavégzéshez: megtekinthetők, törölhetők, tilthatók és hozzáadhatók.

CSS.

Ez a menü tárolja a fejlesztői eszköztár hűtött funkcióját - a CSS szerkesztése a repülés során. Ezenkívül lehetséges a CSS, tiltani, és így tovább, és hasonlít. Véleményem szerint itt nagyon hasznos a gyorsbillentyűk jelenlétére (például a Ctrl + Shift + C, például lehetővé teszi, hogy azonnal menjen az oldalstílusok megtekintéséhez)

Formák.

Minden munka formákkal: Jelszavak megjelenítése, információk megjelenítése az űrlapokról, az űrlapok konvertálása (Get "Post és fordítva) és még sok más. Hasznos funkció "Az űrlapmezők megjelölése", hogy automatikusan kitöltse az űrlapmezőket (például a webhely tesztelésénél, amikor a jelszó memorizációs funkció le van tiltva. A többi, nem látok semmit hasznos ebben a pillanatban.

Kép

A képek letiltásának hasznos funkciója - megtekintheti, hogy a webhelye kép nélkül néz ki. A képek körkörösek lehetnek, mutasd meg méretüket, mutasd az Alt attribútumokat.

Információ

Ez a menü sok lehetőséggel rendelkezik. Az attribútumok osztályának és az oldalon található attribútumok megjelenítésének hasznos funkciója lehet. Ezenkívül érdekes az "Színes információ megtekintése" tétel - az oldalon használt színek gyorsan beszerzése. Dokumentumméret megtekintése - Az oldal méretének megtekintése. "A válasz fejlécek megtekintése" - Az oldalfejlécek megtekintése.

Vegyes.

A leggyakrabban használt funkció a gyorsítótár tisztítás. Emellett a funkciók "oldalirányú" - egy sor, "Oldal nagyító" - nagyító és "vonalvezetők" - több sor, amely hasznos lehet a minta nyomására.

Vázlat

Az oldal különböző elemeinek elosztása - táblázatok, fejlécek, linkek, keretek, blokkok. Átméretezés Lehetővé teszi a böngészőablak méretének megváltoztatását bármely szabványos képernyőkhosszabbításokhoz. Az eszközök itt vannak az oldalak érvényesítésének jellemzői. Helyi és külső. Kényelmes és gyors hozzáférés a HTML, CSS validáláshoz és más dolgokhoz. A HTML validáláshoz használhatja a CTRL + SHIFT + H záradékot.

Forrás megtekintése.

Forráskód megtekintése. Képes megtekinteni egy külső alkalmazás, megtekintve a generált kódot.

Mi van a jobb sarokban, amit a legjobban szeretem. Ez egy gyors HTML validátor, CSS és JavaScript hiba jelző. Ha nincs probléma - zöld ikon, és ha vannak problémák - piros.

Internet Explorer Developer eszköztár

A 8.0 hibakeresési hibákkal kezdődően már beépült ebbe a böngészőbe. Ez könnyen hívható kulcs F12. Igaz, ő gyenge, mint a 90-es évek programja.

De van egy hűvösebb eszköz ehhez a böngésző számára, az úgynevezett Internet Explorer Developer eszköztár letöltése referenciaként.

Ennek a tulbarnak a formájával, természetesen úgy néz ki, mint a Firebug, de sajnos még nem volt doros. Bár viszont vannak olyan lehetőségek, amelyeknek nincs tűzbugja. Az Internet Explorer Developer eszköztárat egy bizonyos hibrid Firebug'a és Firefox webfejlesztő. Eszköztár.

Mint a Firebug, lehetőség van arra, hogy egyszerű kattintással ellenőrizze az elemet. De ha azonnal láthatjuk a padding'i-t és a margót, akkor nincs ilyen lehetőség.

Ezenkívül az Internet Explorer Developer eszköztár nem frissíti az elemeket dinamikusan, mivel a Firebug csinál. Vagyis, ha bármit megváltoztatunk a JS alapoldalon, akkor nem fogunk semmit látni ezzel a tulbarával.

Ami elutasítható - megváltoztathatja a CSS-t a repülésen (könnyű módja annak, hogy megtalálja a hackelést :), a CSS és képek megtiltásának képessége, a gyorsítótár gyors tisztítása és a cookie-k játékához való képesség, gyors hozzáférés a validáláshoz.

A leginkább finom dolog az, hogy van egy beépített színes válogató, amely lehetővé teszi, hogy bármilyen színt kapjon a csővezetékből. (Az FF esetében van egy külön színes colorzilla plugin).

Debug Debugbar az Internet Explorer számára

Debugbar az Internet Explorer számára, letöltheti a megadott linket.

Érdekes terjeszkedésben. Kiegészítő panelként telepítve van a böngészőhöz:

Van egy beépített keresőmotor, egy pipetta, képes megváltoztatni az ablak méretét, és ismét valamilyen oknál fogva azt a képességet, hogy egy oldalt küldjön egy barátnak a szappanba. Bár hasznos lehet. De nem tudtam ezt a lehetőséget megtenni.

Ezenkívül van egy ellenőr:

A létrehozási mód a fejlesztők irányításával kattintva vagy útmutatásával nem felel meg: egy darab érdekesebbé tette. A Debugbar'e-ban meg kell húznia a látványt a kívánt elemre, hogy megnézze a fán. A CSS No. De van egy érvényesítő és a beépített JS konzol.

És ha meg akarja ásni a beállításokat, megtalálhatja azt:

És nevetséges és szomorú.

Ismeretes, hogy a nyolcadik kizsákmányolóban a fejlesztői eszköztárban épül. Ő hasonló lesz a harmadik ponton leírtakhoz, de reméljük, hogy jobb lesz.

Debug Dragonfly az opera számára

A szitakötő az opera beépülése, a 9.5-ös verzióval kezdődik, így nem szükséges telepíteni. A DragonFlays aktiválásához az Eszközök → Speciális → eszközök a fejlesztők számára. És ha angolul, eszközök → Speciális → Fejlesztői eszközök.

Azonnal figyelmezteti Önt, hogy a szitakötő az Alpha2 szakaszban van, ez magyarázza sok hibáját.

Lista funkciók:

Dom felügyelő;
Az ellenőrzés kattintással (ismét, nem fogunk olyan francia bekezdéseket, mint a Firefox);
Szerkesztés;
Gyors hozzáférés a hiba konzolhoz.

DF - valami, mint egy különálló oldal a FReme-ben. Ha kinyitotta, akkor minden lapra (ellentétben a Firebug'a). Ezért az elem ellenőrzése előtt ki kell választania az oldalt a megtekinteni kívánt listából.

Sajnos itt, mint az Internet Explorer DAV eszköztárban, dinamikusan létrehozott elemek nem jelennek meg. És általában, amikor megvizsgáljuk az oldalt, nem kezdődik a JavaScript: A linkek és gombok nincsenek megnyomva. Reméljük, hogy a szitakötő alkalmas kiadásra, meglátjuk ezeket a lehetőségeket.

Debug webfelügyelő Safariban

Megmondom, hogy a böngészőről Szafari. Információk fütyülve, így az anyag megfelelőségéért, ahogy azt mondják, nem válaszolok.

A Safari menü engedélyezéséhez a "Fejlesztés" tétel szükséges a Beállítások (Speciális fül) a megfelelő elemben:

A "Fejlesztés" menüben a következő funkciók állnak rendelkezésre:

Nézzük meg a webfelügyelő részleteit:

Alapértelmezés szerint az ellenőr HTML megtekintési módban nyílik meg. De átkapcsolható a DOM nézet módba. Ehhez van egy kapcsoló a kiütés tetején. Ha az ellenőren lévő elemet áthúzza, akkor az oldal maga is kiemelve lesz. Ahhoz, hogy a francia bekezdéseket, a jelölés vagy a CSS-t a repülés során megváltoztassa, vagy a dóm dinamikus változását a flyen, mint a Firebug esetében lehetetlen. De egyetértesz, nagyon aranyosnak tűnik.

Ha van egy vágy, hogy a böngészőablakban lévő ellenőrrel dolgozzon, akkor kattintson a bal alsó sarokban lévő gombra.

Még a szafariban is elérhető, mint "hálózati időkérés", (hálózati gomb az ellenőrben):

Világosan láthatja, mikor és mennyi ideig tart a fájlok. A kérés fejléceket is megtekintheti, de sajnos a tartalom nem tekinthető meg.

Határozza meg a fejlesztők a Google Chrome-ban

A Chrome előrehaladott formában jelent meg, és azonnal, hagyja, hogy görbék, de még mindig pénzeszközök a fejlesztők számára.

Dom felügyelő;
JavaScript hibakeresés;
JavaScript konzol.

Annak érdekében, hogy megvizsgálhassa az elemeket, jobbra kell kattintania, és válassza a "Tekintse meg az elemkódot" a helyi menüben:

A funkció ugyanaz, mint a Safari az elemek typked által lebegő, de szerkesztésével CSS és HTML nem állnak rendelkezésre, változások a DOM nem követi nyomon. Ez csak a bal alsó sarokban lévő gomb, amely az ellenőrnek a böngészőablakba kell csatlakoztatnia, nem működik.

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

A MOTO eltér a Safaris méretétől. A rendszer áttetszője relatív fájlméret és teljes szín - letöltési idő. Egy vagy más módon nyilvánvaló, hogy a króm ezen része még mindig nem fejeződött be.

Ebben a cikkben áttekintettem a legismertebb kiterjesztéseket és beépített eszközöket a böngészők számára.

Vannak mások is:

Internet Explorer Web Development Helper - az ASP.NET-fejlesztők jó asszisztense (Internet Explorer);
Webfejlesztő eszköztár - Tulbar az Internet Explorer és a Firefox számára. Számos hasznos funkció van;
Webes hozzáférhetőségi eszköztár - TULBAR az Internet Explorer számára. Semmi érdekes.

Ha vannak olyan kiegészítések, amelyeket nem említettem, de megéri, vagy az említett kiterjesztésekből származó funkciók vannak, amelyeket hiányoztam, írok.

Használja az egészségre!

Írj HTML - Nagyszerű, de hogyan kell megérteni, hogy hol a hiba, ha valami nem működik? Ez a cikk számos olyan eszközt ír le, amelyek segítenek a HTML-ben lévő hibák kereséséhez és javításához.

A hibakeresés nem ijesztő

Néhány kód írása közben általában minden jól megy, míg a pillanat akkor jelenik meg, ha hibát követ el. Tehát a kód nem működik, vagy nem működik, ahogy gondoltál. Ha megpróbálja összeállítani a nem munkaprogramot a rozsda nyelven, a fordító hibát jelez:

Ebben az esetben a hibaüzenet a viszonylag egyszerű - "unterminált kettős idézési string" megértése. Ha óvatosan megnézed a Println-t! (Hello, World! "), Akkor vegye figyelembe, hogy itt nincs kettős idézió. Természetesen a hibaüzenetek sokkal összetettebbé válhatnak a kódoláshoz való megértéshez, sőt a legegyszerűbb esetek is Úgy tűnik, ijesztőek azok számára, akik semmit sem tudnak a rozsdaóról.

De ne félj hibakeresést! A kényelmesen és hibakeresési kódoláshoz meg kell értenie a nyelvet és az eszközöket.

HTML és hibakeresés

A HTML nem olyan összecsukható, hogy megértse, hogyan kell rozsdásodni. A HTML-t semmilyen más formában nem állítják össze, mielőtt a böngésző elemzi ezt, és megmutatja az eredményt (értelmezve, és nem összeállított). A HTML elemek szintaxis sokkal világosabb, mint a valódi programozási nyelvek, például a rozsda, a JavaScript vagy a Python. Az a módszer, amelyre a böngészők többet olvasnak a HTML-nek tolerangeA programozási nyelvek programozási nyelvén szigorúbb. Ugyanakkor rossz, és jó.

Toleráns kód

Szóval mit jelent a toleráns? Általánosságban elmondható, hogy a kód beadásakor kétféle hiba van, amellyel találkozik:

Szintaxis hibák (szintaxis hibák): Ezek hibák az írás helyességében, mivel magasabb volt, a példában rozsda. Ez általában könnyű kijavítani, amennyiben tudod, milyen mértékben ismeri a nyelv szintaxisát, és tudja, milyen hibaüzenetek jelentenek.
Logikai hibák (logikai hibák): Ezek olyan hibák, amelyek megjelennek, ha a szintaxis helyes, de a kód nem teljesíti célját, azaz a program helytelen. Az ilyen korrekció bonyolultabb, mint a szintaktikai, mivel az üzenetek jelzik a helyet, ahol téved.

A HTML nem szenved szintaktikai hibákat, mivel a böngésző elolvassa a kód toleránsan, abban az értelemben, hogy az oldalak akkor is megjelenhetnek, ha a szintaxis hibák jelen vannak. A böngészők beépített szabályok vannak a helytelenül írott jelölés értelmezésére, és valamit futtathatsz, még akkor is, ha egy másikat jelent. Ez lehet valódi probléma!

Jegyzetre: HTML olvasás elnézően, mert amikor a web meg csak úgy döntött, hogy az emberek közzé tartalmat akkor is, ha hibás a kódot, mivel ez sokkal fontosabb, mint a bizalmat teljesen helyes szintaxis. A web nem lenne olyan népszerű most, ha szigorúan kezelték a kezdőknek.

Aktív tanulás: ismerős a toleráns kóddal

Ideje tanulmányozni a Tolerant kódot HTML-ben.

HTML validálás

A fenti példából világos, hogy érdemes ellenőrizni a HTML érvényességét. A fenti egyszerű példában egyszerűen megtekintheti az összes kódot, és találhat hibákat, de mi van a hatalmas, összetett oldalakkal?

A legjobb, ha ellenőrizni kell az oldalt az érvényesítési szolgáltatási jelölésben. A W3C létrehozta és támogatta a HTML, CSS specifikációkat és más webes technológiákat. A szolgáltatás ellenőrzi a HTML-t, és jelentést készít a hibákról.

A HTML-t ellenőrizheti a címen, ha letölti a fájlt, vagy egyszerűen az oldal megragadását.

Aktív tanulás: HTML dokumentum érvényesítése

Nyissa meg a Markup Validation szolgáltatást a böngészőben.
Ugrás a hitelesítéshez közvetlen bemeneti móddal.
Másolja a teljes dokumentumkódot (nem csak test), és helyezze be a helyére.
nyomja meg Ellenőrizze (ellenőrizze).

Látni fogja a hibák listáját és egyéb információkat.

Hibaüzenetekkel való munka

Általában egyértelműen világos, hogy milyen üzenetek jelentenek, de néha meg kell próbálnod megérteni, mi a helyzet. Most átmegyünk az összes hibát, és csodálkozunk, hogy mit jelentenek. Kérjük, vegye figyelembe, hogy az üzenetek jelzik a sort és a kód oszlopot, hogy a hibák könnyebben kereshetők.

"Vége tag Li implicit, de voltak nyitott elemek" (2 példány): nincs világos záró címke, bár a böngésző kitalálja, hol kell lennie. Az üzenet azt jelzi, hogy a záró címke várta, de megtalálja a megfelelő helyet.
"Elszámolt elem erős": Ez egy nagyon egyszerű hiba - az elem) azt jelzi, hogy tartalma nagy jelentőséggel bír, komolyság vagy sürgősség. A böngészők általában a merész tartalmát mutatják. "\u003e Nem zárva, és az üzenet közvetlenül a nyitó címkére jelzi.
"End tag erős sérti a fészkelő szabályokat": Az elem helytelenül fektetett - ezen a szinten nincs pár nyitó címke.
"Az attribútum értékének belsejében elért fájl vége. Un figyelmen kívül hagyva a címkét": titokzatos üzenet. Az a tény, hogy valahol (valószínűleg a dokumentum végén) helytelenül írta ki az elem tulajdonát, és a fájl vége ebben a tulajdonságban volt. A böngésző nem látja a linkeket - valószínűleg a mellette lévő probléma.
"A fájl vége, és nyílt elemek voltak": a fájl vége, de néhány elem nem zárva van. Az üzenet jelzi a fájl végét, ebben az esetben a példaelem nem zárva van: Link a Mozilla honlapjára ↩

↩ ↩

Gyakran gyakran a felhasználók megfigyelhetik a helyzetet, amikor a szkript hiba megjelenik a böngészőben (azaz). Ha a helyzet egy karakter része, akkor nem aggódik, de ha az ilyen hibák rendszeressé válnak, akkor érdemes gondolkodni a probléma jellegére.

Az Internet Explorer hibaüzenetét általában helytelenül feldolgozza a HTML-PADE kód böngészőjét, az ideiglenes internetes fájlok jelenlétét, a fiókparamétereket, valamint számos más okot, amelyekről az anyagban tárgyalnak. Figyelembe kell venni a probléma megoldásának módszereit is.

Mielőtt általánosan elfogadott módszereket folytatnánk az Internet Explorer problémáinak diagnosztizálására, amelyek forgatókönyv hibákat okoznak, meg kell győződnie arról, hogy a hiba nemcsak egy adott webhelyen, és azonnal több weboldalon fordul elő. Meg kell vizsgálnia azt a weboldalt is, amelyen ez a probléma egy másik fiókban, egy másik böngészőben és egy másik számítógépen történt. Ezáltal a hiba okainak keresése és a hipotézis kiküszöbölése vagy megerősítése, hogy az üzenetek bizonyos fájlok vagy beállítások jelenlétének következtében jelennek meg a számítógépen

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

Az aktív forgatókönyvek, az ActiveX és a Java elemek befolyásolják a webhelyen található információk kialakításának és megjelenítésének módját, és valódi oka lehet a korábban leírt problémának, ha blokkolva vannak a felhasználó számítógépén. Annak érdekében, hogy a szkripthibák erre az okból felmerüljenek, egyszerűen vissza kell állítania a böngésző biztonsági beállításait. Ehhez követni az ajánlásokat.

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

Az ablakban lépjen a fülre Biztonság
Ezután nyomja meg a gombot Alapértelmezettmajd gomb rendben

Internet Explorer ideiglenes fájlok

Minden alkalommal, amikor megnyit egy weboldalt, az Internet Explorer az Online oldal helyi példányát tárolja az úgynevezett ideiglenes fájlokban. Ha az ilyen fájlok túl sokat válnak, és a mappa mérete több gigabájtot eredményez, akkor problémák merülnek fel egy weboldal megjelenítésével, nevezetesen a Script hiba üzenete. Az ideiglenes fájlokkal rendelkező rendszeres tisztító mappa segíthet kiküszöbölni ezt a problémát.
Az ideiglenes internetes fájlok törléséhez kövesse a következő műveletek sorrendjét.

Nyissa meg az Internet Explorer 11-et
Szolgáltatás
Az ablakban lépjen a fülre Tábornok
Fejezetben Böngésző magazin nyomja meg a gombot Távolítsa el ...

Az ablakban A felülvizsgálat története eltávolítása Ellenőrizze a zászlókat a bekezdések közelében Ideiglenes internet és webhely, Cookie-k és weboldaladatok, Magazin
nyomja meg a gombot Töröl

Anti-vírus szoftvermunka

A forgatókönyv hibái a víruskereső program működésével lehetségesek, amikor blokkolja az aktív forgatókönyveket, az ActiveX és a Java elemeket egy oldalra vagy mappára a böngésző ideiglenes fájlok mentéséhez. Ebben az esetben a telepített víruskereső termék dokumentációjához kell fordulnia, és letiltani kell a mappa szkennelését az Idős internetes fájlok mentéséhez, valamint az interaktív objektumok blokkolásához.

Helytelen HTML oldalkód feldolgozása

Nyilvánul meg minket, szabályként, az egyik helyszínen, és azt jelzi, hogy az oldalkód nem teljes mértékben alkalmazkodik az Internet Explorerrel való munkához. Ebben az esetben a legjobb, ha a böngészőben lévő szkriptek hibakeresését kikapcsolja. Ehhez kövesse az alábbi lépéseket.

Nyissa meg az Internet Explorer 11-et
A böngésző felső sarkában (jobbra) kattintson az ikonra Szolgáltatás Fogaskerék (vagy az Alt + X gombok kombinációja) formájában. Ezután a Megnyitott menüben válassza az Elem lehetőséget.
Az ablakban lépjen a fülre Emellett
Ezután törölje a jelölőnégyzetet a pontról Értesítés megjelenítése minden szkripthibáról és kattintson rendben.

Ez a leggyakoribb okok listája, amelyek a szkript hibákat okozzák az Internet Explorerben, így ha fáradt az ilyen üzenetekről, fizessen kissé figyelmet, és oldja meg a problémát egyszer és mindenkor.

Jelenleg számos különböző böngésző van, egyfajta vagy egy másik, a meglévő HTML szabványok támogatására. Személy szerint inkább a Mozilla Corporation böngészőjét részesítem meg. Ez a böngészőnek hosszú története van (a híres Netscape Navigator böngésző alapján íródott). Azt is szeretném, ha ezt a böngészőt szeretném, azzal a ténnyel, hogy támogatja a plug-insek rendszerét - külön-külön terjeszthető kiegészítéseket, ha csatlakoztathatja a funkcionalitást és konfigurálhatja az igényeit. És végül ez a böngésző szabadon elosztva nyílt forráskódokkal, ami szintén fontos. Ezért úgy döntöttem, hogy leírom azt a lehetőségeket, hogy ez a böngésző nemcsak a felhasználó számára biztosítja, hanem a weboldalak fejlesztőjét is, hogy milyen egyszerű és kényelmes az írásbeli termékek hibakeresésének.

A Mozilla Firefox az egyik legnépszerűbb fejlesztő és webfejlesztő böngésző. Ez a böngésző által létrehozott projektek, a hibák, javítások, javítások, javítások, javítások miatt vonzza figyelmét. A standard böngészőszállítás tartalmaz Java konzolt (vagy "hiba konzolt"). Ez a segédprogram lehetővé teszi a beépített Java-Script parancsok rögzítését. De a böngésző sokkal nagyobb funkcionalitása a Mozilla Alapítvány hivatalos honlapján letölthető és telepíthető harmadik féltől származó bővítményeket ad. Most azt szeretném, ha ezt a bővítményeket megvizsgálnám - ez a webfejlesztő és a Firebug. Mindkét kiegészítés letölthető a fenti linkek szerint a hivatalos kiegészítő webhelyről. A telepítési és újraindítási böngésző után a fejlesztő bőséges lehetőségeket kínál, amelyeket az alábbiakban leírom, mindegyik bővítményre.

Firebug plugin.

Amint azt a hivatalos oldalon említettük: "Firebug integrálja a Firefox böngészőt, hogy nagymértékben gazdagítsa a fejlesztő eszközkészletét. A CSS, HTML és JavaScript "Élő", bármely weboldalon szerkesztheti, hibakeresését és felfedezését. " És valóban. Tekintsük a plugin egyik funkcióját, nevezetesen:

HTML megtekintése és szerkesztése.
CSS építése.
Hálózati lekérdezés monitoring
JavaScript hibakeresése.
JavaScript-tanulmány
JavaScript

Ez nem az összes képesség teljes listája. Tehát a projekt nyitva van (openforrás), akkor bárki megváltoztathatja és kiegészíti a funkcionalitást.

A pluginnal való munkához nyomja meg az F12 gombot (Ctrl-F12, hogy egy külön ablakban dolgozzon). A sikeres elindítás után a következőt kapjuk - az 1A. Ábrát, 1b.

1. ábra. A Firebug plugin kezdeti ablaka.

1b. Ábra. A Firebug plugin kezdeti ablaka.

Ezután kezdődik a tényleges munka a pluginnal. Például meg kell találnunk egy adott objektumot HTML-kódban, vagy pontosan meghatározzuk, hogy pontosan az aktuális fragmenst CSS segítségével hajtják végre. Ehhez csak ki kell választania a szükséges opciókat a Plugin ablak menüben. Az alábbi példa az ellenőrzési módban HTML. Most, a dokumentumoldalon, az egér kurzor alatt, észre fogjuk venni a téglalap alakú területet, amely bemutatja a telket, ahol a munka folyik. A Plug-in ablakban látni fogjuk azokat a paramétereket, amelyeket HTML és CSS használunk. Emellett kattintva mindegyikre kattintva módosíthatja és nyomon követheti őket a dinamikában. A leírt műveleteket a 2,3,4 számú ábrák szemléltetik.

Ennek a projektnek a fejlesztése a plugint a fenti célokra használták fel. Azonban, bár itt nem használták a Java-szkriptet, a Firebug plugin is használható a hibakereséshez. A hibakeresés példáját az 5. ábrán mutatjuk be.

Ezen a fent leírtak szerint a bővítés funkcionalitása nem korlátozott. Teljesen tanulmányozhatja az Ön igényeit az alábbi hivatkozások letöltésével a Mozilla Firefox telepítésével.

Webfejlesztő plugin.

A webfejlesztő a Mozilla Firefox böngésző második bővítése, nagyon erős és funkcionális, amely lehetővé teszi, hogy gyors és hatékony hibakeresést állítson elő. A telepítés után a böngészőablakban egy további panel jelenik meg a 6. ábrán látható böngészőablakban.

További munkát végez a plugin intuitív módon érthető. Például, ha CSS-vel kell dolgoznunk (bár nem olyan teljesen funkcionálisan, mint egy Firebug plugin), kattintson a CSS menüre és a blokkra, kapcsolja be vagy ki.

Nagyon kényelmes a fejlesztő számára a vasalás, hogy nézze meg, hogy a projekt hogyan fog kinézni a monitorok, különböző felbontás. Ehhez használja a Resize fülét. Itt manuálisan beállíthatja a szükséges képernyőfelbontásokat (800x600, 1024x768 stb.), Majd szabadon kapcsolja be őket, érintkezzen kapcsolatba vagy törölje a tartalmat. Ez a funkcionalitás a 7. ábrán látható.

Ez a kiterjesztés gazdag funkcionalitással rendelkezik, amelyeket mind a hivatalos webhelyeken is leírtak és rendelkezésre állnak.

Használt források listája

1. www.getfirebug.com
Hivatalos kiegészítő webhely.
2. http://addons.mozilla.org.
A Mozilla hivatalos honlapja, amely a Firefox böngésző bővítményeit helyezi el, a fejlesztők tájékoztatására, a pluginok használatáról.
3. http://chrispederick.com/work/web-developer/
Hivatalos weboldal fejlesztő webdeveloper plugin.

A Habré-nál sok cikk van, amely leírja a webfejlesztés érdekes és összetett aspektusait, de sok olvasó van, akik a webfejlesztő karrierje elején való elején szeretné látni az anyagot, amely lehetővé tenné az első lépést a "PHP-től 24-ig órák "a fejlődés komoly szinten, és szeretnék megosztani tapasztalataimat ebben a kérdésben.

A webes alkalmazás sajátosságai két részre oszthatók: ügyfél és szerver. Az ügyféloldali oldal a JavaScript-en működik (talán valahol megtalálható és vbscript, de valószínűleg nem fogjuk figyelembe venni ezt az ügyet), a kiszolgálón sok dolog van, elvben, de a PHP-re, a legnépszerűbb nyelvre nézünk A webes alkalmazások része. Érdekes lenne beszélni a hibakeresésről és a flash alkalmazásokról az ügyféloldalon, de az érintett téma és olyan kiterjedt, hogy elhagyjuk.

Ön is tulajdoníthatja az ügyfélkódelemzés és a HTML-kód hitelesítésének feladatát is. Úgy tűnik, hogy olyan feladat, amely nem egészen a programozás területéről, hanem fontos is.

A figyelembe vett feladatok egyes részeit már más cikkekben is figyelembe vették, és kapcsolatba léptem rájuk.

Hibakeresési és profilozó ügyfélkód

A JavaScript-en végzett hibakeresési kód "klasszikus" módszere a riasztási funkció és származékai használata. Emlékszem, a karrierem elején személyesen írtam egy print_r funkciót a JavaScript számára, mivel még nem láttam a hibakeresési információkat a tömbökre és az objektumokra vonatkozó lehetőségekre. Úgy nézett ki, mint ez:
Funkció Print_R (változó) (változó) (Variable constanof array || változó példány objektum) (VAR gomb; a (változó) riasztás (kulcs + "\u003d billentyű +" \u003d\u003e "+ változó);) más (riasztás (változó);)

A profilkészítő beszédről természetesen nem végeztek egyáltalán.

Ezzel a megközelítéssel a konzolobjektumról szóló információ még forradalmat eredményez.

A webes alkalmazás ügyféllapjának sajátosságai megkövetelik a kód hibakeresését minden népszerű böngészőben. Természetesen a leggyakrabban elegendő és hibakeresés az Internet Explorer "E és bármely normál más böngészőben, de megnézzük az összes lehetőséget.

Mozilla Firefox.

Valószínűleg ez a Firefox, amely az ügyfélkód hibakeresésének nevezhető. Hosszú ideig rámutatott, mint a legmegfelelőbb böngésző, és mindezt a Firebug bővítésnek köszönhetően, amely valószínűleg a HTML-kód érvényesítése mellett minden szükséges lehetőség.

A 4. verzióval kezdődően a beépített webkonzol megjelent, amely a "konzol" fül és a "Hálózat" funkcióinak részét képezi, valamint a Firebug "-ot, valamint a CSS hibakeresését.

A 6. verzióból kiindulva megjelent egy egyszerű JavaScript-szerkesztő, amely szintén végrehajtja az "A, és lehetővé teszi, hogy írjon és hajtsa végre a kódot közvetlenül a böngészőben.

A 10-es verzióból kiindulva egy oldalfelügyelő jelent meg, amely lehetővé teszi a HTML kód és a CSS tulajdonságok tanulmányozását, azaz a "HTML" fül funkcióit.

A HTML kód érvényesítéséhez szabályként a HTML Validator kiterjesztése felelős. Csak az ő ikonja, jelezve a Habrahabr.ru weboldal főoldalán lévő hibák számát, a böngésző jobb alsó sarkában látható az oldalfelügyelőn.

Továbbá, kihasználva az esélyt, azt fogja jelezni, hogy ez a böngészőnek számos kiterjesztése van, amelyek megkönnyítik az életet, ami a Habré már megfelelő volt.

Google Chrome és Safari

Ezek a WebKit alapú böngészők beépített webes felügyeleti fejlesztési eszközzel rendelkeznek, amely nagyon jól fejlett, és szinte ugyanazokat a tulajdonságokat hajtja végre, mint a Firebug. Ugyanakkor meg kell adnunk neki, hogy nem lassítja a böngésző munkáját, amely az "idősebb testvér" számára megtalálható.

A Chrome-ban a CTRL + SHIFT + I gombok megnyomásával vagy egyszerűen az F12 segítségével hívható meg. A Safariban rejtve van, és használhatja azt, hogy lehetővé kell tennie a fejlesztési képességeket a böngésző beállításaiban. Később a fejlesztői eszközök elérhetők lesznek a főmenü "Fejlesztési" tételéből vagy a CTRL + ALT + I gombok kombinációjából.

A HTML-kód érvényesítéséhez harmadik féltől származó bővítést kell telepítenie. Például a króm esetében érvényesség lehet. A Safari számára még nem lehetett választani semmit.

Opera.

Az Opera is van egy beépített eszköz a fejlesztők számára, amelyet "Opera Dragonfly" -nek neveznek, és bármikor hívható a CTRL + SHIFT + I gombok kombinációjával. Úgy néz ki, mint a Webkit, és hasonló jellemzőkkel és profikkal rendelkezik, bár személyesen, kevésbé kényelmes.

Hibakeresési és profilozó szerver kód

Xdebug.

Amint az elején egyetértettünk, figyelembe vesszük az esetet, ha a PHP-t a kiszolgálón használják. Itt a "Classic" hibakeresési módszer echo, print_r és var_dump, de van egy eszköz a hibakereséshez, mint a legjobb házak - Xdebug. Számomra személyesen, az intézet tanulásának jellemzői miatt "jobbra, mint a Delphi".

Az XDEBUG kiterjesztés lehetővé teszi legalább a kódot a lépéseken keresztül, és megtekintheti a változók értékeit, amely növeli a PHP programozását egy új szintre. A XDEBUG-vel való munkavégzéshez megfelelő volt. Az Xdebug általában elérhető a GNU / Linux tárolókban, szintén nem túl nehéz telepíteni az ablakokban, másolja a dll fájlt.

Ha ezt a bővítményt használja, egy bejövő kapcsolat érkezik a kiszolgálóról a fejlesztő számítógépére (alapértelmezés szerint a 9000-es portra), amelyet meg kell tennie. Ehhez ennek megfelelően konfigurálnia kell az IDE-t.

By the way, az IDE használata is nélkülözhetetlen feltétele. Egyes programozók úgy vélik, hogy a kódolási háttérvilágítás és az IDE programozás közötti különbség csak nagy projekteken látható, de személyesen úgy vélem, hogy a különbség még a "Hello World" programban is látható. - A nevek és a szabványos funkciók argumentuma megéri.

Xhprof.

A bővítéskor

Igen, az Xdebug profilozási lehetőségeket biztosít, de a Facebook fejlesztése és ezeknek a célból, Xhprof, én személyesen tetszik. Én, hogy őszintén mondjak, nem költöttek semmilyen tesztet, de úgy vélik, hogy ez a kiterjesztés sokkal jobban megfelel a termelésnek szerverek és valós terhelésű profilozás.

Telepítés

Sajnos ez a kiterjesztés nem szerepel semmilyen tárhelyen. Belép Pecl-be, de valamilyen oknál fogva a telepítését gyakran a probléma terheli. Emiatt a forrásból kell telepíteni.

# Kapja meg a forráskód wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Csomagolja ki a forráskódot Tar -xvf xhprof-0.9.2.tgz # Ugrás a könyvtárba, ahol a CD XHProf- 0,9 kiterjesztési kód található. 2 / kiterjesztés / # A Compilation és a Test Phpize ./Configure Make Test # Tartjuk a civilizált Checkinstall telepítését
Az XHProf.ini konfigurációs fájl megközelítőleg ilyen jellemzőkkel rendelkezik:

Bővítés \u003d / usr / local / lib / php / kiterjesztések / No-Debug-Non-Non-ZTS-20090626 / XHProf.so
; Katalógus naplókhoz
xhprof.output_dir \u003d "/ var / log / xhprof /"

Profilozás

A könyvtár, amelyet az archívum összekapcsolásával kapunk, a bővítési források mellett, valamint a webes felületet is tartalmazza, hogy tanulmányozza a profilozás eredményeit, és a könyvtárat az alkalmazás profilozásához.

Adunk példát a profilozásra. Az alkalmazáskódnak a következő elemeket kell tartalmaznia:
// A parancsfájl megkezdése, kapcsolja be a profiling // mind a betöltést a processzorra, mind az XHProf_enable memóriára (xhprof_flags_cpu + xhprof_flags_memory); / * * * A szkript vége * // A parancsfájl vége, a teljes profilozás, // Írja meg az eredményt a $ xhprofdata \u003d xhprof_disable (); a_once xhprof_dir. "/ xhprof_lib / utils / xhprof_lib.php"; a_once xhprof_dir. "/ xhprof_lib / utils / xhprof_runs.php"; $ xhprofruns \u003d új XHPROFRUNS_DEFAULT (); $ Namespace \u003d "Néhány egyedi név"; $ Runid \u003d $ xhprofruns-\u003e Save_Run ($ xhprofdata, $ névtér); Echo "\\ n ";
Itt az XHPROF_DIR konstans a katalógusra mutat, ahol kicsomagoltuk a letöltött archívumot.

Az eredmények elemzéséhez ugyanolyan webes felületre van szüksége. A $ XHPROF_DIR / XHPROF_HTML könyvtárban lehet venni - hagyományos módon jelölje meg. Például egy megfizethető webkiszolgálóba helyeztük, és az example.com/system/xhprof/-nál kapható, majd elemezni a munka eredményét, a következőképpen kell kapcsolatba lépnünk:

Example.com/system/xhprof/?run\u003d%RUnid%&source\u003d%namespace%

Hasonló eredményt kapunk:

A profilalkotás folyamatosan beilleszthető az alkalmazáskódba, vagy például véletlenszerűen elindítható egy bizonyos valószínűséggel vagy bizonyos állapot jelenlétével. Például:

$ Needprofiler \u003d (MT_RAND (0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
Ebben az esetben lehetséges, hogy panaszok vannak az ügyfelektől vagy a gyanúaktól, utalnak a profilozás eredményeire egy bizonyos időintervallumra. A Névtér paraméter használatával meghatározhatja, hogy az alkalmazás melyik része (melyik parancsfájl, vezérlő, művelet) profilozott.

Profiling SQL kérések

Rendszerint egy olyan adatbázissal dolgozik, amely az alkalmazásban szűk keresztmetszet. Ezért ajánlott a kérelmek profilozásának elvégzése. Például fontolja meg az osztály egy részét, amelyet a MySQL bővítés funkciói köré csomagolnak. Igen, tudom, hogy ez a bővülés nem nagyon szeretett, és nem kevesebbet kíván a halál, mint a régi IE6. Nem sürgetem, hogy használja, csak ez az osztály kezében van.

/ ** * kérés * @param string $ sql lekérdezés * @param Array $ Params Options * @param string $ lekérdezés összeállított kérés * @return tömb eredmény * / nyilvános funkció lekérdezés ($ SQL, Array $ Params \u003d Array (), & $ lekérdezés \u003d "") ($ Start \u003d Microtime (True); // A paraméterek "védelme", \u200b\u200bbeleértve a "védelmet" $ \u003d Microtime (True); $ Time \u003d $ Stop - $ Start; $ This -\u003e _ AddroprofilerData ($ SQL, $ TIME); // Visszatérési visszatérés) Privát funkció _addprofilerdata ($ lekérdezés, $ Time) (ha (IS_ARRY (SELFEY: $: $ Profilerdata)) (Self :: $ ProfilerData \u003d Array ("Query" \u003d\u003e $ Lekérdezés, "Time" \u003d\u003e $ Time);))) Nyilvános funkció __Destruct () (IS_ARRAY (IS_ARRY (SELFEY: $: $ profilerdata)) ($ This -\u003e _ WriteProfilerData (), Self :: $ ProfilerData \u003d FALSE;) // leválasztás az adatbázisból) Privát funkció _writeprofilerdata () ($ értékek \u003d tömb (); foreach (Self :: $ ProfilerData $ Sor) ($ Query \u003d mysql_real_escape_string ($ sor ["Query"], $ this-\u003e con); $ time \u003d (float) $ sor ["Time"]; $ hash \u003d CRC32 ($ sor ["lekérdezés"]); $ értékek \u003d "($ hash," $ lekérdezés ", $ time) ; ) ha ($ értékek) ($ értékek) ($ strvahalu \u003d implode (",", $ értékek); $ SQL \u003d "A" profiler_queries "(query_hash`,` Query`, `work_time`) értékek $ strvahalues \u200b\u200b'; @Mysql_query ($ sql, $ this-\u003e con); )))))))))
Itt a Profiler_Queries asztalra vonatkozó lekérdezési adatok tárolódnak. Ez a táblázatnak van egyfajta myisam vagy archívuma, mivel lehetővé teszi a halasztott betétek kialakítását, amelyek nem hoznak létre túlzott válasz késleltetést a profilozás során. Továbbá, hogy jobban keressen kérelmeket az asztalon, a táblázat jobb hozzon létre egy Int típusú oszlopot, ahol a CRC32-hash lekérdezést egy index létrehozására írják.

Következtetés

A cikk meglehetősen nagy volt. Talán itt sétáltam a csúcsok mentén, és megérintettem a már megérintett témákat, de ha valami ilyesmit olvastam - egy cikk, ahol az összes információt összegyűjtötték és hasznos linkeket gyűjtöttek, segíthet nekem felbecsülhetetlen segítséget. Remélem, hogy a cikkem segít valakinek a felvilágosodás felé vezető úton.