| Author: Gokul 21 Oct 2009 | Member Level: Bronze | Rating:  Points: 3 |
HOW-TO: Debug JavaScript in Internet Explorer
The best tool for debugging JavaScript on Internet Explorer is the Microsoft Script Editor, a free component of Microsoft Office XP/2003. There are other options, but they are less attractive: Microsoft Script Debugger is not very powerful, and Visual Studio .Net is an expensive purchase if all you need is JavaScript debugging for IE.
|
| Author: Lalji 21 Oct 2009 | Member Level: Diamond | Rating: Points: 6 |
Preparation steps for JavaScript debugging
* Make sure that JavaScript is enabled in QtWeb Internet Browser. Go to Settings, Privacy tab, and verify "Enable JavaScript" checkbox
* Make sure that Web Inspector is enabled. Choose menu Tools > Enable Web Inspector, or press Ctrl+E to turn it on (in case if it was not enabled previously)
* Navigate a web page you want to debug JavaScript for
* Invoke a Web inspector: either from Tools menu, or press Ctrl+I, or click toolbar button, or from the web page context menu
* Go to "Scripts" tab at the top of Web Inspector's window, and click "Enable Debugging" button. Web page source code is displayed
* Make sure that web page name you want to debug is displayed at the top of the source code window. If you have several web pages opened, you can navigate between them using arrow buttons at the left side of web page name, or to choose a web page from the drop down list
* Inspect a web page content: find JavaScript functions you want to debug and local variables you want to inspect
Note that when you turned on a debugging mode, QtWeb browser runs a bit slower and consumes more memory. It is recommended to turn off a debug mode and disable Web Inspector when you finished with debugging.
How to debug JavaScript functions
To debug a JavaScript function, you need to invoke it first, and stop JavaScript's execution inside a function's body. This is how it can be achieved:
* Set a breakpoint at the beginning of function's body by clicking the line number at the left side. Blue marker should appear around the line number if the breakpoint set up properly.
* Invoke a function in one of the following ways:
1. perform a specific action which causes function's launch, for example click the button on a web form which is linked to the function
2. if the function is not linked to a particular web element, it is possible that it is linked to a web page body (global script), in this case just reload the web page (press F5)
3. invoke function manually from the JavaScript console by typing its name and arguments (if any). Read below how to work with JavaScript Console
* Check the red marker and blue line at the place of the breakpoint, it means that you successfully entered the JavaScript function
* To resume script's execution, click "Pause/Resume script execution" - the left button at the top-right area of Web Inspector window, below "Search Scripts" field
* To make a simple step executing the current JavaScript's line, or step over the function call (at the point where execution stopped), click "Step over next function call" button at the top-right area of Web Inspector window, below "Search Scripts" field
* To step into the function at the point where execution is stopped, click "Step into next function call" button at the top-right area of Web Inspector window, below "Search Scripts" field. This only works when execution stopped at the line where JavaScript procedure/function is invoked, otherwise this command is identical to "Step Over" command above
* To step out of the current function, i.e. to go to the parent's function on the stack (which invoked function where execution is currently stopped), click "Step out of current function" - right button at the top-right area of Web Inspector window, below "Search Scripts" field
* To see functions call stack at the place of current program execution, inspect "Call Stack" area at the top right corner. It displays a function name, module name and code line where exection has been stopped. By clicking the function name you can position Web Inspector to the particular place on the stack.
* To see code errors, or debugger messages and warnings, open and inspect JavaScript Console by clicking the related button at bottom of Web Inspector window.
You can set up more breakpoints (even if execution is already being stopped), and continue to drill down through JavaScript functions.
How to inspect JavaScript variables
* Set up a breakpoint and stop function execution at the place where you want to inspect variables. Read "How to debug JavaScript functions" above
* Check "Scope Variables" panel:
- "Local" area displays all local variables inside the function where execution being stopped in form: "Name: Value"
- "Global" area displays all global variables in Document Object Model (DOM)
* If variable you want to inspect is an object, or complex variable, drill down through its structure by clicking the triangle at the left of the variable name, and inspect the variable members.
* Another approach to inspect a variable at the point of code execution is to type the variable name manually in the JavaScript console. Read below how to work with JavaScript Console
Continue steping Into/Over/Out of the functions and inspecting the variables in other places of JavaScript code.
How to use JavaScript Console
JavaScript Console helps you to inspect variables, to read warnings and errors, to execute JavaScript functions using a command line.
* Click the "Show Console" button at bottom of Web Inspector to open a JavaScript Console panel
* Click the empty line in Console panel to move a typing focus to JavaScript Console
* Type a variable name and press Enter to display the variable value in the Console, in the line below
* Type a function name followed by parentheses () and arguments (if any) inside and press Enter to invoke a JavaScript function with/without arguments. Function execution result you can check either as an output in the Console, or as changing browser's behavior (depending on function's code)
If code being executed produces errors or warnings, all supplementary/debug information is displayed in the JavaScript Console window.
Debug in IE
---------
http://www.jonathanboutelle.com/mt/archives/2006/01/howto_debug_jav.html
Debug in Visual Web Developer Express
------------------------------------
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/
|
| Author: Anuraj 21 Oct 2009 | Member Level: Diamond | Rating: Points: 6 |
If you are using VS2008, you can debug javascript like normal C# debugging. In Firefox there is an addon called FireBug, you can also use this Firebug to debug javascript.
Thanks
Anuraj
THIS POSTING IS PROVIDED "AS IS" WITH NO WARRANTIES, AND CONFERS NO RIGHTS.
BEWARE OF BUGS IN THE ABOVE CODE; I HAVE ONLY PROVED IT CORRECT, NOT TRIED IT.
dotnetthoghts
|
| Author: Lalji 21 Oct 2009 | Member Level: Diamond | Rating: Points: 6 |
Runtime Errors
--------------------------
Web browsers are such an hostile environment that it is almost guaranteed that we will constantly deal with runtime errors. Users provide invalid input in ways you didn't think of. New browser versions change their behavior. An AJAX call fails for a number of reasons.
Many times we can't prevent runtime errors from happening, but at least we can deal with them in a manner that makes the user experience less traumatic.
Completely unhandled errors
----------------------------------------
Look at this seemingly trivial code snippet.
function getInput() {
var name = window.prompt('Type your name', '');
alert('Your name has ' + name.length + ' letters.');
}
It may not be obvious, but this code has a bug waiting to break free. If the user clicks Cancel or presses Esc the prompt() function will return null, which will cause the next line to fail with a null reference error.
If you as a programmer don't take any step to deal with this error, it will simply be delivered directly to the end user, in the form of a utterly useless browser error message like the one below.
Depending on the user's browser or settings, the error message may be suppressed and only an inconspicuous icon shows up in the status bar. This can be worse than the error message, leaving the users thinking the application is unresponsive.
Globally handled errors
----------------------------------
The window object has an event called onerror that is invoked whenever there's an unhandled error on the page.
window.onerror = function (message, url, lineNo) {
alert(
'Error: ' + message +
'\n Url: ' + url +
'\n Line Number: ' + lineNo);
return true;
}
As you can see, the event will pass 3 arguments to the invoked function. The first one is the actual error message. The second one is the URL of the file containing the error (useful if the error is in an external .js file.) The last argument is the line number in that file where the error happened.
Returning true tells the browser that you have taken care of the problem. If you return false instead, the browser will proceed to treat the error as unhandled, showing the error message and the status bar icon.
Here's the message box that we will be showing to the user.
Structured Error Handling
-------------------------------------
The best way to deal with errors is to detect them the closest possible to where they happen. This will increase the chances that we know what to do with the error. To that effect JavaScript implements structured error handling, via the try...catch...finally block, also present in many other languages.
Syntax
try {
statements;
} catch (error) {
statements;
} finally {
statements;
}
The idea is simple. If anything goes wrong in the statements that are inside the try block's statements then the statements in the catch block will be executed and the error will be passed in the error variable. The finally block is optional and, if present, is always executed last, regardless if there was an error caught or not.
Let's fix our example to catch that error.
function getInput(){
try {
var name = window.prompt('Type your name', '');
alert('Your name has ' + name.length + ' letters.');
} catch (error) {
alert('The error was: ' + error.name +
'\n The error message was: ' + error.message);
} finally {
//do cleanup
}
}
The error object has two important properties: name and message. The message property contains the same error message that we have seen before. The name property contains the kind of error that happened and we can use that to decide if we know what to do with that error.
With that in place, if we reload the page and cancel out of the prompt, that's what we will see:
It's a good programming practice to only handle the error on the spot if you are certain of what it is and if you actually have a way to take care of it (other than just suppressing it altogether.) To better target our error handling code, we will change it to only handle errors named "TypeError", which is the error name that we have identified for this bug.
function getInput(){
try {
var name = window.prompt('Type your name', '');
alert('Your name has ' + name.length + ' letters.');
} catch (error) {
if (error.name == 'TypeError') {
alert('Please try again.');
} else {
throw error;
}
} finally {
//do cleanup
}
}
Now if a different error happens, which is admittedly unlikely in this simple example, that error will not be handled. The throw statement will forward the error as if we never had this try...catch...finally block. It is said that the error will bubble up.
Throwing custom errors
--------------------------------
We can use the throw statement to throw our own types of errors. The only recommendation is that our error object also has a name and message properties to be consistent in error handling.
throw {
name: 'InvalidColorError',
message: 'The given color is not a valid color value.'
};
more info
---------
http://www.nczonline.net/blog/2009/04/28/javascript-error-handling-anti-pattern/
|
| Author: tamil selvi 21 Oct 2009 | Member Level: Gold | Rating: Points: 2 |
Thank you
|
| Author: Alwyn 21 Oct 2009 | Member Level: Gold | Rating: Points: 2 |
a simple "debugger" statement is the best way to debug javascript
see the below example,
function show()
{
var str;
debugger
str = "Hello World!!!";
alert(str);
}
when u click the button which call this function, u can see the debugger on the str = "Hello World!!!"; line.
Thanks & Regards,
Alwyn.
Jesus saves! The rest of us better make backups.
|