Practical debugging - História úprav

Een: /* Javascript does not know how to sum two numbers */

2013-02-15T15:09:18Z

Javascript does not know how to sum two numbers

← Staršia verzia		Verzia z 17:09, 15. február 2013
Riadok 155:		Riadok 155:
	</pre>		</pre>

	To solve this, ~~to hesitate to~~ use the "toint" function:		To solve this, you should use the "toint" function:
	<pre>		<pre>
	var i=1;		var i=1;

Sourisdudesert: /* Javascript does not know how to sum two numbers */

2013-01-30T16:35:03Z

Javascript does not know how to sum two numbers

@@ Riadok 160: / Riadok 160: @@
      i += toint( notif.args.increment );  // With notif.args.increment='1'
      alert( i );                 // i=2 :)
 </pre>

Sourisdudesert: /* Some frequent errors */

2013-01-30T16:31:34Z

Some frequent errors

← Staršia verzia		Verzia z 18:31, 30. január 2013
Riadok 122:		Riadok 122:

	If there is really nothing on the log, it's probably that the system was unable to load your Javascript because of an syntax error that affect the structure of the Javascript file, typically a missing "}" or a missing "," after a method definition.		If there is really nothing on the log, it's probably that the system was unable to load your Javascript because of an syntax error that affect the structure of the Javascript file, typically a missing "}" or a missing "," after a method definition.

			=== When I do a move, I got "Move recorded, waiting for update ..." forever ===

			"Move recorded" means that your ajaxcall request has been sent to the server and returned normally.

			"Waiting for update" means that your client interface is waiting for some notifications from the server that correspond to the move we just did.

			If this message stays forever, it is probably that your PHP code does not send any notification when the move happens, which is abnormal. To fix this: add a notifyAllPlayers or a notifyPlayer call in your PHP code.

			=== Some player action is triggered randomly when I click somewhere on the game area ===

			You probably used "dojo.connect" on a null object. In this case, dojo.connect associate the event (ex: "onclick") to the whole game area.

			Most of the time it happens in this situation, when my_object element does not exists:
			<pre>
			dojo.connect( $("my_object"), "onclick", this, function() {
			...
			}
			</pre>

			To determine if this is the case, place "alert( $("my_object") )" before the dojo.connect to check if the object exists or not.

			=== Javascript does not know how to sum two numbers ===

			Be careful when you manipulate integers returned by notifications: most of the time, Javascript considers they are Strings and not Integers.

			As a result:
			<pre>
			var i=1;
			i += notif.args.increment; // With notif.args.increment='1'
			alert( i ); // i=11 instead of 2 !! Javascript concatenate 2 strings !
			</pre>

			To solve this, to hesitate to use the "toint" function:
			<pre>
			var i=1;
			i += toint( notif.args.increment ); // With notif.args.increment='1'
			alert( i ); // i=2 :)
			</pre>

Sourisdudesert: /* Some frequent errors */

2013-01-30T16:17:01Z

Some frequent errors

← Staršia verzia		Verzia z 18:17, 30. január 2013
Riadok 114:		Riadok 114:

	As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.		As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.

			=== when refreshing the web page, the interface remains on "Application loading..." ===

			In this case, you probably have a syntax error in your Javascript code, and the interface refuses to load.

			To find this error, check if there is an error message in the Javascript console (F12).

			If there is really nothing on the log, it's probably that the system was unable to load your Javascript because of an syntax error that affect the structure of the Javascript file, typically a missing "}" or a missing "," after a method definition.

Sourisdudesert: /* Some frequent errors */

2013-01-29T22:49:46Z

Some frequent errors

← Staršia verzia		Verzia z 00:49, 30. január 2013
Riadok 106:		Riadok 106:

	== Some frequent errors ==		== Some frequent errors ==

			=== when launching the game "Fatal error during creation of database ebd_quoridor_389 Not logged." ===

			Check that you didn't use $g_user or getCurrentPlayerId() in setupNewGame() function or in an "args" function of your state.

			As these functions are not consequences of a user action, there is no current player defined.

			As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.

Sourisdudesert: /* What is the best way to debug? */

2013-01-29T22:49:08Z

What is the best way to debug?

← Staršia verzia		Verzia z 00:49, 30. január 2013
Riadok 106:		Riadok 106:

	== Some frequent errors ==		== Some frequent errors ==


	~~== What is the best way to debug? ==~~



	~~On the client side (Javascript), we recommand installing Firebug for Firefox (or using the 'Developer tools' with Chrome that have about the same functionalities), then:~~




	~~=== Some frequent errors ===~~

	~~; The following error occurs when launching the game "Fatal error during creation of database ebd_quoridor_389 Not logged."~~
	: Check that you didn't use $g_user or getCurrentPlayerId() in setupNewGame() function or in an "args" function of your state. As these functions are not consequences of a user action, there is no current player defined. As a general rule, you should use getActivePlayerId() and not getCurrentPlayerId(). See the [http://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine presentation on the game state machine] for more information.

Sourisdudesert: /* Debugging my Javascript game interface logic */

2013-01-29T22:48:50Z

Debugging my Javascript game interface logic

← Staršia verzia		Verzia z 00:48, 30. január 2013
Riadok 76:		Riadok 76:

	== Debugging my Javascript game interface logic ==		== Debugging my Javascript game interface logic ==

			Compare to PHP debugging, Javascript debugging can sometimes be painful.

			Here's are some tips to make your life easier while developing and debugging Javascript:

			=== Do complex things on PHP side ===

			PHP side is more reliable and simpler to debug than Javascript. Then, when you need to perform a complex operation, check first it you can't write it on server side first.

			The most frequent case is the following: you want to compute possible moves in a game situation. Doing it in Javascript is a nightmare. Then, do it on PHP, and transfer the result to your client interface using the "args" game state property.

			Note: check Reversi example for this.

			=== Add traces in your code ===

			You can use the following:

			'''console.log( variable_to_inspect )'''

			It will give you the object structure of the variable in the Javascript console, without blocking the execution.

			It's often a good idea to precede this call with a console.log( '### HERE ###' ); to find more easily the appropriate line in the console log.

			'''alert( variable_to_inspect )'''

			It will popup what you wish and pause the execution until you click ok.

			This won't be useful for complex structures, only native types will get plainly displayed. But this is sometimes useful just with messages to make sure which way the execution goes.

	== Some frequent errors ==		== Some frequent errors ==

Sourisdudesert: /* What is the best way to debug? */

2013-01-29T22:41:56Z

What is the best way to debug?

← Staršia verzia		Verzia z 00:41, 30. január 2013
Riadok 85:		Riadok 85:

	On the client side (Javascript), we recommand installing Firebug for Firefox (or using the 'Developer tools' with Chrome that have about the same functionalities), then:		On the client side (Javascript), we recommand installing Firebug for Firefox (or using the 'Developer tools' with Chrome that have about the same functionalities), then:
	* console.log( variable_to_inspect ); will give you the object structure of the variable in the Firebug console, without blocking the execution. It's often a good idea to precede this call with a console.log( '### HERE ###' ); to find more easily the appropriate line in the console log.
	* alert( variable_to_inspect ); will popup what you wish and pause the execution until you click ok. This won't be useful for complex structures, only native types will get plainly displayed. But this is sometimes useful just with messages to make sure which way the execution goes.

Sourisdudesert: /* Debugging my HTML/CSS layout */

2013-01-29T22:41:41Z

Debugging my HTML/CSS layout

← Staršia verzia		Verzia z 00:41, 30. január 2013
Riadok 67:		Riadok 67:

	This way, you know if the element is not visible because of some of its CSS property or because of anything else.		This way, you know if the element is not visible because of some of its CSS property or because of anything else.

			Another tip: sometimes, you change a CSS property with no visible effect on your interface. In that case, add a "display:none" property. If your element does not disappear, the bug probably comes from your CSS selector and not from your CSS property.

	Using Chrome "Elements" tab (thre first one), you can:		Using Chrome "Elements" tab (thre first one), you can:

Sourisdudesert: /* Debugging my HTML/CSS layout */

2013-01-29T22:39:27Z

Debugging my HTML/CSS layout

← Staršia verzia		Verzia z 00:39, 30. január 2013
Riadok 52:		Riadok 52:

	== Debugging my HTML/CSS layout ==		== Debugging my HTML/CSS layout ==

			Situation examples:
			* why my game element doesn't show up in the interface?
			* why my CSS property hasn't been applied to this element?
			* why this game element is displayed at this position?

			A first useful tip when an element does not show up in the interface is to give it a red background:
			<pre>
			#my_element {
			... some CSS definitions ...
			background-color: red;
			}
			</pre>

			This way, you know if the element is not visible because of some of its CSS property or because of anything else.

			Using Chrome "Elements" tab (thre first one), you can:
			* See the CURRENT HTML of your page. Remember that the classical "show page source" is inefficient with BGA as you are modifying the page source with your Javascript code.
			* Using the "magnifying glass", you can click on any part of your game interface and check it's HTML code and associated CSS styles.
			* You can even modify directly some CSS property and see if how it looks immediately on the game interface.

	== Debugging my Javascript game interface logic ==		== Debugging my Javascript game interface logic ==