The purpose of this tutorial is to demonstrate how to use Google's Chrome browser to debug your NSB/AppStudio app.
NSB/AppStudio programs run in a browser. While the final target for the app may be a device like an iPhone or iPad, it's convenient to test the program on the desktop. Most any browser will work, but we have found the debugging tools on Google's Chrome work well and are easy to use.
Got a useful debugging tip? Let us know!
Let's create a short program with an error and see how it works.
Enter this program:
A = "This is a string" A = A + B Print A
This program won't work. The variable B in the second line does not have a value.
Run the program. A blank browser window will appear. The
Here is what you will see:
There is a lot of information here, but it's easy to see what the problem is. Simply fix it and run the problem again.
You can force your program to stop execution, then examine useful information in the Console. There are two ways to stop the program: you can put a special statement into your code before you run the program, or you can use the Console to add a breakpoint once it is running. Let's give this a try.
Enter this code (or load sample "Tutorial 10.txt")
HTML <button onmousedown=button_down()>My Button</button> <box id="counter"> End HTML count=0 Function button_down() Dim s s="This is a local string" count=count+1 counter.innerHTML=count debugger End Function
Debugger statement will be ignored. Click on "My Button"
button_down gets called.
There are a number of interesting things to observe here.
In the Code Window, you can see the debugger statement is highlighted.
On the right, you can see the Call Stack, showing how execution got to the debugger statement.
You can also see local variables. The variable
s is shown with its value.
If you hover the pointer over a variable name, its value will be displayed.
If you enter a variable name into the lower panel, its value will be displayed.
Global variable (like
count in this example, can also be examined in the "Local" window on the right. Click on the triangle beside the work "this" and it will expand to show all globals.
Hit F8 to continue execution. Other shortcuts here are
Setting a breakpoint at runtime
You can set a breakpoint at runtime by clicking on its line number in the Code Window.
If you right click on the blue breakpoint indicator you created in the line number column, you can set a condition under which the breakpoint is effective. It will then turn orange. In this case, the breakpoint condition has been set to "
Using F8, execution has been continued until the breakpoint is reached. Once again, variable's values can be checked, etc.
If you click on the database itself, you see an empty window area with a prompt on the right hand side. There you can enter SQL statements directly, e.g. Copy/paste them from your program for testing, or do a "select * from <tablename>" to see the effect of your statements inside a table. You can also click on the table on the left, this also shows the data inside the table.
In the above screen, we have selected the "Storage" tab along the top of the Console. The customers.db database has been expanded to show what tables are in it: there is only one. Selecting that causes the records in the database to be displayed.chrome://appcache-internals/. You'll see one entry for each app which is storing local files:
If you select the entry for an app, you'll see the following:
You can even look at the contents of individual files: