Informatie over ASP.NET AJAX-foutopsporingsmogelijkheden

door Scott Cate

De mogelijkheid om code op te sporen is een vaardigheid die elke ontwikkelaar in zijn arsenaal moet hebben, ongeacht de technologie die ze gebruiken. Hoewel veel ontwikkelaars gewend zijn om Visual Studio .NET of Web Developer Express te gebruiken om fouten op te sporen in ASP.NET toepassingen die gebruikmaken van VB.NET- of C#-code, zijn sommige niet op de hoogte dat het ook zeer nuttig is voor het opsporen van fouten in code aan de clientzijde, zoals JavaScript. Hetzelfde type technieken voor het opsporen van fouten in .NET-toepassingen kan ook worden toegepast op AJAX-toepassingen en meer specifiek ASP.NET AJAX-toepassingen.

Debuggen van ASP.NET AJAX-toepassingen

Dan Wahlin

De mogelijkheid om code op te sporen is een vaardigheid die elke ontwikkelaar in zijn arsenaal moet hebben, ongeacht de technologie die ze gebruiken. Het spreekt voor zich dat het begrijpen van de verschillende opties voor foutopsporing die beschikbaar zijn, een enorme hoeveelheid tijd op een project kan besparen en misschien zelfs een paar hoofdpijn. Hoewel veel ontwikkelaars gewend zijn om Visual Studio .NET of Web Developer Express te gebruiken om fouten op te sporen in ASP.NET toepassingen die gebruikmaken van VB.NET- of C#-code, zijn sommige niet op de hoogte dat het ook zeer nuttig is voor het opsporen van fouten in code aan de clientzijde, zoals JavaScript. Hetzelfde type technieken voor het opsporen van fouten in .NET-toepassingen kan ook worden toegepast op AJAX-toepassingen en meer specifiek ASP.NET AJAX-toepassingen.

In dit artikel ziet u hoe Visual Studio 2008 en verschillende andere hulpmiddelen kunnen worden gebruikt om ASP.NET AJAX-toepassingen te debuggen en snel bugs en andere problemen op te sporen. Deze discussie bevat informatie over het inschakelen van Internet Explorer 6 of hoger voor foutopsporing, het gebruik van Visual Studio 2008 en Script Explorer om code te doorlopen en andere gratis hulpprogramma's zoals Web Development Helper te gebruiken. U leert ook hoe u fouten kunt opsporen ASP.NET AJAX-toepassingen in Firefox met behulp van een extensie met de naam Firebug, waarmee u javaScript-code rechtstreeks in de browser kunt doorlopen zonder andere hulpprogramma's. Ten slotte maakt u kennis met klassen in de ASP.NET AJAX-bibliotheek die kan helpen bij verschillende foutopsporingstaken, zoals tracering en codeverklaringsinstructies.

Voordat u fouten in pagina's probeert op te sporen die worden weergegeven in Internet Explorer, moet u enkele basisstappen uitvoeren om deze in te schakelen voor foutopsporing. Laten we eens kijken naar enkele basisvereisten voor het instellen die moeten worden uitgevoerd om aan de slag te gaan.

Internet Explorer configureren voor foutopsporing

De meeste personen zijn niet geïnteresseerd in het zien van JavaScript-problemen die zijn opgetreden op een website die wordt bekeken met Internet Explorer. De gemiddelde gebruiker zou zelfs niet eens weten wat ze moeten doen als ze een foutbericht hebben gezien. Als gevolg hiervan worden foutopsporingsopties standaard uitgeschakeld in de browser. Het is echter heel eenvoudig om foutopsporing in te schakelen en te gebruiken tijdens het ontwikkelen van nieuwe AJAX-toepassingen.

Als u de functionaliteit voor foutopsporing wilt inschakelen, gaat u naar Internetopties voor Extra in het menu van Internet Explorer en selecteert u het tabblad Geavanceerd. Controleer in de sectie Bladeren of de volgende items zijn uitgeschakeld:

• Scriptopsporing uitschakelen (Internet Explorer)
• Scriptopsporing uitschakelen (overig)

Hoewel dit niet vereist is, moet u, als u probeert fouten in een toepassing op te sporen, waarschijnlijk javaScript-fouten op de pagina direct zichtbaar en duidelijk maken. U kunt afdwingen dat alle fouten met een berichtvak worden weergegeven door het selectievakje 'Een melding over elke scriptfout weergeven' in te schakelen. Hoewel dit een uitstekende optie is om tijdens het ontwikkelen van een toepassing in te schakelen, kan het snel vervelend worden als u gewoon andere websites bekijkt, omdat uw kans op javaScript-fouten behoorlijk goed is.

In afbeelding 1 ziet u hoe het geavanceerde dialoogvenster van Internet Explorer eruit moet zien nadat het correct is geconfigureerd voor foutopsporing.

Afbeelding 1: Internet Explorer configureren voor foutopsporing. (Klik hier om de volledige afbeelding weer te geven)

Zodra foutopsporing is ingeschakeld, ziet u een nieuw menu-item in het menu Beeld met de naam Script Debugger. Er zijn twee opties beschikbaar: Openen en Onderbreken bij de volgende instructie. Wanneer Openen is geselecteerd, wordt u gevraagd fouten op te sporen op de pagina in Visual Studio 2008 (houd er rekening mee dat Visual Web Developer Express ook kan worden gebruikt voor foutopsporing). Als Visual Studio .NET momenteel wordt uitgevoerd, kunt u ervoor kiezen om dat exemplaar te gebruiken of om een nieuw exemplaar te maken. Wanneer Break at Next Statement is geselecteerd, wordt u gevraagd om fouten op de pagina op te sporen wanneer JavaScript-code wordt uitgevoerd. Als JavaScript-code wordt uitgevoerd in de onLoad-gebeurtenis van de pagina, kunt u de pagina vernieuwen om een foutopsporingssessie te activeren. Als JavaScript-code wordt uitgevoerd nadat op een knop is geklikt, wordt het foutopsporingsprogramma direct uitgevoerd nadat op de knop is geklikt.

Hoewel in de volgende sectie wordt uitgelegd hoe u rechtstreeks vanuit Visual Studio 2008 fouten in een ASP.NET AJAX-pagina kunt opsporen, is het gebruik van de optie Internet Explorer Script Debugger handig wanneer een pagina al is geopend en u deze volledig wilt inspecteren.

Foutopsporing met Visual Studio 2008

Visual Studio 2008 biedt functionaliteit voor foutopsporing die ontwikkelaars over de hele wereld gebruiken voor het opsporen van fouten in .NET-toepassingen. Met het ingebouwde foutopsporingsprogramma kunt u code doorlopen, objectgegevens bekijken, specifieke variabelen bekijken, de aanroepstack bewaken plus nog veel meer. Naast het debuggen van VB.NET- of C#-code is de debugger ook nuttig voor het debuggen van ASP.NET AJAX-toepassingen en kunt u de JavaScript-code regel per regel doorlopen. De details die volgen, richten zich op technieken die kunnen worden gebruikt voor het opsporen van fouten in scriptbestanden aan de clientzijde in plaats van een discussie te geven over het algehele proces van foutopsporing van toepassingen met Visual Studio 2008.

Het proces voor het opsporen van fouten in een pagina in Visual Studio 2008 kan op verschillende manieren worden gestart. Ten eerste kunt u de optie Foutopsporingsprogramma van Internet Explorer gebruiken die in de vorige sectie is genoemd. Dit werkt goed wanneer een pagina al in de browser is geladen en u wilt beginnen met het opsporen van fouten. U kunt ook met de rechtermuisknop op een .aspx pagina in Solution Explorer klikken en Instellen als startpagina selecteren in het menu. Als u gewend bent aan het opsporen van fouten in ASP.NET pagina's, hebt u dit waarschijnlijk eerder gedaan. Zodra F5 op het toetsenbord is ingedrukt, kunnen de fouten op de pagina worden opgespoord. Hoewel u in het algemeen een onderbrekingspunt kunt instellen op elke gewenste locatie in VB.NET- of C#-code, is dat niet altijd het geval met JavaScript, zoals u hierna ziet.

Ingesloten versus externe scripts

Het foutopsporingsprogramma van Visual Studio 2008 behandelt JavaScript dat is ingesloten op een andere pagina dan externe JavaScript-bestanden. Met externe scriptbestanden kunt u het bestand openen en een onderbrekingspunt instellen op elke regel die u kiest. Onderbrekingspunten kunnen worden ingesteld door te klikken in het grijze ladegebied links van het venster van de code-editor. Wanneer JavaScript rechtstreeks is ingesloten in een pagina met behulp van de <script> tag, is het instellen van een onderbrekingspunt door in het grijze ladegebied te klikken geen optie. Pogingen om een onderbrekingspunt in te stellen op een regel van een ingesloten script, resulteren in een waarschuwing met de tekst 'Dit is geen geldige locatie voor een onderbrekingspunt'.

U kunt dit probleem omzeilen door de code naar een extern .js-bestand te verplaatsen en ernaar te verwijzen met behulp van het src-kenmerk van de <scripttag> :

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Wat gebeurt er als het verplaatsen van de code naar een extern bestand geen optie is of meer werk vereist dan het waard is? Hoewel u geen onderbrekingspunt kunt instellen met behulp van de editor, kunt u de foutopsporingsprogramma-instructie rechtstreeks toevoegen aan de code waarin u foutopsporing wilt starten. U kunt ook de Sys.Debug-klasse gebruiken die beschikbaar is in de ASP.NET AJAX-bibliotheek om foutopsporing af te dwingen om te starten. Verderop in dit artikel vindt u meer informatie over de klasse Sys.Debug.

Een voorbeeld van het gebruik van het debugger trefwoord wordt weergegeven in Vermelding 1. In dit voorbeeld wordt het foutopsporingsprogramma gedwongen om te breken voordat een aanroep naar een updatefunctie wordt uitgevoerd.

Lijst 1. Door het gebruiken van het debugger trefwoord om de Visual Studio .NET debugger te dwingen tot een break.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

