-
Notifications
You must be signed in to change notification settings - Fork 35
Expand file tree
/
Copy pathtesting.html
More file actions
417 lines (417 loc) · 13.8 KB
/
Copy pathtesting.html
File metadata and controls
417 lines (417 loc) · 13.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="App Inventor for Android" name="description" />
<meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords" />
<title>
Testing - App Inventor for Android
</title>
<link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico" />
<link href="/static/images/appinventor-16.png" rel="icon" type="image/png" />
<link href="/static/css/appinventor.css" rel="stylesheet" />
<script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
<script>
var tracker = new gweb.analytics.AutoTrack({
profile: 'UA-5856106-2'
});
</script>
<script language = "JavaScript" src="/static/scripts/HeaderAndFooter.js"></script>
<style>
img.c2 {border-width:0}
div.c1 {clear:both;}
</style>
</head>
<body>
<script language = "JavaScript">createHeader('<div id="navigation-breadcrumb"> <a href="/learn/">Learn</a> > <a href="/learn/reference/">Reference</a> > Testing > ');</script><br>
<div id="aiac">
<div class="main-container">
<div class="customhr customhr-gray">
</div>
<div class="content">
<div class="content-body">
<div class="learn-page">
<h1>
Live Development, Testing and Debugging
</h1>
<p>
The Blocks editor includes several valuable features to support
<em>
incremental
development and testing
</em>
as you create your applications. You can also make use
of the Java console and the Android log to explore problems, but these will be
mostly of use in reporting bugs in App Inventor rather than in debugging your own
apps.
</p>
<h2>
Incremental development with the Blocks editor
</h2>
<p>
When you create apps with App Inventor, you are working on the phone
<em>
live
</em>
:
Drag a button icon to the Viewer and the button appears on the phone right then;
change the button's color in the Designer and the color changes; drag out a block
that makes something happen when the button is pressed, and you can press the
button right then on the phone to see it happen.
</p>
<p>
This kind of feedback is enormously useful, because it lets you develop and test
your apps
<em>
incrementally
</em>
, defining each bit of new behavior and testing as
you go along. Inexperienced programmers often make the mistake of building a large
amount of stuff before they test any of it. Then, when they run into bugs, they're
faced with a huge tangle to sort out, where they don't know which pieces are
working and which are not. So try to work incrementally. You'll still surely
encounter bugs, but incremental development will let you isolate bugs more quickly
and fix them more easily.
</p>
<p>
In addition to letting you try things by interacting with the phone itself, App
Inventor includes features to aid in testing and debugging while you are using the
Blocks editor. You can see these if you right-click on a block. This will bring up
a menu, as shown here for a block that calls the procedure
<code>
MoveMole
</code>
:
</p>
<div class="imagecontainer">
<img alt="" height="158" src="images/editorMoveMoleMenu.png" width="260" />
</div>
<p>
Not all blocks will offer the same choice in the menu.
</p>
<h3>
Do It
</h3>
<p>
You can perform the action for a block with
<em>
Do It
</em>
. In debugging a program
like MoleMash, you could select
<em>
Do It
</em>
for
<code>
MoveMole
</code>
and see if
the mole moves on the phone.
</p>
<p>
<em>
Do It
</em>
not only does the block's action, but also puts up a balloon that
shows the value returned. The figure below shows the use of
<em>
Do It
</em>
on an
addition block to show the result of addding two numbers called
<code>
this
</code>
and
<code>
that
</code>
.
</p>
<div class="imagecontainer">
<img alt="" height="166" src="images/editorDoItAdd.png" width="404" />
</div>
<p>
Result balloons are attached to blocks at a point indicated by a small equals sign.
You can click on the equals sign to hide and show the result. Moving the mouse away
from the block makes the result balloon go away.
</p>
<h3>
Deactivate
</h3>
<p>
Sometimes you want to keep a block around that's not really part of your app. Maybe
it's a part of the program that's not yet finished, or a block that's only
partially implemented. Choosing
<em>
Deactivate
</em>
from the block menu will keep
the block from becoming part of the app when you package it. Selecting
<em>
Activate
</em>
restores the deactivated block.
</p>
<h3>
Collapsing blocks
</h3>
<p>
If your app has many blocks, they won't all fit on the screen at once. You'll need
to scroll the Blocks Editor window, and that can be awkward. One way to help keep
screen real-estate small is to use
<em>
block collapsing
</em>
. If you click on the
minus sign at the lower left of a procedure block or an event-handler block, the
block will collapse so that only the title will be visible. Clicking on the plus
sign will restore the block to full visibility.
</p>
<h3>
Comments
</h3>
<p>
Adding comments to blocks is a good way to help others understand your programs.
It's also useful for keeping track of your own programs. Selecting
<em>
Add
Comment
</em>
from the block menu brings up a balloon attached to the block, where
you can type a comment as shown:
</p>
<div class="imagecontainer">
<img alt="" height="152" src="images/editorMoveMoleComment.png" width="252" />
</div>
<p>
You can drag the balloon around, or resize it. The comment balloon is attached to
the block at a spot with a small question mark, that you can click to hide and show
the comment. Or you can remove the comment permanently by right clicking on the
block and choosing
<em>
Remove Comment
</em>
.
</p>
<h3>
Watching variables
</h3>
<p>
If you click
<em>
Do It
</em>
on a block that shows the value of a variable, you'll
get a result balloon showing that value of the variable at the time you clicked.
But sometimes, especially in debugging, what you really want to see is how the
value changes as your program runs. Clicking "Watch" opens a baloon whose result
constantly monitors the value of the variable, so you can see if your program is
changing it as anticipated.
</p>
<h3>
Complaints
</h3>
<p>
Sometimes the result of doing a block will be an error. In the picture below, we
changed the value of
<code>
that
</code>
to be the text "apple", and clicked
<em>
Do
It
</em>
to add
<code>
this
</code>
and
<code>
that
</code>
. The result is an error, and
a
<em>
complaint
</em>
</p>
<div class="imagecontainer">
<img alt="" height="200" src="images/editorDoItAddComplaint.png" width="404" />
</div>
<p>
The complaint balloon is attached to the block at a small exclamation point, which
you can use to hide and show the complaint. You can also remove the complaint by
choosing
<em>
Remove Complaint
</em>
from the block menu.
</p>
<h2>
System Logs
</h2>
<p>
Besides the debugging tools in the Blocks editor, you can sometimes get information
from various logs. This is generally for advanced users only.
</p>
<h3>
The Android Log and adb(Advanced)
</h3>
<p>
If you have problems on the Android device, you can sometimes get information by
inspecting the
<em>
Android Log
</em>
. For example, if your application runs out of
space, that will be recorded in the log. The messages in the log are not generally
intelligible, but you can use the
<em>
Notifier
</em>
component to make your app
write messages into the log, and this can be of some use in debugging.
</p>
<p>
You can read the log using the
<em>
Android Debug Bridge (adb)
</em>
. The
<em>
adb
</em>
program is installed on your computer as part of the App Inventor
installation process, and you can use the
<em>
logcat
</em>
option to view the log.
You can launch adb from the terminal on your machine. Go to the directory
containing the AppInventor Extras software and run the command
<br />
adb logcat
<br />
This will display the entire (large) system log. If you are debugging, you should
open the log, stimulate the bug again, and see what appears at the end of the log.
</p>
<p>
The actual directory for adb depends on your operating system:
</p>
<ul>
<li>
For MacOs it's /Applications/AppInventor/commands-for-Appinventor.
</li>
<li>
For GNU/Linux it's /usr/google/appinventor-extras/commands-for-Appinventor
</li>
<li>
For Windows, it can be in one of several places, depending on how it was
installed. Search on your machine for the \Android\appinventor-extras folder,
containing the file adb.exe.
</li>
</ul>
<p>
For more information on adb, see see the
<a href="http://developer.android.com/guide/developing/tools/adb.html">
Android Debug
Bridge
</a>
web page.
</p>
<h3>
The Java system log (Advanced)
</h3>
<p>
Not all bugs will be your bugs. App Inventor has bugs, too, and you might encounter
them. There's not much you can do here, other than report the bug, but you might
get some idea of what's going on — or at least get information for reporting error
messages — by using the Java console to display the system log.
</p>
<p>
The Blocks editor is a Java program, and many of its operations write messages to
the Java system log. You can see these messages if you run the Blocks editor with
the Java console open.
</p>
<p>
Running with the Java console open is a preference you specify for Java before you
start up App Inventor. The details depend on which operating system you're using:
</p>
<ul>
<li>
For MacOS, go under Applications → Utilities → Java Preferences, and choose the
<em>
Advanced
</em>
tab. You'll see an option under
<em>
Java Console
</em>
to show the
console.
</li>
<li>
For Windows, go under
<em>
Java
</em>
in the control panel and choose the
<em>
Advanced
</em>
tab. You'll see an option under
<em>
Java Console
</em>
to show the
console.
</li>
<li>
For GNU/Linux you'll need to find the program
<code>
javaws
</code>
, which should
be in the directory where Java was installed. The command
<br />
<code>
javaws -viewer
</code>
<br />
will open a control panel. Choose the
<em>
Advanced
</em>
tab. You'll see an option
under
<em>
Java Console
</em>
to show the console.
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<script language = "JavaScript">createFooter();</script><br>
<div class="footer-lastupdate">
<script>
if (document.lastModified != '') {
var m = "Page last updated: " + document.lastModified;
var p = m.length-8;
document.writeln("<center>");
document.write(m.substring(p, 0));
document.writeln("<\/center>");
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>