At present, different vendors implement different debugging mechanisms for their browsers (Internet Explorer, Netscape Navigator, and Firefox are significantly different in this respect). Antechinus JavaScript Editor provides a simple debugging model, which allows you to trace the state of your objects and variables.
For speedy testing, the Editor also allows you to call any JavaScript function that is available to the Web page, specify the parameters, and observe the return value (see Testing below).
Debugging
How to enable debugging
To enable debugging, please place the cursor inside the <HEAD> section of your HTML document, then select HTML / Debug  from the menu and click OK. The Editor will do the following:
 Paste one line of code into your document:
<script language="JavaScript" src="Debugger.js"></script>
Copy one tiny file into your document directory:
Debugger.js (3KB)
After that, you will be able to trace your variables and objects and debug your scripts:
Select  View / Internal Page Viewer from the menu (or press F5)
At any stage you can inspect what any selected variable holds: inside your document editing view, double-click on a variable to select it (or use the mouse to highlight it), and select Build / Inspect Variable from the menu (or press Shift+Ctrl+V).
Inspect Variable allows you to dynamically examine what the selected variable holds at run-time.
|
Writing debugging code
To trace your variables and objects, use the following functions from the Operators menu:
PROPERTIES (label, obj);
This function lists all the properties of a given object, e.g. if your HTML document has an image defined as follows:
<IMG name="MyImage" style="position:absolute; left:20;top:200" src="MyImage.gif">
then to test for the properties of this object in your JavaScript code, use the following call:
PROPERTIES ("MyImage properties", MyImage);
TRACE (label, expression);
TRACE0 (expression);
TRACE and TRACE0 allow you to trace your variables (or entire expressions).
For an example, please see RolloverSound.htm in your Debugger directory.
To start debugging, select View / Internal Page Viewer from the menu.
Output from PROPERTIES (), TRACE (), and TRACE0 () will be displayed in the small debug window. If the window is obscuring a part of the page you wish to see, click on the window border (the pointer will change to a hand) and drag it to a different location. You can also customize the appearance of the debug window by using the following variables in your JavaScript code:
How to disable debugging before publishing your pages on the Internet
Debugger.js is a tiny file that only adds the total of 3KB to your projects, and it should be left in place so that you could reactivate debugging every time you need it. To disable debugging, open Debugger.js and change Debugger=1; to: Debugger=0;
This stops any of the debugging code from executing.
Testing: calling JavaScript functions
Antechinus allows you to call any JavaScript function that is available to the Web page, specify the parameters (if any), and observe the return value. This advanced feature makes testing a breeze: to test a function you no longer have to code a driver function, or set alerts to see the return value, and remove them when you no longer need them.
The following example illustrates how to call functions from within the Editor:
 In the Project pane, open the Solutions / Cookies solution and double-click Cookies.htm and Cookies.js to open them in the Editor. ( Cookies are stored in a text file and used by your browser. They consist of name=value pairs, with some optional information - expiration time, path, domain, and the "secure" keyword. Cookies.js has functions that allow you to store and retrieve cookies. )
Click on the Cookies.htm tab to make it the active window, and select View / Internal Page Viewer from the menu to view the page
Click on the Cookies.js pane to make it the active window, then click on the SetCookie() function to select it, and right-click to display the pop-up menu
Select the Call option. The Call JavaScript function dialog appears. The SetCookie () function is selected, and the parameter list is displayed.
Type the name and the value parameters like in the example above. You can leave the remaining parameters (expires, path, domain, and secure) empty. Click OK.
The function was invoked, and the cookie was stored. The function has no return value, which shows in the status line.
To verify that the cookie was stored, now call the GetCookie () function, and specify "JavaScript Editor Site" as the name of the cookie. GetCookie (name) returns the cookie value, or null if the cookie has not been set, and shows it in the status line.
You can also open the Call JavaScript function dialog by clicking on the  button. The dialog maintains the history of all the calls that you made to the given page, allowing you to re-use the calls.
|