Zodra de debuggerinstructie wordt bereikt, wordt u gevraagd de pagina te debuggen met Visual Studio .NET en kunt u de code stapsgewijs doorlopen. Als u dit doet, treedt er mogelijk een probleem op bij het openen van ASP.NET AJAX-bibliotheekscriptbestanden die op de pagina worden gebruikt, dus laten we eens kijken naar het gebruik van de Scriptverkenner van Visual Studio .NET.

Visual Studio .NET Windows gebruiken om fouten op te sporen

Zodra een foutopsporingssessie is gestart en u begint met het doorlopen van code met behulp van de standaard F11-sleutel, kan het foutdialoogvenster worden weergegeven in afbeelding 2, tenzij alle scriptbestanden die op de pagina worden gebruikt, zijn geopend en beschikbaar voor foutopsporing.

Afbeelding 2: Het dialoogvenster Fout wordt weergegeven wanneer er geen broncode beschikbaar is voor foutopsporing. (Klik hier om de volledige afbeelding weer te geven)

Dit dialoogvenster wordt weergegeven omdat Visual Studio .NET niet zeker weet hoe u toegang krijgt tot de broncode van een aantal van de scripts waarnaar wordt verwezen door de pagina. Hoewel dit in het begin behoorlijk frustrerend kan zijn, is er een eenvoudige oplossing. Wanneer u een foutopsporingssessie hebt gestart en een onderbrekingspunt hebt bereikt, gaat u naar het venster Foutopsporing in Windows Script Explorer in het menu van Visual Studio 2008 of gebruikt u de sneltoets Ctrl+Alt+N.

Script Explorer kan worden gebruikt om alle scripts weer te geven die op een pagina worden gebruikt en deze te openen in de code-editor. Wanneer scriptverkenner is geopend, dubbelklikt u op de .aspx pagina waarop momenteel fouten worden opgespoord om deze te openen in het venster van de code-editor. Voer dezelfde actie uit voor alle andere scripts die worden weergegeven in Script Explorer. Zodra alle scripts zijn geopend in het codevenster, kunt u op F11 drukken (en de andere sneltoetsen voor foutopsporing gebruiken) om uw code te doorlopen. In afbeelding 3 ziet u een voorbeeld van scriptverkenner. Het bevat het huidige bestand dat wordt opgespoord (Demo.aspx), evenals twee aangepaste scripts en twee scripts die dynamisch worden geïnjecteerd in de pagina door de ASP.NET AJAX ScriptManager.

Afbeelding 3. Script Explorer biedt eenvoudige toegang tot scripts die op een pagina worden gebruikt. (Klik hier om de volledige afbeelding weer te geven)

Verschillende andere vensters kunnen ook worden gebruikt om nuttige informatie te bieden tijdens het doorlopen van code op een pagina. U kunt bijvoorbeeld het venster Locals gebruiken om de waarden te bekijken van verschillende variabelen die op de pagina worden gebruikt, het venster Direct om specifieke variabelen of voorwaarden te evalueren en de uitvoer weer te geven. U kunt ook het uitvoervenster gebruiken om traceringsinstructies weer te geven die zijn geschreven met de functie Sys.Debug.trace (die verderop in dit artikel wordt besproken) of de functie Debug.writeln van Internet Explorer.

Wanneer u code doorloopt met behulp van het foutopsporingsprogramma, kunt u variabelen in de code aanwijzen om de waarde weer te geven waaraan ze zijn toegewezen. Het foutopsporingsprogramma voor scripts wordt echter af en toe niets weergegeven als u de muisaanwijzer op een bepaalde JavaScript-variabele houdt. Als u de waarde wilt zien, markeert u de instructie of variabele die u probeert te zien in het venster van de code-editor en beweegt u er vervolgens de muis overheen. Hoewel deze techniek niet in elke situatie werkt, kunt u vaak de waarde zien zonder dat u in een ander venster voor foutopsporing hoeft te zoeken, zoals het venster Locals.

Een videozelfstudie waarin enkele van de hier besproken functies worden gedemonstreerd, kunt u bekijken op http://www.xmlforasp.net.

Foutopsporing met Web Development Helper

Hoewel Visual Studio 2008 (en Visual Web Developer Express 2008) zeer geschikt zijn voor foutopsporingsprogramma's, zijn er extra opties die ook kunnen worden gebruikt en die meer licht zijn. Een van de nieuwste hulpprogramma's die moeten worden uitgebracht, is de Web Development Helper. Microsoft's Nikhil Kothari (een van de belangrijkste ASP.NET AJAX-architecten bij Microsoft) schreef dit uitstekende hulpprogramma dat veel verschillende taken kan uitvoeren, van eenvoudige foutopsporing tot het weergeven van HTTP-aanvraag- en antwoordberichten.

Web Development Helper kan rechtstreeks in Internet Explorer worden gebruikt, waardoor het handig is om te gebruiken. Het is gestart door Tools Web Development Helper te selecteren in het menu van Internet Explorer. Hiermee opent u het hulpprogramma in het onderste gedeelte van de browser. Dit is handig omdat u de browser niet hoeft te verlaten om verschillende taken uit te voeren, zoals http-aanvraag- en antwoordberichtenlogboekregistratie. In afbeelding 4 ziet u hoe Web Development Helper eruitziet in actie.

Afbeelding 4: Helper voor webontwikkeling (klik om de afbeelding op volledige grootte weer te geven)

