Hibakeresés javascript
Úgy tűnik - de mi van ott, hogy elmondja? Mégis, ez nyilvánvaló. De a kérdés, hogy megkérdeznek meglepő gyakorisággal. Igen, és azt mondani valamit.
Konkrét példákat, és megmondja, hogyan oldottam meg őket.
Látjuk a cél, hogy ne lássa az akadályokat
Itt a fő böngészők és hibakereső eszközök:
- firefox:
Mindannyian szerették Firebug bővítmény - Safari. Chrome:
A beépített WebKit Web Inspector - Opera:
Csodálatos épített Dragonfly - Internet Explorer 8:
Beépített Developer Tools - Internet Explorer <= 7
Sok lehetőség van:
DebugBar. Companion.JS. az MS Visual Studio ...
De van mindezeket mint valami nem hajlott - ezek vagy nehézkes, vagy kényelmetlen, vagy a fizetős :)
És ő elkapott egyedül Script Debugger. Nagyon spártai, de mindent, amit kell.
Mindezen hibakereső eszközök, mi érdekli breakpoint'y:
És itt van egy kis „nyalánkság» - feltételes töréspontok (jobb klikk a »töréspont«):
Ez azt jelenti, elkezdünk egy globális változó (például) allowBreakpoints és a „töréspont” indul csak akkor teszünk, hogy szeretnénk.
Sajnos ez nem működik mindenhol, úgyhogy nem szoktam használni.
Mivel a „fékek” stream
Ez biztos, hogy használni:- Firefox mellékelt Firebug'om
- Safari, Chrome, nyitott / engedélyezve Webvizsgáló / Script Panel
- Internet Explorer 8, nyitott / engedélyezve fejlesztőeszközök
- Internet Explorer <= 7 с установленным Script Debugger
- Opera nyitott / engedélyezve Dragonfly
És ne félj, hogy írjon debugger a kódban - a hiba nem okoz.
De a lehetőség feltételes megálló:
if (allowBreakpoints == true)
debugger;
* Ez a forráskód is kiemelte a Source Code megjelölésében.
Szeretem, sokkal több, mint egy sor „töréspont” Így írok a kódot, és a hibakeresés az valójában egy helyen, nem pedig kettő.
Debug keresztül figyelmeztető ()
jellemző töréspontok
Miért? Ha a leállítás ideje a forgatókönyvet indult AJAX-kérés vagy időtúllépés, és nincs válasz jött vissza - ő már nem tér vissza soha. Elfogadom, hogy a modern web-projekt ezt elég jó. Ezért idején „vészleállító” script, nem tudunk megfelelő debug'at majd - részben a logikai örökre elvész.
Szóval igyekszem elkerülni a gyakorlatban hibakeresés megállás.
„Jobb» hibakeresés
Röviden: egy jó debug - a fakitermelés. Szóval alapvetően működik, és - a megfelelő helyen a megfelelő időben kiváltott console.log (.).
Igen, körülbelül console.log - először ez a módszer, hogy a világ, amennyire vissza tudok emlékezni, együtt Firebug. Nem, ez nem szabványos, és nem az a tény, hogy ez működni fog az IE6. Azonban a modern böngészők be naplózás pontosan hogyan console.log. Ez azért van így jegyezni. És ha a termelési kódot kapja console.log (.) - Légy résen, eltörhet! Tehát lehet, hogy megéri, hogy felülbírálja az objektum a kód konzolon. így csak a tüzet.
Ha a cél böngésző nem console.log. és szeretné - próbálja Firebug Lite vagy a Blackbird. élvezhetik;)
CASE:
Te csak prodebazhit egy kódot. Például, hogy mi történik az egy gombnyomással, vagy azt követően az AJAX-terhelés az adatokat.
Itt nehéz - meg kell találni, hogy hol kezdjem.
Egy kis art
// vagy csak
debugger;
* Ez a forráskód is kiemelte a Source Code megjelölésében. Természetesen ez a módszer nem tökéletes. Előfordul, hogy teszi a baklövéseket. De ez egy jó módja, tetszik nagyban segíti a munkát.
Tehát, majd helyezze be a kódot talált töréspontot készlet. Ha nem akar (vagy nem tud) módosítja a forráskódot - akkor ehelyett fel a hibakereső kulcsszó brakepoint hibakereső eszközt.
Tehát:- Keresünk a megfelelő helyen azonos módon
- Ehelyett debugger write console.log (variable_to_watch)
Vannak érdekes frissítéseket.
variable_to_watch - egy tárgy óta megváltozott a kimenet a konzolra. És mint azt fogja tapasztalni, hogy állapot idején a hívást.
Itt kell, hogy nem használja console.log (variable_to_watch). és console.dir (variable_to_watch)
Szükség van nem csak az aktuális érték variable_to_watch. hanem kísérletezni velük (például azt szeretné, hogy hívják módszer):
// let hozzá akar férni az objektum obj
if (debugEnabled)
console.log (window.temp_var = obj);
* Ez a forráskód is kiemelte a Source Code megjelölésében.
Így nem csak a kimenetnek a konzol, hanem, hogy az objektum elérését egy globális linket is: window.temp_var.
Nyílt Firebug-> Konzol és hívja a módszer: temp_var.objMethod ().
Mit kell tenni? Én így:
Hozzon létre egy fájlt a javítást: my-ext-patch.js. és csatlakoztassa posleext-all.js
Belül írni valami ilyesmit: (function () var _backup = Ext.form.Form.render; // Fenntartjuk a módszer teszi formák - Az Cap ;.)
Ext.form.Form.render = függvény (konténer) // Itt látható a hibakeresés
console.log (konténer);
// A következő lehetőségek közül:
// console.dir (konténer);
// console.log (window.t = konténer);
// hibakereső;
// Execute a kezdeti módszer
visszaút _backup.apply (ezen érveket.);
>
>) ();
* Ez a forráskód is kiemelte a Source Code megjelölésében.
Perversion? Talán. De szeretem> :)
Remélem, hogy a tapasztalat segít valaki.