JavaScriptのデバッグ

When using the Extended version of the FRToolBox, you get access to a specially built debugger for your JavaScript code, and Reactor CallBacks. If you are developing on a mac, you can also enable access to the wonderful debugging tools in Safari 4 by running a simple command in terminal - otherwise, you can just use the debugger built into the ToolBox.

The debug variable contains a self instantiated object which gives developers access to debugging functions within the window they are working in.

Use the following functions to generate different levels of log messages. These messages are viewable within the debugger's 'console' tab.

debug.log- simply creates a standard log entry.
debug.warn- creates a warning level log entry (display with ! icon and black text).
debug.error- creates an error level log entry (display with x icon and red text).

Each of these methods allow you to dump the contents of objects/arrays etc, provided they are passed as a parameter of their own. There is no limit to the number of parameters you can use in these functions.

e.g:

var MyObject = { 
	'type' : 'basket'
	'contents' : Array( 'apples', 'oranges', 'banannas' );
};

debug.log( 'Here is the contents of MyObject:\n', MyObject )

will print the following (once all items are expanded):

Here is the contents of MyObject:

Object

	type : "basket"

	contents : Array

		0 : "apples"

		1 : "oranges"

		2 : "banannas"

You can also use this method for concatenation of text/variables.

e.g

var mood = 'angry';

var task = 'wash the floor';



debug.log( 'Your mum is '+mood+' so you had better '+task+'!' );

// or

debug.log( 'Your mum is', mood, 'so you had better', task, '!' );

would both print:

Your mum is angry so you had better wash the floor!

The 'startDebugging' method

This method is best called at the start of your script. Usually, we would automatically run startDebugging if the user has a Development Advanced licence.

// Start debugging if enabled in Reactor via BlackBoxDebugging("Yes")

<?reactor if ( $com.reactorize.env.debug = 1 ; "debug.startDebugging();" ; "" ) reactor?>

You can also manually run startDebugging by using the ReactorJSRun function in FileMaker.

// Start debugging on the Web Viewer named 'MyWebViewer'

ReactorJSRun ( "MyWebViewer" ; "debug.startDebugging();" );

Any debug messages sent before startDebugging was called will still be available, and will be drawn to the console when debug.show() is run for the first time. We don't always run startDebugging for performance reasons. Some of the debuggers more advanced features intercept and examine calls to natively implemented methods - this has some overhead, so during normal operation it is recommended that startDebugging is not run.

The 'show' method

When called, this function will show the debugger on the screen - provided debug.startDebugging() has been called prior - otherwise it will do nothing.

debug.show()

The 'hide' method

When called, this function will hide the debugger on the screen - provided the debugger is showing - otherwise it will do nothing.

debug.hide()

The 'assert' method

This function will attempt to evaluate any passed text in the global context.

results, errors etc will be printed in the log.

debug.assert( 'some javascript code' );

The 'inspect' method

This function takes the element passed and opens it in the 'HTML' tab for

inspection. The element will be set as the focus, and you will be able to see

and manipulate any CSS or child nodes attatched to the element.

Also provides a transparent mask over the element which shows padding and margins.

debug.inspect( MyElement );

The 'message' method

This function will attempt to display a message diologue which allows the user

to open the debug log, and will only show up when debugging is enabled.

The button entitled 'Debug' will always be visible when using this method, and

when clicked, calls the debug.show() method.

debug.message( 'Message Title', 'Message Body', { 'Additional Button' : function(){} }