Web Development Helper is geen hulpprogramma dat u gebruikt om coderegel per regel te doorlopen, net als bij Visual Studio 2008. Het kan echter worden gebruikt om traceeruitvoer weer te geven, eenvoudig variabelen in een script te evalueren of gegevens binnen een JSON-object te verkennen. Het is ook erg handig voor het weergeven van gegevens die worden doorgegeven aan en van een ASP.NET AJAX-pagina en een server.

Zodra Web Development Helper is geopend in Internet Explorer, moet scriptopsporing zijn ingeschakeld door Script enable Script Debugging te selecteren in het menu Web Development Helper, zoals eerder in afbeelding 4 wordt weergegeven. Hierdoor kan het hulpprogramma fouten onderscheppen die optreden wanneer een pagina wordt uitgevoerd. Het biedt ook eenvoudige toegang tot traceringsberichten die op de pagina worden weergegeven. Als u traceringsgegevens wilt weergeven of scriptopdrachten wilt uitvoeren om verschillende functies op een pagina te testen, selecteert u Scriptconsole weergeven in het menu Web Development Helper. Dit biedt toegang tot een opdrachtvenster en een eenvoudig direct venster.

Traceringsberichten en JSON-objectgegevens weergeven

Het directe venster kan worden gebruikt om scriptopdrachten uit te voeren of scripts te laden of op te slaan die worden gebruikt om verschillende functies op een pagina te testen. In het opdrachtvenster worden tracerings- of foutopsporingsberichten weergegeven die door de bekeken pagina worden aangemaakt. In de lijst 2 ziet u hoe u een traceringsbericht schrijft met de functie Debug.writeln van Internet Explorer.

Lijst 2. Een client-side traceringsbericht schrijven met behulp van de Debug-klasse.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

Als de eigenschap LastName een waarde van Doe bevat, geeft Web Development Helper het bericht 'Person name: Doe' weer in het opdrachtvenster van de scriptconsole (ervan uitgaande dat foutopsporing is ingeschakeld). Web Development Helper voegt ook een foutopsporingsserviceobject op het hoogste niveau toe aan pagina's die kunnen worden gebruikt om traceringsinformatie uit te schrijven of de inhoud van JSON-objecten weer te geven. In de lijst 3 ziet u een voorbeeld van het gebruik van de traceringsfunctie van de klasse debugService.

Lijst 3. De foutopsporingsserviceklasse van Web Development Helper gebruiken om een traceringsbericht te schrijven.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

Een handige functie van de klasse debugService is dat deze werkt, zelfs als foutopsporing niet is ingeschakeld in Internet Explorer, zodat u eenvoudig traceringsgegevens kunt openen wanneer Web Development Helper wordt uitgevoerd. Wanneer het hulpprogramma niet wordt gebruikt voor het opsporen van fouten in een pagina, worden traceringsinstructies genegeerd omdat de aanroep van window.debugService onwaar retourneert.

Met de klasse debugService kunnen ook JSON-objectgegevens worden weergegeven met behulp van het controlevenster van Web Development Helper. Lijst 4 maakt een eenvoudig JSON-object met persoonsgegevens aan. Zodra het object is gemaakt, wordt er een aanroep uitgevoerd naar de inspecteerfunctie van de klasse debugService, zodat het JSON-object visueel kan worden geïnspecteerd.

Lijst 4. De functie debugService.inspect gebruiken om JSON-objectgegevens weer te geven.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

Als u de functie GetPerson() aanroept op de pagina of via het onmiddellijke venster, wordt het dialoogvenster Objectinspectie weergegeven zoals getoond in figuur 5. Eigenschappen binnen het object kunnen dynamisch worden gewijzigd door ze te markeren, de waarde te wijzigen die wordt weergegeven in het tekstvak Waarde en vervolgens op de koppeling Bijwerken te klikken. Met objectcontrole kunt u eenvoudig JSON-objectgegevens weergeven en experimenteren met het toepassen van verschillende waarden op eigenschappen.

Fouten opsporen

Naast het toestaan van traceringsgegevens en JSON-objecten, kan webontwikkelingshelper ook helpen bij het opsporen van fouten op een pagina. Als er een fout optreedt, wordt u gevraagd om door te gaan naar de volgende coderegel of om fouten in het script op te sporen (zie afbeelding 6). In het dialoogvenster Scriptfout ziet u de volledige aanroepstack en regelnummers, zodat u eenvoudig kunt bepalen waar problemen zich in een script bevinden.

Afbeelding 5: Het venster Objectcontrole gebruiken om een JSON-object weer te geven. (Klik hier om de volledige afbeelding weer te geven)

Als u de optie voor foutopsporing selecteert, kunt u scriptinstructies rechtstreeks uitvoeren in het directe venster van Web Development Helper om de waarde van variabelen weer te geven, JSON-objecten uit te schrijven, plus meer. Als dezelfde actie die de fout heeft geactiveerd, opnieuw wordt uitgevoerd en Visual Studio 2008 beschikbaar is op de computer, wordt u gevraagd een foutopsporingssessie te starten, zodat u de coderegel per regel kunt doorlopen, zoals beschreven in de vorige sectie.

