Weboldal hibakeresése. Weboldal hibakeresés. Szkripthibák az Internet Explorerben. Okok és megoldások. SQL lekérdezések profilozása. JavaScript hibakeresés hibakeresővel és konzollal
Az F12 fejlesztői eszközök használata a JavaScript-hibák elhárításához
Ez a tartalom többre hivatkozik régi verzió F12 fejlesztői eszközök. Töltse le az F12 Tools legújabb dokumentációjá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. Minden példányba beépítve Windows Internet Az Explorer 9 F12 fejlesztői eszközei hibakereső eszközöket, például töréspontokat, megtekintési vezérlőket és helyi változókat, valamint konzolt biztosítanak az üzenetekhez és az azonnali kódvégrehajtáshoz.
Ez a cikk azt tárgyalja, hogyan használhatja az F12 fejlesztői eszközöket a JavaScript-kód hibakeresésére. Ez a cikk nem egy átfogó hibakeresési oktatóanyag, hanem inkább olyan eszközöket kíván kiemelni, amelyek segíthetnek a fejlesztőknek a kód használatában. Az Internet Explorer 9 böngészőben nyomja meg az F12 billentyűt a fejlesztői eszközök megnyitásához, majd kattintson a Script fülre a kezdéshez.
A bal oldali Script lapon található a terület forráskód, ahol a fejlesztő áttekintheti JavaScript-kódját, töréspontokat állíthat be, és átlépheti a funkcióit. A jobb oldali ablaktáblában válthat a konzol, a figyelési változók, a helyi változók, a figyelési halom és a töréspontok lapjai között.
A hibakereső elindítása és leállításaAmikor először megnyitja az F12 Developer Tools alkalmazást, és rákattint a Script fülre, a kód megjelenik a bal oldalon, a konzol pedig a jobb oldalon. A konzolon egy üzenet jelenhet meg, amely így szól: "Kérjük, frissítse az oldalt az F12 fejlesztői eszköz megnyitása előtt kapott üzenetek megtekintéséhez." Amikor frissíti a weboldalt, a konzol megjeleníti a böngésző által okozott hibákat vagy 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 Hibakeresés indítása gombra. A Hibakeresés indítása gombra kattintva frissíti a weboldalt, és újra futtatja a kódot a hibakeresőben.
A konzol használata szintaktikai és egyéb kódhibák észleléséreA 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 jelentheti a program állapotát és a hibaüzeneteket a konzolnak az "alert()" hívások vagy a rendelkezésre álló képernyőterület helyett. Például hozzáadhatja a sort
Window.console.log("A fájl sikeresen megnyílt");
A JavaScript-kódban, hogy információt kapjon a szkript állapotáról a végrehajtás megszakítása nélkül. További információ: .
Javítás kinézet forgatókönyvekAz F12 Developer Tools a kód megjelenítési módjától függetlenül képes hibakeresni a JavaScriptet sor vagy utasítás szinten. Még a tömörített szkripteken is átléphet, így azok nagy kódblokknak tűnnek. De néha nehéz követni a logikát, ha a kód egy blokkból áll.
A szkript formázásához kattintson a Konfiguráció gombra, és válassza a JavaScript formázása lehetőséget. A következő képernyőképek JavaScript kód blokkját mutatják a formázás előtt és után.
.png)
.png)
A kódvégrehajtás megszakítása A töréspontok beállítása az F12 fejlesztői eszközökben hasonló a bináris hibakeresők, például a Microsoft Visual Studio beállításához. 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 a kattintás hozzáad egy töréspontot, az újbóli kattintás pedig eltávolítja azt.
.png)
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 Töréspont beszúrása lehetőséget, vagy kattintson a bal margóra 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 körülmények között, ha jobb gombbal kattint a kódra, és a helyi menüből válassza a Töréspont beszúrása parancsot. Használhatja a korábban ismertetett script formázást (szép gépelés) is, úgy formázhatja a sorokat, hogy könnyebben lehessen kattintani a margókon.
Több töréspontot is kezelhet a Töréspontok laponHa nagy mennyiségű kóddal rendelkezik sok törésponttal, vagy akár több fájllal is, akkor a Töréspontok lap segítségével nyomon követheti az összes szükséges töréspontot. A Parancsfájl lapon kattintson a Töréspontok fülre a tulajdonságban vagy a jobb oldali ablaktáblában. Példaként tekintse meg a következő képet:
.png)
A Töréspontok lapon a fejlesztő engedélyezheti vagy letilthatja, törölheti, kiválaszthatja és másolhatja a töréspontokat anélkül, hogy a 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 opció mellett. A listában rákattintva közvetlenül is ugorhat egy töréspontra a kódban. Egyszerre több töréspontot is kiválaszthat, ha lenyomja a CTRL billentyűt, és rákattint a kívánt töréspontokra.
A Töréspontok lapon egy helyi menü is található (jobb gombbal kattintva), amely lehetővé teszi a töréspontok csoportjainak törlését, engedélyezését, letiltását vagy másolását. Ezeket a paramétereket a következő táblázat mutatja be.
| Töröl | Töréspont végleges törlése. |
| törölj mindent | Véglegesen eltávolítja az összes töréspontot. |
| Az összes engedélyezése | Jelölje be az összes jelölőnégyzetet a listában. |
| Az összes letiltása | Törli 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 a lehetőség 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ának szövegét. |
| Mindet kiválaszt | A lista összes töréspontját kiemeli. |
| A forráskódhoz | A bal oldali kódterületre lép a kiválasztott töréspont megjelenítéséhez. Ez a lehetőség nem érhető el, ha több töréspont van kiválasztva. |
Hasznos a feltétel nélküli leállás egy kódsorban, de még hatékonyabb 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 Töréspontok lapot. Kattintson a jobb gombbal a kívánt töréspontra, és válassza a Feltétel lehetőséget.
A feltételek párbeszédpanelen adja hozzá a megfelelőt JavaScript operátor. 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.
.png)
Megadhat egy feltételt, vagy logikai operátorokat használhat több létrehozásához nehéz állapotállj meg. De ne feledje, hogy a változók és objektumok hatóköre ugyanaz marad, mint amikor a töréspont nézetablakban voltak megjelenítve. A hatályon kívüli feltétel nem lesz igaz.
Átlépni a kódonHa a kódvégrehajtás leáll egy törésponton, az ugrógombokkal folytathatja a végrehajtást (F5), megszakíthatja a végrehajtást (CTRL+SHIFT+B), beléphet egy függvénybe (F11), átugorhat egy függvényt (F10) vagy kiléphet egy funkcióból. (SHIFT+F11 ). Ha a végrehajtás leáll egy törésponton vagy a lépésről lépésre történő végrehajtás során, a hibakereső ablak gyakorlatilag modálissá válik.
Ezért, mielőtt folytatná az interakciót a weblappal, le kell állítania a hibakeresést (SHIFT+F5), vagy folytatnia kell a végrehajtást (F5). Ezt érdemes szem előtt tartani, ha úgy tűnik, hogy egy weboldal nem válaszol. Ha több ablak megnyitásakor a hibakereső ablak nincs felül, előfordulhat, hogy válaszra vár a törésponton. Ebben az esetben a weboldal feletti irányítás visszavételéhez keresse meg az adott weboldal hibakereső ablakát, és nyomja meg az F5 billentyűt a folytatáshoz, vagy nyomja meg a SHIFT+F5 billentyűt a hibakeresés leállításához.
Tekintse meg a változókat a Figyelés és a Helyi lapok használatávalA Figyelő lap lehetővé teszi a figyelési változók meghatározását és megtekintését a hibakereső kódban. Tartalmazza a megadott változók nevét, értékét és típusát. Kattintson a Click to add... feliratú sorra az Órák lapon, és írjon be egy változónevet. Ha nem akarja beírni a változó nevét, másolja és illessze be a vezérlőváltozók listájába.
A vezérlőváltozók listájában szereplő értékek attól függetlenül jelennek meg, hogy éppen hibakeresést végez-e Ebben a pillanatban kódot vagy sem. Ha engedélyezi a hibakeresést és a kódkövetést, vagy beállítja a töréspontokat, a listában szereplő változóértékek hatókörét a szkript végrehajtásának aktuális 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.
Ellentétben a Figyelő értékek lappal, amely attól függetlenül mutatja az értékeket, hogy a megfelelő változók hatókörben vannak-e, a Helyi lap csak az aktuális hatókör változóit jeleníti meg. A megtekintéshez nincs szükség változók hozzáadására, mert a hatókör megváltozásakor a lap frissül, és megjeleníti 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 az alábbi lépéseket.
JavaScript hibakeresési példa //globális változó létrehozása a var megjelenítésünkhöz; function init() ( //inicializálás csak a HTML betöltése után display = document.getElementById("results"); ) function firstParam() ( //töréspont beállítása itt var a = 5; secondParam(a); ) function secondParam (a) ( var b = 10; thirdParam(a, b); ) függvény thirdParam(a, b) ( var c = 15; var d = a + b + c; //megjelenítés a konzolon, ha az F12 eszközök nyitva vannak, ha (window.console && window.console.log) ( window.console.log(a + " + " + b + " + " + c + " = " + d); ) else ( display.innerText = a + " + " + b + " + " + c + " = " + d; ) )
Fuss
Ahogy végiglép az egyes funkciókon, a megtekintett értékek definiálatlanról bizonyos értékekre változnak.
A Helyi lapon tapasztalható különbségek megérzéséhez nyomja meg az F5 billentyűt az F12 Fejlesztői eszközökből való folytatáshoz. A böngésző weboldalán kattintson a Futtatás gombra a kód újbóli futtatásához, és visszatérjen az F12 fejlesztői eszközökhöz. A Script lap jobb oldali ablaktáblájában kattintson a Helyi fülre, és nyomja meg az F11 billentyűt a funkciók ismételt lépéséhez. Vegye figyelembe, hogy a helyi változók listája csak olyan változókat tartalmaz, amelyeknek van értéke. A Local nézet a függvénynek átadott argumentumokat, azok értékét és típusát is mutatja.
Tekintse meg a híváscsomagotA Call Stack fülön megtekintheti a függvények kódból történő hívásakor megtett útvonalat. Ez segíthet észlelni a programhibából eredő váratlan kódvégrehajtási útvonalakat. A Call Stack lapon kattintson duplán bármelyik függvényre, és navigáljon a hívásához a forráskódban.
Próbálja ki a fenti példát, és tartsa szemmel a Call Stack lapot, miközben a kódon keresztül a függvényekbe lép.
.png)
A Call Stack lapon az aktuális funkció vagy hely mindig felül van (ezt egy nyíl jelzi mind a Call Stack fülön, mind a kódmezőkben). Nál nél dupla kattintás A listában szereplő bármely függvénynél a függvényt meghívó operátor kiemelve van.
Több szkript hibakereséseA nagy weboldalak általában több JavaScript fájlt használnak. Az F12 Developer Tools lehetővé teszi, hogy több szkriptfájllal dolgozzon, akárcsak a kód hibakeresése során. Egy másik fájl megtekintéséhez kattintson a Hibakeresés indítása gomb melletti lefelé mutató nyílra, hogy megjelenítse az ehhez a weboldalhoz tartozó szkriptek listáját. 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ásaA Menüsor jobb oldalán található Dokumentum mód beállítása minden F12 Fejlesztői eszközök lapon elérhető, de ez a beállítás különösen hasznos a Parancsfájlok lapon található kód hibakeresésekor. Az Internet Explorer 9 lehetővé teszi a dokumentummód módosítását a szabványok emulálásához előző verziók Windows Internet Explorer. Az Internet Explorer 9 böngészőben a deklaráció alapértelmezés szerinti elhagyása kompatibilitási módba állítja a dokumentumtípust. Amikor egy új funkcióval vagy új szabvánnyal, például HTML5-tel dolgozik, egyes hibák programozási hibának tűnhetnek, 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.
Frissítve: 2007. november
Az ASP.NET platform széles körű támogatást nyújt a webalkalmazások hibakereséséhez. A webalkalmazások elosztott jellege miatt azonban a hibakeresésük bizonyos tekintetben eltér.
Általában a webalkalmazások hibakeresése ugyanúgy történik, mint a többi Visual Studio-alkalmazás. Beállíthat töréspontokat, elindíthatja a hibakeresőt, szüneteltetheti a kódot, megvizsgálhatja a változók értékeit, és végrehajthatja a Visual Studio hibakeresőhöz kapcsolódó összes funkciót. További információkért lásd:. Ezenkívül az ASP.NET platform támogatja a nyomkövetési módot, amely lehetővé teszi műszerüzenetek beszúrását az űrlapokba. Részletek lásd a szakaszokat és.
A távoli hibakereséssel kapcsolatos további információkért lásd: .
Függetlenül attól, hogy hol történik a hibakeresés – be helyi számítógép vagy távolról, meg kell győződnie arról, hogy a hibakeresés kifejezetten ehhez a webalkalmazáshoz engedélyezett. A hibakeresés engedélyezéséhez használja a webalkalmazás-projekt részét képező Web.config fájlelemet. Ez a beállítás arra utasítja a fordítót, hogy illesszen be hibakereső szimbólumokat az alkalmazás lefordított kódjába, hogy azt egy hibakereső is tudja használni. A hibakeresést a webhelyadminisztrációs eszközzel engedélyezheti. További információért lásd:.
Vannak persze mások is – ezeket mindenképpen megemlítem.
Firebug FirefoxhozNem tudom biztosan, hogy a FireBug más fejlesztői eszközök őse-e, de határozottan a legnépszerűbb, legkényelmesebb és legfunkcionálisabb a fejlesztők számára.
A Firebug a Firefox kiegészítője, ami azt jelenti, hogy le kell töltenie a Firefox kiegészítőinek webhelyéről, és telepítenie kell.
Firebug indítá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 lehetőségekről még hosszan beszélhetünk részletesen, de úgy gondolom, hogy minden olvasónk ismeri őket, és ha nem - részletes információk a Firebug kezdőlapján van, vagy ugyanez Ilja Kantor fordításában.
Magán a firebug-on kívül szükség lehet egy hasznos kiegészítőre - FireCookie-ra, amivel (meglepetés :-)) megtekintheti és módosíthatja a sütiket.
WEB fejlesztői eszköztár FirefoxhozEgy másik hasznos kiegészítés az Ognelishez. Ez így néz ki:
Nézzük pontról pontra.
LetiltásLehetővé teszi a JavaScript kikapcsolását és a gyorsítótár használatának letiltását, ami nagyon hasznos a fejlesztés során (lehetővé teszi, hogy megbizonyosodjon arról, hogy az oldal a legújabb frissítések), törölje az oldalon használt színeket és cserélje le szabványosra, tiltsa meg a hivatkozó fejlécben (az oldal, ahonnan az utalás történt) küldését.
Cookie-kHasznos lehetőség a cookie-k kezeléséhez: megtekintheti, törölheti, letilthatja és hozzáadhatja őket.
CSSEz a menü a Developer Toolbar legmenőbb funkcióját tartalmazza – a CSS menet közbeni szerkesztését. Ezen kívül lehetőség van css megtekintésére, letiltására stb., stb. Véleményem szerint nagyon hasznos, ha van gyorsbillentyűk(A CTRL+SHIFT+C például lehetővé teszi, hogy közvetlenül az oldalstílusok nézetére lépjen)
ŰrlapokMinden 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ó ehhez automatikus töltésűrlapmezők (például webhely tesztelésekor, amikor a jelszavak emlékezése le van tiltva. Egyébként nem látok semmi hasznosat ebben az elemben.
KépekVan egy hasznos funkció a képek letiltására – megtudhatja, hogyan néz ki webhelye képek nélkül. Körözheti a képeket, megjelenítheti a méretüket és megjelenítheti az altattribútumokat.
InformációEbben a menüben sok lehetőség van. Hasznos lehet a class és az id attribútumok oldalon történő megjelenítése. Ezenkívül érdekes a „Színinformáció megtekintése” elem - az oldalon használt színek gyors információszerzéséhez. „Dokumentumméret megtekintése” – az oldalméret megtekintése. „Válaszfejlécek megtekintése” – oldalfejlécek megtekintése.
VegyesA leggyakrabban használt funkció a gyorsítótár törlése. Ezen kívül az itt elérhető funkciók a következők: „Oldalvonalzó” – egy vonalzó, „Oldalnagyító” – egy nagyító és „Vonalvezetők” – számos olyan vonal, amelyek hasznosak lehetnek a sablon vágásához.
VázlatKiválasztás különböző elemek oldalak - 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. Itt találhatók az oldalérvényesítéshez szükséges eszközök. Helyi és külső egyaránt. Kényelmes és gyors hozzáférés HTML, CSS stb. érvényesítéséhez. A HTML érvényesítéséhez használhatja a CTRL+SHIFT+H billentyűkódot.
Forrás megtekintéseForráskód megtekintése. Megtekintési lehetőség bent külső alkalmazás, a generált kód megtekintése.
Nekem a jobb sarokban lévő tetszik a legjobban. Ez egy gyors HTML, CSS validátor és JavaScript hibajelző. Ha nincs probléma, az ikon zöld, ha pedig problémák vannak, az ikon piros.
Internet Explorer fejlesztői eszköztárA 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ívható az F12 billentyű lenyomásával. Igaz, olyan szegényes, mint egy program a 90-es évekből.
De ehhez a böngészőhöz létezik egy sokkal menőbb eszköz, az úgynevezett Internet Explorer Developer Toolbar, amely a linkről tölthető le.
Kinézetre ez az eszköztár természetesen úgy néz ki, mint a firebug, de sajnos még nem érett rá. Bár másrészt van néhány olyan képessége, amivel a firebug nem rendelkezik. Az Internet Explorer Developer Toolbart a Firebug és a Firebug egyfajta hibridjének nevezném FireFox WEB Fejlesztői eszköztár.
A firebughoz hasonlóan itt is egy kattintással meg lehet vizsgálni egy elemet. Ám, ha azonnal látjuk a párnázást és a margókat, itt nincs ilyen lehetőség.
Ezenkívül az Internet Explorer fejlesztői eszköztára nem frissíti dinamikusan az elemfát, mint a Firebug. Vagyis ha bármit megváltoztatunk az oldalon js segítségével, akkor ezen az eszköztáron nem fogunk látni semmit.
Amit élvezhetsz, az a CSS menet közbeni megváltoztatása (egyszerű módja annak, hogy megtaláld, mit kell feltörni :), a CSS és a képek letiltása, a gyorsítótár gyors törlése és a cookie-kkal való játék, az érvényesítés gyors elérése.
A legjobb az egészben: van egy beépített színválasztó, amely lehetővé teszi, hogy pipettával bármilyen színt hozzon ki az oldalról. (az ff-hez külön ColorZilla plugin van).
Debug DebugBar Internet ExplorerhezA 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:
Valamilyen oknál fogva van egy beépített keresőmotor, egy szemcsepp, az ablak méretének megváltoztatása, és valamiért az a lehetőség, hogy egy oldalt küldjön egy barátnak szappanért. Bár ez hasznos lehet. De nem sikerült kihasználnom ezt a lehetőséget.
Ezen kívül van egy ellenőr:
A fejlesztők nem elégedtek meg a kattintással, mutogatással történő ellenőrzés módjával: érdekesebb dolgot találtak ki. A DebugBar-ban a szálkeresztet a kívánt elemre kell húznia, hogy láthassa a fában. Nincs lehetőség 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ótól kezdve 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 figyelmeztetlek, hogy a DragonFly Alpha2 fázisban van, ez magyarázza sok hibáját.
Jellemzők listája:
- DOM ellenőr;
- Ellenőrzés kattintással (ismét nem fogunk látni behúzást, mint a FireFoxban);
- Szerkesztés ;
- Gyors hozzáférés a hibakonzolhoz.
DF - valami ilyesmi külön oldal a keretben. Ha megnyitod, akkor 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 Explorer Dav Toolbar-ban, a dinamikusan létrehozott elemek nem jelennek meg. És általában, amikor megvizsgáljuk az oldalt, nem indul el a JavaScript: a hivatkozásokra és a gombokra nem kattintanak. Reméljük, látni fogjuk ezeket a funkciókat, amikor a DragonFly közelebb kerül a megjelenéshez.
Debug WEB Inspector a SafaribanAzonnal elmondom, hogy a Safari böngészővel kapcsolatos információk kiszivárogtak, így, ahogy mondják, nem vagyok felelős 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. Erre a célra egy kapcsoló található a felső lapon. Ha az egérmutatót egy elem fölé viszi az ellenőrzőben, az ki lesz emelve magán az oldalon. 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 menet közben a DOME dinamikus változásait, mint a FireBugban. De el kell ismerni, nagyon aranyosnak tűnik.
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 „Network Timeline” (a „Hálózat” gomb az ellenőrzőben):
Tisztán láthatja, hogy mikor és mennyi ideig tart a fájlok letöltése. A kérések fejléceit is megtekintheti, de magát a tartalmat sajnos nem.
Hibakeresés a fejlesztőknek Google Chrome
A Lame fejlett formában született, és azonnal megvan, bár egyelőre ferdén, de még mindig eszközei a fejlesztőknek.
- DOM-felügyelő;
- javascript hibakereső;
- JavaScript konzol.
Bármely elem vizsgálatához kattintson rá a jobb gombbal, és válassza ki az „Elemkód megtekintése” lehetőséget a helyi menüben:
A funkcionalitás ugyanaz, mint a Safariban: az elemek kiemelve jelennek meg, ha rámutatnak, de a CSS és HTML szerkesztés nem érhető el, és a DOM változásait nem követi nyomon a rendszer. De a bal alsó sarokban lévő gomb, amely az ellenőrt a böngészőablakhoz csatolja, nem működik.
Az „Erőforrások” lapon a következőket láthatjuk:
Kicsit eltér a szafari méretétől. Ezen a diagramon az áttetsző a relatív fájlméreteket, a teljes szín pedig a betöltési időt mutatja. Így vagy úgy, de nyilvánvaló, hogy a Chrome ezen része még korántsem kész.
Ebben a cikkben a leghíresebb böngészőbővítményeket és beépített modulokat néztem meg.
Vannak mások is, pl.
- Internet Explorer WEB Development Helper - jó asszisztens 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. Van néhány hasznos funkciókat;
- 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 kellene, vagy az említett bővítményekhez vannak olyan funkciók, amiket kihagytam, kérem írjon.
Élvezze egészsége érdekében!
Internetezés közben internet böngésző Az Intéző üzeneteket küldhet, amelyek jelzik, hogy az oldal hibákat tartalmaz, és előfordulhat, hogy nem jelenik meg megfelelően. Nézzünk több módszert a probléma megoldására.
UtasításA webalkalmazás jellemzői két részre osztják: kliensre és szerverre. Kliens oldalon JavaScriptben fut a kód (talán VBScriptet találsz valahol, de ezt az esetet valószínűleg nem vesszük figyelembe), szerver oldalon elvileg sok minden van, de megnézzük a PHP-t, a legnépszerűbb nyelv a webalkalmazások szerveroldalán. É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, ezért ezt most hagyjuk.
A HTML kód elemzése és validálása is a klienskód hibakeresési feladatai közé sorolható. Úgy tűnik, ez nem teljesen a programozás területéről származó feladat, hanem fontos is.
A tárgyalt problémák egyes részeivel más cikkek már foglalkoztak, és hivatkozásokat is biztosítottam hozzájuk.
Klienskód hibakeresése és profilozása 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 annak lehetőségét, hogy hibakeresési információkat adjak ki tömbökre és objektumokra. 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 konzolobjektum információit is forradalmasítják.
Sajátosságok ügyfél oldal A webes alkalmazások minden népszerű böngészőben kódhibakeresést igényelnek. Természetesen leggyakrabban elég az Internet Explorer és bármely más normál böngésző hibakeresése, de minden lehetőséget megfontolunk.
Mozilla Firefox Valószínűleg a Firefox úttörőnek nevezhető a klienskódok hibakeresésében. Hosszú ideje fejlesztésre legalkalmasabb böngészőként jelölték meg, és mindezt a Firebug bővítménynek köszönhetjük, amely valószínűleg mindent tartalmaz a szükséges képességeket, kivéve a HTML kód érvényesítését.A 4-es verziótól kezdve megjelent egy beépített webkonzol is, 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 egy 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ágok, vagyis a „HTML” fül funkcióit valósítja meg.
A HTML-ellenőrző bővítmény általában felelős a HTML-kód érvényesítéséért. Csak az ikonja jelzi a hibák számát kezdőlap A habrahabr.ru webhely a böngésző jobb alsó sarkában látható a képen az Oldalvizsgálóval.
Továbbá, megragadva az alkalmat, felhívom a figyelmet arra, hogy ehhez a böngészőhöz számos bővítmény létezik, amelyek megkönnyítik az életet, amelyekről már volt egy megfelelő cikk a Habré-n.
Google Chrome és Safari Ezek a WebKit-alapú böngészők beépített Web Inspector fejlesztőeszközzel rendelkeznek, amely nagyon jól kidolgozott, és szinte ugyanazokat a funkciókat biztosítja, mint a Firebug. Ugyanakkor meg kell adnunk a magáét, nem lassítja a böngészőt, ami „nagytestvérénél” megszokott.
Chrome-ban a Ctrl+Shift+I vagy egyszerűen az F12 billentyűkombináció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űkombináció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. Safarihoz még nem találtunk megfelelőt.
Az Opera Opera rendelkezik egy „Opera Dragonfly” nevű beépített eszközzel is a fejlesztők számára, és bármikor előhívható a Ctrl+Shift+I billentyűparancs segítségével. Hasonló ahhoz, amit a WebKit bemutat nekünk, és hasonló képességekkel és előnyökkel rendelkezik, bár személyes véleményem szerint kevésbé kényelmes.
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 egy lépéssel tovább viszi a PHP programozást. új szint. Volt egy megfelelő cikk az xdebug-gal való munka bonyolultságáról. Az XDebug általában elérhető GNU/Linux tárolókban, és Windows rendszeren sem túl nehéz a dll fájl másolásával telepíteni.
Ennek a bővítménynek a használatakor egy bejövő kapcsolat érkezik (alapértelmezés szerint a 9000-es porton) a szerverről a fejlesztő számítógépére, amelyet fel kell dolgoznia. Ehhez ennek megfelelően kell konfigurálnia az IDE-t.
Egyébként az IDE használata is elengedhetetlen 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 tapasztalható, de én személy szerint az a véleményem, hogy a különbség még a „Hello world!” programban is látható. - A szabványos függvények nevének és argumentumainak automatikus helyettesítése önmagában megéri.
XHProfA kiterjesztésről Igen, az xdebug profilalkotási lehetőségeket biztosít, de én személy szerint szeretem a Facebook ilyen célú fejlesztését, az XHProf-ot. Őszintén szólva, nem végeztem teszteket, de úgy gondolják, hogy ez a bővítmény sokkal jobban megfelel éles szerverekhez és profilozás valós terhelés alatt.Telepítés Sajnos ez a kiterjesztés nem szerepel egyetlen tárolóban sem. Benne van a PECL-ben, de valamiért a rendszeres telepítése gyakran okoz gondot, ezért forrásból kell telepíteni.# 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 # Lépjen a cd xhprof kiterjesztési kódot tartalmazó könyvtárba -0.9 2/extension/ # Lefordítjuk és teszteljük a phpize-t ./configure make make test # Civilizált módon telepítjük checkinstall
Az xhprof.ini konfigurációs fájl hozzávetőlegesen a következő lehetőségeket kínálja számunkra:
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/"
Nézzünk egy példát a profilalkotásra. A következő elemeket kell szerepeltetnie az alkalmazás kódjában:
// A szkript indítása, profilozás engedélyezése // mind a CPU, mind a memóriaterhelés xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); /* * Fő alkalmazás kódja */ // A 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); echo "\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ó - nevezzük így. Például elhelyeztük a webszerver számára elérhető helyen, é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%
Ilyen eredményt kapunk: 
A profilozás folyamatosan beépíthető az alkalmazás kódjába, vagy például véletlenszerűen, bizonyos valószínűséggel, vagy egy bizonyos 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 hivatkozhat a profilalkotás eredményeire. A névtér paraméter segítségével meghatározhatja, hogy az alkalmazás mely része (melyik szkript, vezérlő, művelet) profilozott.
/** * 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); // Lekérdezés végrehajtása, beleértve a "védő" paramétereket is $stop = microtime(TRUE); $time = $stop - $start; $this->_addProfilerData( $sql , $time); // Az 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ázisról ) privát függvény _writeProfilerData() ( $values = array(); foreach (self::$profilerData mint $sor) ( $query = mysql_real_escape_string($row["query"], $this->con ); $idő = ( float)$row["idő"]; $hash = crc32($sor["lekérdezés"]); $értékek = "($hash, "$query", $time)"; ) if ($értékek) ( $ strValues = implode(", ", $értékek); $sql = "INSERT DELAYED INTO `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 Archív táblatípus, mert lehetővé teszik a lusta beszúrások végrehajtását, ami nem növeli a profilalkotási válasz szükségtelen késleltetését. Ugyanígy jobb keresés lekérdezéseket a táblázatban, célszerű egy INT típusú oszlopot létrehozni, ahová annak a lekérdezésnek a crc32 hash-je lesz beírva, amelyhez indexet szeretne készíteni.