Afbeelding 6: dialoogvenster Scriptfout van Web Development Helper (klik om de afbeelding op volledige grootte weer te geven)

Aanvraag- en antwoordberichten inspecteren

Tijdens foutopsporing ASP.NET AJAX-pagina's is het vaak handig om aanvraag- en antwoordberichten te zien die worden verzonden tussen een pagina en server. Als u de inhoud in berichten bekijkt, kunt u zien of de juiste gegevens worden doorgegeven, evenals de grootte van de berichten. Web Development Helper biedt een uitstekende http-berichtloggerfunctie waarmee u gegevens eenvoudig kunt weergeven als onbewerkte tekst of in een beter leesbare indeling.

Als u ASP.NET AJAX-aanvraag- en antwoordberichten wilt weergeven, moet de HTTP-logboekregistratie zijn ingeschakeld door HTTP-logboekregistratie in te schakelen in het menu Web Development Helper. Zodra deze optie is ingeschakeld, kunnen alle berichten die vanaf de huidige pagina worden verzonden, worden weergegeven in de HTTP-logboekviewer die toegankelijk is door HTTP-logboeken weergeven te selecteren.

Hoewel het weergeven van de onbewerkte tekst die in elk aanvraag-/antwoordbericht wordt verzonden, zeker nuttig is (en een optie in Web Development Helper), is het vaak gemakkelijker om berichtgegevens in een meer grafische indeling weer te geven. Zodra HTTP-logboekregistratie is ingeschakeld en berichten zijn vastgelegd, kunnen berichtgegevens worden weergegeven door te dubbelklikken op het bericht in de HTTP-logboekviewer. Hierdoor kunt u alle kopteksten weergeven die aan een bericht zijn gekoppeld, evenals de werkelijke inhoud van het bericht. Afbeelding 7 toont een voorbeeld van een aanvraagbericht en antwoordbericht dat wordt weergegeven in het venster HTTP-logboekviewer.

Afbeelding 7: De HTTP-logboekviewer gebruiken om aanvraag- en antwoordberichtgegevens weer te geven. (Klik hier om de volledige afbeelding weer te geven)

De HTTP-logboekviewer parseert automatisch JSON-objecten en geeft deze weer met behulp van een structuurweergave, zodat de eigenschapsgegevens van het object snel en eenvoudig kunnen worden weergegeven. Wanneer een UpdatePanel wordt gebruikt in een ASP.NET AJAX-pagina, breekt de viewer elk gedeelte van het bericht uit in afzonderlijke onderdelen, zoals weergegeven in afbeelding 8. Dit is een geweldige functie die het veel gemakkelijker maakt om te zien en te begrijpen wat er in het bericht staat in vergelijking met het weergeven van de onbewerkte berichtgegevens.

Afbeelding 8: Een UpdatePanel-antwoordbericht dat wordt weergegeven met behulp van de HTTP-logboekviewer. (Klik hier om de volledige afbeelding weer te geven)

Er zijn verschillende andere hulpprogramma's die kunnen worden gebruikt voor het weergeven van aanvraag- en antwoordberichten naast webontwikkelingshelper. Een andere goede optie is Fiddler die gratis beschikbaar is op http://www.fiddlertool.com. Hoewel Fiddler hier niet wordt besproken, is het ook een goede optie wanneer u berichtkoppen en gegevens grondig moet inspecteren.

Foutopsporing met Firefox en Firebug

Hoewel Internet Explorer nog steeds de meest gebruikte browser is, zijn andere browsers zoals Firefox behoorlijk populair geworden en worden steeds meer gebruikt. Als gevolg hiervan wilt u uw ASP.NET AJAX-pagina's in Firefox en Internet Explorer bekijken en er fouten in opsporen om ervoor te zorgen dat uw toepassingen goed werken. Hoewel Firefox niet rechtstreeks kan worden gekoppeld aan Visual Studio 2008 voor foutopsporing, heeft het een extensie met de naam Firebug die kan worden gebruikt om foutopsporingspagina's op te sporen. Firebug kan gratis worden gedownload door naar http://www.getfirebug.com.

Firebug biedt een volledige omgeving voor foutopsporing die kan worden gebruikt om coderegel per regel te doorlopen, toegang te krijgen tot alle scripts die op een pagina worden gebruikt, DOM-structuren weer te geven, CSS-stijlen weer te geven en zelfs gebeurtenissen bij te houden die zich op een pagina voordoen. Nadat firebug is geïnstalleerd, kan Firebug worden geopend door Tools Firebug Open Firebug te selecteren in het Firefox-menu. Net als Web Development Helper wordt Firebug rechtstreeks in de browser gebruikt, hoewel het ook kan worden gebruikt als een zelfstandige toepassing.

Zodra Firebug wordt uitgevoerd, kunnen onderbrekingspunten worden ingesteld op elke regel van een JavaScript-bestand, ongeacht of het script is ingesloten op een pagina of niet. Als u een onderbrekingspunt wilt instellen, laadt u eerst de juiste pagina die u wilt opsporen in Firefox. Zodra de pagina is geladen, selecteert u het script om fouten op te sporen in de vervolgkeuzelijst Scripts van Firebug. Alle scripts die door de pagina worden gebruikt, worden weergegeven. Een onderbrekingspunt wordt ingesteld door te klikken in de grijze balk van Firebug op de regel waar het onderbrekingspunt moet worden geplaatst, net als in Visual Studio 2008.

Zodra een onderbrekingspunt is ingesteld in Firebug, kunt u de actie uitvoeren die is vereist om het script uit te voeren dat moet worden opgespoord, zoals klikken op een knop of het vernieuwen van de browser om de onLoad-gebeurtenis te activeren. De uitvoering wordt automatisch gestopt op de regel die het onderbrekingspunt bevat. In afbeelding 9 ziet u een voorbeeld van een onderbrekingspunt dat is geactiveerd in Firebug.

Afbeelding 9: Onderbrekingspunten verwerken in Firebug. (Klik hier om de volledige afbeelding weer te geven)

Zodra u een onderbrekingspunt hebt bereikt, kunt u met behulp van de pijlknoppen stap voor stap over of uit de code stappen. Wanneer u code doorloopt, worden scriptvariabelen weergegeven in het rechtergedeelte van het foutopsporingsprogramma, zodat u waarden kunt zien en inzoomen op objecten. Firebug bevat ook een aanroep-stack vervolgkeuzelijst om de uitvoeringsstappen van het script weer te geven die hebben geleid tot de huidige regel die wordt gedebugd.

Firebug bevat ook een consolevenster dat kan worden gebruikt om verschillende scriptinstructies te testen, variabelen te evalueren en traceringsuitvoer weer te geven. U kunt deze openen door te klikken op het tabblad Console boven aan het venster Firebug. De pagina waarop foutopsporing wordt uitgevoerd, kan ook worden geïnspecteerd om de DOM-structuur en de inhoud ervan te bekijken door op het tabblad Inspecteren te klikken. Wanneer u de muis over de verschillende DOM-elementen beweegt die in het controlevenster worden weergegeven, wordt het juiste gedeelte van de pagina gemarkeerd, zodat u gemakkelijk kunt zien waar het element op de pagina wordt gebruikt. Kenmerkwaarden die aan een bepaald element zijn gekoppeld, kunnen 'live' worden gewijzigd om te experimenteren met het toepassen van verschillende breedten, stijlen, enzovoort op een element. Dit is een handige functie waarmee u niet voortdurend hoeft te schakelen tussen de broncode-editor en de Firefox-browser om te zien hoe eenvoudige wijzigingen van invloed zijn op een pagina.

In afbeelding 10 ziet u een voorbeeld van het gebruik van de DOM-inspector om een tekstvak met de naam txtCountry op de pagina te zoeken. De Firebug Inspector kan ook worden gebruikt om CSS-stijlen weer te geven die worden gebruikt op een pagina, evenals gebeurtenissen die optreden, zoals het bijhouden van muisbewegingen, knopklikken, plus meer.

Afbeelding 10: De DOM-inspector van Firebug gebruiken. (Klik hier om de volledige afbeelding weer te geven)

Firebug biedt een lichte manier om snel fouten in een pagina rechtstreeks in Firefox op te sporen, evenals een uitstekend hulpmiddel voor het inspecteren van verschillende elementen op de pagina.

Ondersteuning voor foutopsporing in ASP.NET AJAX

De ASP.NET AJAX-bibliotheek bevat veel verschillende klassen die kunnen worden gebruikt om het proces van het toevoegen van AJAX-mogelijkheden aan een webpagina te vereenvoudigen. U kunt deze klassen gebruiken om elementen op een pagina te zoeken en te bewerken, nieuwe besturingselementen toe te voegen, webservices aan te roepen en zelfs gebeurtenissen af te handelen. De ASP.NET AJAX-bibliotheek bevat ook klassen die kunnen worden gebruikt om het proces van foutopsporingspagina's te verbeteren. In deze sectie maakt u kennis met de sys.Debug-klasse en ziet u hoe deze kan worden gebruikt in toepassingen.

De sys.Debug-klasse gebruiken

De Sys.Debug-klasse (een JavaScript-klasse die zich in de Sys-naamruimte bevindt) kan worden gebruikt om verschillende functies uit te voeren, waaronder het schrijven van traceringsuitvoer, het uitvoeren van codeverklaringen en het afdwingen van code om te mislukken, zodat er fouten kunnen worden opgespoord. Het wordt uitgebreid gebruikt in de foutopsporingsbestanden van de ASP.NET AJAX-bibliotheek (geïnstalleerd op C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 standaard) om voorwaardelijke tests (ook wel asserties genoemd) uit te voeren die ervoor zorgen dat parameters correct worden doorgegeven aan functies, dat objecten de verwachte gegevens bevatten en traceringsinstructies schrijven.

De Sys.Debug-klasse bevat verschillende functies die kunnen worden gebruikt voor het afhandelen van tracering, codeverklaringen of fouten, zoals wordt weergegeven in tabel 1.

Tabel 1. de functies van de Sys.Debug-klasse.

Tracering aan de clientzijde kan op vrijwel dezelfde manier worden gebruikt als de traceringsfunctionaliteit die beschikbaar is in ASP.NET. Hierdoor kunnen verschillende berichten eenvoudig worden weergegeven zonder de stroom van de toepassing te onderbreken. In de lijst 5 ziet u een voorbeeld van het gebruik van de functie Sys.Debug.trace om naar het traceerlogboek te schrijven. Met deze functie wordt gewoon het bericht gebruikt dat als parameter moet worden geschreven.

Lijst 5. De functie Sys.Debug.trace gebruiken.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

Als u de code uitvoert die wordt weergegeven in Vermelding 5, ziet u geen traceringsuitvoer op de pagina. De enige manier om dit te zien is door een consolevenster te gebruiken dat beschikbaar is in Visual Studio .NET, Web Development Helper of Firebug. Als u de traceringsuitvoer op de pagina wilt zien, moet u een TextArea-tag toevoegen en deze een id van TraceConsole geven, zoals hierna wordt weergegeven:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Alle Sys.Debug.trace-instructies op de pagina worden geschreven naar de TraceConsole TextArea.

In gevallen waarin u de gegevens in een JSON-object wilt zien, kunt u de functie traceDump van de sys.Debug-klasse gebruiken. Deze functie gebruikt twee parameters, waaronder het object dat moet worden gedumpt naar de traceringsconsole en een naam die kan worden gebruikt om het object in de traceringsuitvoer te identificeren. In de lijst 6 ziet u een voorbeeld van het gebruik van de functie traceDump.

Lijst 6. De functie Sys.Debug.traceDump gebruiken.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

In afbeelding 11 ziet u de uitvoer van het aanroepen van de functie Sys.Debug.traceDump. U ziet dat naast het schrijven van de gegevens van het object Persoon ook de gegevens van het subobject Adres worden weggeschreven.

Naast tracering kan de Sys.Debug-klasse ook worden gebruikt om codeverklaringen uit te voeren. Asserties worden gebruikt om te testen of aan specifieke voorwaarden wordt voldaan terwijl een toepassing wordt uitgevoerd. De foutopsporingsversie van de ASP.NET AJAX-bibliotheekscripts bevat verschillende assertie-instructies om verschillende voorwaarden te testen.

In de lijst 7 ziet u een voorbeeld van het gebruik van de functie Sys.Debug.assert om een voorwaarde te testen. De code test of het adresobject null is voordat u een persoonsobject bijwerkt.

Afbeelding 11: Uitvoer van de functie Sys.Debug.traceDump. (Klik hier om de volledige afbeelding weer te geven)

Lijst 7. De functie debug.assert gebruiken.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Er worden drie parameters doorgegeven, waaronder de voorwaarde die moet worden geëvalueerd, het bericht dat moet worden weergegeven als de assertie onwaar retourneert en of er informatie over de beller moet worden weergegeven. In gevallen waarin een assertie mislukt, wordt het bericht weergegeven, evenals aanroepergegevens als de derde parameter waar was. In afbeelding 12 ziet u een voorbeeld van het dialoogvenster fout dat wordt weergegeven als de assertie in Vermelding 7 mislukt.

De laatste functie die moet worden behandeld, is Sys.Debug.fail. Als u wilt afdwingen dat code op een bepaalde regel in een script mislukt, kunt u een aanroep Sys.Debug.fail toevoegen in plaats van de foutopsporingsprogramma-instructie die doorgaans wordt gebruikt in JavaScript-toepassingen. De functie Sys.Debug.fail accepteert één tekenreeksparameter die de reden voor de fout aangeeft, zoals hierna wordt weergegeven:

Sys.Debug.fail("My forced failure of script.");

Afbeelding 12: een sys.debug.assert-foutbericht. (Klik hier om de volledige afbeelding weer te geven)

Wanneer er een Sys.Debug.fail-instructie wordt aangetroffen tijdens het uitvoeren van een script, wordt de waarde van de berichtparameter weergegeven in de console van een foutopsporingstoepassing, zoals Visual Studio 2008. U wordt gevraagd fouten in de toepassing op te sporen. Een geval waarin dit heel nuttig kan zijn, is wanneer u geen onderbrekingspunt kunt instellen met Visual Studio 2008 op een inlinescript, maar de code wilt stoppen op een bepaalde regel, zodat u de waarde van variabelen kunt inspecteren.

Inzicht in de ScriptMode-eigenschap van het ScriptManager-besturingselement

De ASP.NET AJAX-bibliotheek bevat foutopsporings- en releasescriptversies die zijn geïnstalleerd op C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 standaard. De foutopsporingsscripts zijn mooi opgemaakt, gemakkelijk te lezen en hebben verschillende Sys.Debug.assert-aanroepen verspreid over deze scripts terwijl de releasescripts witruimte hebben verwijderd en de Sys.Debug-klasse spaarzaam gebruiken om hun totale grootte te minimaliseren.

Het besturingselement ScriptManager dat is toegevoegd aan ASP.NET AJAX-pagina's leest het kenmerk voor foutopsporing van het compilatie-element in web.config om te bepalen welke versies van bibliotheekscripts moeten worden geladen. U kunt echter bepalen of foutopsporing of releasescripts worden geladen (bibliotheekscripts of uw eigen aangepaste scripts) door de eigenschap ScriptMode te wijzigen. ScriptMode accepteert een ScriptMode-opsomming waarvan leden Auto, Debug, Release en Inherit bevatten.

ScriptMode is standaard ingesteld op een waarde van Auto, wat betekent dat scriptmanager het foutopsporingskenmerk in web.configcontroleert. Wanneer foutopsporing onwaar is, wordt de releaseversie van ASP.NET AJAX-bibliotheekscripts geladen. Wanneer foutopsporing waar is, wordt de foutopsporingsversie van de scripts geladen. Als u de eigenschap ScriptMode wijzigt in Release of Debug, wordt de ScriptManager gedwongen om de juiste scripts te laden, ongeacht de waarde die het kenmerk voor foutopsporing in web.configheeft. In de lijst 8 ziet u een voorbeeld van het gebruik van het besturingselement ScriptManager voor het laden van foutopsporingsscripts uit de ASP.NET AJAX-bibliotheek.

Lijst 8. Foutopsporingsscripts laden met scriptmanager.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

U kunt ook verschillende versies (foutopsporing of release) van uw eigen aangepaste scripts laden met behulp van de eigenschap Scripts van ScriptManager, samen met het onderdeel ScriptReference, zoals wordt weergegeven in Vermelding 9.

Lijst 9. Aangepaste scripts laden met behulp van ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

De code die wordt weergegeven in Vermelding 9, geeft de ScriptManager opdracht om te zoeken naar een foutopsporingsversie van het script Person, zodat deze automatisch naar Person.debug.js zoekt in plaats van Person.js. Als het bestand Person.debug.js niet wordt gevonden, wordt er een fout gegenereerd.

In gevallen waarin u een foutopsporings- of releaseversie van een aangepast script wilt laden op basis van de waarde van de eigenschap ScriptMode die is ingesteld op het besturingselement ScriptManager, kunt u de eigenschap ScriptMode van het ScriptReference-besturingselement instellen op Overnemen. Hierdoor wordt de juiste versie van het aangepaste script geladen op basis van de eigenschap ScriptManager ScriptMode, zoals weergegeven in Vermelding 10. Omdat de eigenschap ScriptMode van het besturingselement ScriptManager is ingesteld op Foutopsporing, wordt het Person.debug.js-script geladen en gebruikt op de pagina.

Lijst 10. De ScriptMode overnemen van ScriptManager voor aangepaste scripts.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

Door de eigenschap ScriptMode op de juiste manier te gebruiken, kunt u eenvoudiger fouten opsporen in toepassingen en het algehele proces vereenvoudigen. De releasescripts van de ASP.NET AJAX-bibliotheek zijn nogal moeilijk te doorlopen en te lezen omdat codeopmaak is verwijderd terwijl de foutopsporingsscripts specifiek zijn opgemaakt voor foutopsporingsdoeleinden.

Conclusion

De ASP.NET AJAX-technologie van Microsoft biedt een solide basis voor het bouwen van AJAX-toepassingen die de algehele ervaring van de eindgebruiker kunnen verbeteren. Net als bij elke programmeertechnologie ontstaan er echter zeker bugs en andere toepassingsproblemen. Als u weet welke verschillende foutopsporingsopties beschikbaar zijn, kunt u veel tijd besparen en een stabieler product opleveren.

In dit artikel hebt u kennisgemaakt met verschillende technieken voor foutopsporing ASP.NET AJAX-pagina's, waaronder Internet Explorer met Visual Studio 2008, Web Development Helper en Firebug. Deze hulpprogramma's kunnen het algehele foutopsporingsproces vereenvoudigen, omdat u toegang hebt tot variabele gegevens, coderegel per regel doorlopen en traceringsinstructies bekijken. Naast de verschillende hulpprogramma's voor foutopsporing die worden besproken, hebt u ook gezien hoe de Sys.Debug-klasse van de ASP.NET AJAX-bibliotheek kan worden gebruikt in een toepassing en hoe de ScriptManager-klasse kan worden gebruikt om foutopsporing of releaseversies van scripts te laden.

Biografie

Dan Wahlin (Microsoft Most Valuable Professional voor ASP.NET en XML Web Services) is een .NET-ontwikkelingsinstructeur en architectuuradviseur bij Interface Technical Training (www.interfacett.com). Dan richtte de XML voor ASP.NET Ontwikkelaars Website (www.XMLforASP.NET) op, is lid van het INETA Speaker's Bureau en spreekt op verscheidene conferenties. Dan was coauteur van Professional Windows DNA (Wrox), ASP.NET: Tips, handleidingen en code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks en schreef XML voor ASP.NET Ontwikkelaars (Sams). Als hij geen code, artikelen of boeken schrijft, geniet Dan van het schrijven en opnemen van muziek en het spelen van golf en basketbal met zijn vrouw en kinderen.

Scott Cate werkt sinds 1997 samen met Microsoft Web Technologies en is de voorzitter van myKB.com (www.myKB.com) waar hij gespecialiseerd is in het schrijven van ASP.NET toepassingen die zijn gericht op Knowledge Base Software-oplossingen. Scott kan contact opnemen via e-mail op scott.cate@myKB.com of zijn blog op ScottCate.com