ViewVC logotype

Contents of /trunk/doc/manual.html

Parent Directory Parent Directory | Revision Log Revision Log

Revision 198 - (show annotations)
Mon Sep 29 05:16:31 2008 UTC (10 years, 9 months ago) by siliconforks
File MIME type: text/html
File size: 22163 byte(s)
Doc fixes.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2 <html>
3 <head>
4 <title>JSCoverage user manual</title>
5 <link rel="stylesheet" type="text/css" href="sh_nedit.min.css">
6 <script src="sh_main.min.js"></script>
7 <script src="sh_html.min.js"></script>
8 <script src="sh_javascript.min.js"></script>
9 <link rel="stylesheet" type="text/css" href="doc.css">
10 </head>
11 <body onload="sh_highlightDocument();">
13 <h1>JSCoverage user manual</h1>
15 <p>
16 JSCoverage is a tool that measures code coverage in JavaScript programs.
17 </p>
19 <p>
20 JSCoverage works by adding instrumentation to JavaScript code before it is
21 executed in a web browser. JSCoverage provides several alternative ways of doing
22 this:
23 </p>
25 <ul>
26 <li>The simplest method is to use the <code>jscoverage</code> program to generate
27 instrumented JavaScript files.
28 </li>
29 <li>Alternatively, you can use the <code>jscoverage-server</code> program, a simple web server that instruments
30 JavaScript code as it is served.
31 </li>
32 <li>Finally, <code>jscoverage-server</code> can be run with the <code>--proxy</code> option to
33 act as a proxy server which instruments any JavaScript code proxied through it.
34 </li>
35 </ul>
37 <p>
38 The <code>jscoverage-server</code> program (with or without the <code>--proxy</code>
39 option) has the advantage of being able to store coverage reports to the filesystem.
40 </p>
42 <h2>Installing JSCoverage</h2>
44 <p>
45 You can compile JSCoverage on GNU/Linux or Microsoft Windows, using GCC. On
46 Windows you will require <a href="http://cygwin.com/">Cygwin</a> or <a
47 href="http://mingw.org/">MinGW/MSYS</a>.
48 </p>
50 <p>
51 You can extract and compile the code with the following commands:
52 </p>
54 <pre>
55 tar jxvf jscoverage-0.4.tar.bz2
56 cd jscoverage-0.4/
57 ./configure
58 make
59 </pre>
61 <p>
62 This will create the <code>jscoverage</code> and <code>jscoverage-server</code>
63 executables (<code>jscoverage.exe</code> and <code>jscoverage-server.exe</code>
64 on Windows). You can install the executables in <code>/usr/local</code> with the
65 command:
66 </p>
68 <pre>
69 make install
70 </pre>
72 <p>
73 Alternatively, you may simply copy the <code>jscoverage</code> executable and/or
74 the <code>jscoverage-server</code> executable to a suitable location in your
75 <code>PATH</code>.
76 </p>
78 <h2>Using the <code>jscoverage</code> program</h2>
80 <p>
81 Using the <code>jscoverage</code> program involves the following steps:
82 </p>
84 <h3>1. Instrumenting code</h3>
86 <p>
87 The first step is to add instrumentation to your JavaScript code. You do this by
88 executing <code>jscoverage</code> with two arguments:
89 </p>
91 <pre>
92 jscoverage <var>SOURCE-DIRECTORY</var> <var>DESTINATION-DIRECTORY</var>
93 </pre>
95 <p>
96 <var>SOURCE-DIRECTORY</var> is the directory containing the JavaScript code to be instrumented,
97 and <var>DESTINATION-DIRECTORY</var> is the name of the
98 directory to which <code>jscoverage</code> should output the instrumented code.
99 The <code>jscoverage</code> program will create <var>DESTINATION-DIRECTORY</var> if necessary and (recursively) copy
100 <var>SOURCE-DIRECTORY</var> to <var>DESTINATION-DIRECTORY</var>, instrumenting
101 any files ending with a <code>.js</code> extension.
102 </p>
104 <p>
105 For example, if you have a file
106 <code><var>SOURCE-DIRECTORY</var>/dir/index.html</code> referencing the script
107 <code><var>SOURCE-DIRECTORY</var>/dir/script.js</code>, then
108 <code>jscoverage</code> will create a copy of the HTML file at
109 <code><var>DESTINATION-DIRECTORY</var>/dir/index.html</code> and an instrumented
110 version of the script at
111 <code><var>DESTINATION-DIRECTORY</var>/dir/script.js</code>.
112 </p>
114 <table>
115 <tr>
116 <td><pre>
117 <var>SOURCE-DIRECTORY</var>/
118 dir/
119 index.html
120 script.js
122 </pre></td>
123 <td class="arrow">&rarr;</td>
124 <td><pre>
126 dir/
127 index.html
128 script.js [instrumented]
129 jscoverage.html
130 </pre></td>
131 </tr>
132 </table>
134 <p>
135 In addition, <code>jscoverage</code> creates a file called <code>jscoverage.html</code>
136 which is used to execute the instrumented code.
137 </p>
139 <h3>2. Executing the instrumented code in a web browser</h3>
141 <p>
142 Open <code>jscoverage.html</code> in your web browser.
143 The page contains a tabbed user interface:
144 </p>
146 <ul>
147 <li>The "Browser" tab is used to display pages with instrumented scripts.
148 <li>The "Summary" tab is used to display code coverage data.
149 <li>The "Source" tab is used to display JavaScript code, showing the number of times
150 each line of code was executed.
151 <li>The "About" tab displays information about the current version of JSCoverage.
152 </ul>
154 <p><img src="screenshot.png" alt="Screenshot"></p>
156 <p>
157 The "Browser" tab contains an <code>&lt;iframe&gt;</code>, which is initially empty.
158 You can load a page into this frame by
159 entering its URL into the "URL" input field. For example, to load
160 the file <code><var>DESTINATION-DIRECTORY</var>/dir/index.html</code>, you can
161 enter the relative URL <code>dir/index.html</code> into the input field.
162 You can load any page located in <code><var>DESTINATION-DIRECTORY</var>/</code>
163 or a subdirectory underneath <code><var>DESTINATION-DIRECTORY</var>/</code>; loading a page
164 from outside <code><var>DESTINATION-DIRECTORY</var>/</code>, or from a foreign web
165 server, will give unexpected results.
166 </p>
168 <h3>3. Generating a coverage report</h3>
170 <p>
171 Once the JavaScript code in the page in the "Browser" tab has been executed, click on
172 the "Summary" tab. This will display the current code coverage statistics.
173 </p>
175 <p>
176 As long as you do not reload the
177 <code>jscoverage.html</code> page, the coverage report statistics are
178 cumulative. If you execute more JavaScript in the frame in the "Browser" tab (e.g., by clicking on a link to
179 another scripted page, or by reloading the frame containing a scripted
180 page) and switch to the "Summary" tab again,
181 the coverage report will combine the statistics from the previous report with any newly generated statistics.
182 Reloading <code>jscoverage.html</code> resets all code coverage statistics to zero.
183 </p>
185 <h2>Example</h2>
187 <p>
188 The JSCoverage distribution comes with a trivial example program in the <code>doc/example</code> directory.
189 You can view the file <code>doc/example/index.html</code> in your web browser to run the (uninstrumented) program.
190 To instrument this program, follow these steps:
191 </p>
193 <h3>1. Instrumenting code</h3>
195 <p>
196 From the main distribution directory, execute the command:
197 </p>
199 <pre>
200 jscoverage doc/example doc/instrumented
201 </pre>
203 <p>
204 This will create the directory <code>doc/instrumented</code> and
205 place an instrumented copy of the code from <code>doc/example</code> in <code>doc/instrumented</code>.
206 </p>
208 <h3>2. Executing the instrumented code in a web browser</h3>
210 <p>
211 You can load the file <code>doc/instrumented/jscoverage.html</code> in your web browser and type
212 the URL for the instrumented code in the "URL" input field. Since a relative URL is accepted, you
213 can simply type <code>index.html</code> to load the page.
214 </p>
216 <p>
217 Alternatively, you can append the URL to the query string of the
218 <code>jscoverage.html</code> URL; for example, if you are in the main JSCoverage
219 directory and the Firefox executable is in your <code>PATH</code>, you can load
220 the <code>jscoverage.html</code> frameset and the <code>index.html</code> page
221 all in one command line:
222 </p>
224 <pre>
225 firefox "doc/instrumented/jscoverage.html?index.html"
226 </pre>
228 <p><img src="screenshot2.png" alt="Screenshot"></p>
230 <p>
231 For this particular page, the JavaScript does not execute automatically:
232 you have to select one of the radio buttons to execute the code.
233 </p>
235 <p><img src="screenshot3.png" alt="Screenshot"></p>
237 <h3>3. Generating a coverage report</h3>
239 <p>
240 Once you have executed the JavaScript code, you are instructed to click on the
241 "Summary" tab.
242 </p>
244 <p><img src="screenshot4.png" alt="Screenshot"></p>
246 <p>
247 You can click the checkbox to show a list of statements missed during execution.
248 </p>
250 <p><img src="screenshot5.png" alt="Screenshot"></p>
252 <p>
253 You can click one of the links to get a detailed view of a JavaScript source file.
254 </p>
256 <p><img src="screenshot6.png" alt="Screenshot"></p>
258 <h2>Inverted mode</h2>
260 <p>
261 In some situations it may be difficult to execute your code within the
262 JSCoverage "Browser" tab. For example, the code may assume that it is running in
263 the top-level browser window, generating errors if it is executed from within a
264 frame. JSCoverage has an alternative mode of operation, called <dfn>inverted
265 mode</dfn>, which may be useful in this case.
266 </p>
268 <p>
269 Normally you load <code>jscoverage.html</code> in your web browser, and in its
270 "Browser" tab you launch your test code. In inverted mode, you do the
271 opposite: you load your test page directly in your web browser, and from there
272 you launch JSCoverage. To do this you need to add some code to your test page:
273 </p>
275 <pre class="sh_javascript">
276 window.open('path/to/jscoverage.html');
277 </pre>
279 <p>
280 The <code>"path/to/jscoverage.html"</code> should be a URL pointing to the
281 location of the <code>jscoverage.html</code> file (remember, this will be in the
282 top level of the <var>DESTINATION-DIRECTORY</var> you specified when running
283 the <code>jscoverage</code> executable).
284 </p>
286 <p>
287 You can place this code wherever you like in your page: for example, you could
288 attach it to a button:
289 </p>
291 <pre class="sh_html">
292 &lt;button onclick="window.open('path/to/jscoverage.html');"&gt;Coverage report&lt;/button&gt;
293 </pre>
295 <p>
296 Note that you <em>must</em> use a <code>window.open</code> call; simply making a
297 link to <code>jscoverage.html</code> is not sufficient.
298 </p>
300 <p>
301 An example is located in the <code>doc/example-inverted</code> directory.
302 You can instrument the code and launch the <code>index.html</code> page:
303 </p>
305 <pre>
306 jscoverage doc/example-inverted doc/instrumented-inverted
307 firefox "doc/instrumented-inverted/index.html"
308 </pre>
310 <p>
311 From this page, you select one of the radio buttons and then click the "Coverage
312 report" button to launch the JSCoverage report.
313 </p>
315 <h2><code>jscoverage</code> command line options</h2>
317 <p>
318 The <code>jscoverage</code> program accepts the following options:
319 </p>
321 <dl>
322 <dt><code>-h</code>, <code>--help</code>
323 <dd>Display a brief help message.
324 <dt><code>-V</code>, <code>--version</code>
325 <dd>Display the version of the program.
326 <dt><code>-v</code>, <code>--verbose</code>
327 <dd>Explain what is being done.
328 <dt><code>--exclude=<var>PATH</var></code>
329 <dd>The command
330 <pre>
331 jscoverage --exclude=<var>PATH</var> <var>SOURCE-DIRECTORY</var> <var>DESTINATION-DIRECTORY</var>
332 </pre>
333 copies <var>SOURCE-DIRECTORY</var> to <var>DESTINATION-DIRECTORY</var>
334 recursively, but does not copy <var>SOURCE-DIRECTORY</var>/<var>PATH</var>.
335 <var>PATH</var> must be a complete path relative to <var>SOURCE-DIRECTORY</var>.
336 <var>PATH</var> can be a file or a directory (in which case the directory and
337 its entire contents are skipped). This option may be given multiple times.
338 <dt><code>--no-instrument=<var>PATH</var></code>
339 <dd>The command
340 <pre>
341 jscoverage --no-instrument=<var>PATH</var> <var>SOURCE-DIRECTORY</var> <var>DESTINATION-DIRECTORY</var>
342 </pre>
343 copies <var>SOURCE-DIRECTORY</var> to <var>DESTINATION-DIRECTORY</var>
344 recursively, but does not instrument any JavaScript code in
345 <var>SOURCE-DIRECTORY</var>/<var>PATH</var>. <var>PATH</var> must be a complete
346 path relative to <var>SOURCE-DIRECTORY</var>. <var>PATH</var> can be a
347 (JavaScript) file or a directory (in which case any JavaScript files located
348 anywhere underneath the directory are not instrumented). This option may be
349 given multiple times.
350 </dl>
352 <h2>Query string options</h2>
354 <p>
355 When accessing <code>jscoverage.html</code> in a web browser, you may provide a
356 query string consisting of options separated by ampersand (<code>&amp;</code>)
357 or semicolon (<code>;</code>). Any option not containing an equals sign
358 (<code>=</code>) is considered to be a URL which will be loaded in the "Browser"
359 tab.
360 </p>
362 <dl>
363 <dt><code>u=<var>URL</var></code>, <code>url=<var>URL</var></code>
364 <dd>Load <var>URL</var> in the "Browser" tab. (This is the same as specifying
365 an option without an equals sign.)
366 <dt><code>m=<var>BOOLEAN</var></code>, <code>missing=<var>BOOLEAN</var></code>
367 <dd>Determines whether to initially display the "Missing" column in the "Summary"
368 tab. <var>BOOLEAN</var> can be
369 <code>true</code>, <code>t</code>, <code>yes</code>, <code>y</code>, <code>on</code>, <code>1</code>
370 (to display the "Missing" column), or
371 <code>false</code>, <code>f</code>, <code>no</code>, <code>n</code>, <code>off</code>, <code>0</code>
372 (to hide the "Missing" column). By default, the "Missing" column is not displayed.
373 </dl>
375 <h2>Using the <code>jscoverage-server</code> program</h2>
377 <p>
378 The <code>jscoverage-server</code> program is a simple web server. You can use
379 <code>jscoverage-server</code> to serve files from the <code>doc/example/</code>
380 directory:
381 </p>
383 <pre>
384 cd doc/example
385 jscoverage-server --verbose
386 </pre>
388 <p>
389 Once the server is running, you can access the JSCoverage web interface by
390 visiting the URL <code></code>, and you can
391 load the <code>doc/example/index.html</code> file by entering
392 <code>index.html</code> in the "URL" input field. (Or you can do this all in
393 one step by loading the URL
394 <code></code> in your web
395 browser.) The
396 <code>jscoverage-server</code> program automatically instruments any served
397 JavaScript code, so that code coverage data will be gathered as the code is
398 executed in your browser.
399 </p>
401 <p>
402 The web interface is slightly different from that generated by the
403 <code>jscoverage</code> program: it has a new tab named "Store".
404 To store coverage data, click the "Store" tab.
405 </p>
407 <p><img src="screenshot7.png" alt="Screenshot"></p>
409 <p>
410 When you click the "Store" button, the coverage data will be saved to a directory named <code>jscoverage-report/</code>.
411 You can view this stored report at any time by opening the file <code>jscoverage-report/jscoverage.html</code> in
412 your web browser - you don't need the <code>jscoverage-server</code> running to access it.
413 </p>
415 <p>
416 If you use the "Store" tab again to store coverage data, the new data will be merged with
417 the previous data in the <code>jscoverage-report/</code> directory. This can be useful,
418 for instance, if you wish to run a set of tests in different browsers and generate an
419 aggregate report which combines the data for all of them.
420 </p>
422 <p>
423 You can stop the server by running another instance of <code>jscoverage-server</code> with the
424 <code>--shutdown</code> option:
425 </p>
427 <pre>
428 jscoverage-server --shutdown
429 </pre>
431 <h2>Using <code>jscoverage-server --proxy</code></h2>
433 <p>
434 To use <code>jscoverage-server</code> as a proxy server, use the <code>--proxy</code> option:
435 </p>
437 <pre>
438 jscoverage-server --verbose --proxy
439 </pre>
441 <p>
442 Configure your browser to use an HTTP proxy with address and port 8080.
443 You can then generate code coverage data for a web page on the server <code>example.com</code>
444 by accessing the JSCoverage web interface at the special URL <code>http://example.com/jscoverage.html</code>.
445 Note that this URL is not provided by the <code>example.com</code> server; it is automatically generated
446 by the proxy server whenever a URL with path <code>/jscoverage.html</code> is requested.
447 </p>
449 <h2><code>jscoverage-server</code> command line options</h2>
451 <dl>
452 <dt><code>-h</code>, <code>--help</code>
453 <dd>Display a brief help message.
454 <dt><code>-V</code>, <code>--version</code>
455 <dd>Display the version of the program.
456 <dt><code>-v</code>, <code>--verbose</code>
457 <dd>Explain what is being done.
458 <dt><code>--document-root=<var>PATH</var></code>
459 <dd>Serve web content from the directory given by <var>PATH</var>. The default is
460 the current directory. This option may not be given with the <code>--proxy</code> option.
461 <dt><code>--ip-address=<var>ADDRESS</var></code>
462 <dd>Run the server on the IP address given by <var>ADDRESS</var>. The default is <code></code>. Specify
463 <code></code> to use any address.
464 <dt><code>--no-instrument=<var>URL</var></code>
465 <dd>Do not instrument JavaScript code from <var>URL</var>. If you are running <code>jscoverage-server</code>
466 with the <code>--proxy</code> option, <var>URL</var> should be a full URL. For example:
467 <pre>
468 jscoverage-server --proxy --no-instrument=http://example.com/scripts/
469 </pre>
470 Without <code>--proxy</code>, <var>URL</var> should be only the path portion of a URL:
471 <pre>
472 jscoverage-server --no-instrument=/scripts/
473 </pre>
474 This option may be given multiple times.
475 <dt><code>--port=<var>PORT</var></code>
476 <dd>Run the server on the port given by <var>PORT</var>. The default is port 8080.
477 <dt><code>--proxy</code>
478 <dd>Run as a proxy server.
479 <dt><code>--report-dir=<var>PATH</var></code>
480 <dd>Use the directory given by <var>PATH</var> for storing coverage reports. The default is
481 <code>jscoverage-report/</code> in the current directory.
482 <dt><code>--shutdown</code>
483 <dd>Stop a running instance of the server.
484 </dl>
486 <h2>Advanced topics</h2>
488 <h3>Storing coverage reports programmatically</h3>
490 <p>
491 If you are executing a test suite using <code>jscoverage-server</code>, you can
492 store a coverage report programmatically by having your test suite call the
493 <code>jscoverage_report</code> function (automatically generated by
494 <code>jscoverage-server</code>) after all your tests have finished running:
495 </p>
497 <pre class="sh_javascript">
498 if (top.jscoverage_report) {
499 top.jscoverage_report();
500 }
501 </pre>
503 <p>
504 You can specify the name of the directory in which to store the report by
505 passing the name as a parameter to the <code>jscoverage_report</code> function:
506 </p>
508 <pre class="sh_javascript">
509 if (top.jscoverage_report) {
510 // determine the directory name based on the browser
511 var directory;
512 if (/MSIE/.test(navigator.userAgent)) {
513 directory = 'IE';
514 }
515 else {
516 directory = 'other';
517 }
518 top.jscoverage_report(directory);
519 }
520 </pre>
522 <p>
523 This directory will be a subdirectory under the <code>jscoverage-report/</code>
524 directory (or whatever is specified with the <code>--report-dir</code> option).
525 Using the above example, the report would be stored to either
526 <code>jscoverage-report/IE/</code> or <code>jscoverage-report/other/</code>.
527 </p>
529 <h3>Conditional directives</h3>
531 <p>
532 Sometimes you may wish to exclude certain lines of code from coverage
533 statistics. Some lines of code may be executed only in certain browsers; other
534 lines should never be executed at all (they may be present only to detect
535 programming errors). You can use specially formatted comments in your code,
536 called <dfn>conditional directives</dfn>, to tell JSCoverage when to exclude
537 those lines from coverage statistics. These lines will be ignored in the
538 JSCoverage "Summary" tab; in the "Source" tab, these lines will be indicated
539 with the color yellow.
540 </p>
542 <p>
543 Conditional directives take the following form:
544 </p>
546 <pre class="sh_javascript">
548 ...
550 </pre>
552 <p>
553 The <var>CONDITION</var> is an ordinary JavaScript expression; if this
554 expression evaluates to <code>true</code>, then the lines of code between the
555 <code>//#JSCOVERAGE_IF</code> and <code>//#JSCOVERAGE_ENDIF</code> directives are
556 included in coverage statistics; otherwise, they are excluded from coverage
557 statistics.
558 </p>
560 <p>
561 In order to be recognized as a conditional directive, the comment must be
562 formatted exactly as shown: it must be a line comment starting with <code>//</code>,
563 it must start in the first column, and it must be followed by <code>#JSCOVERAGE_IF</code>
564 or <code>#JSCOVERAGE_ENDIF</code> in uppercase letters with no intervening white space.
565 </p>
567 <p>
568 For example, if you have some code in an <code>if</code> statement which is
569 executed only in certain browsers, you can usually just repeat the condition in
570 a <code>//#JSCOVERAGE_IF</code> directive:
571 </p>
573 <pre class="sh_javascript">
574 if (window.ActiveXObject) {
575 //#JSCOVERAGE_IF window.ActiveXObject
576 return new ActiveXObject('Msxml2.XMLHTTP');
578 }
579 </pre>
581 <p>
582 Alternatively, it may be easier to diagnose problems if you specify exactly
583 which browsers you expect to execute the code in the conditional:
584 </p>
586 <pre class="sh_javascript">
587 if (window.ActiveXObject) {
588 //#JSCOVERAGE_IF /MSIE/.test(navigator.userAgent)
589 return new ActiveXObject('Msxml2.XMLHTTP');
591 }
592 </pre>
594 <p>
595 To exclude code from coverage statistics unconditionally, you can use <code>//#JSCOVERAGE_IF 0</code> or
596 <code>//#JSCOVERAGE_IF false</code>:
597 </p>
599 <pre class="sh_javascript">
600 function f(s) {
601 if (typeof(s) !== 'string') {
603 throw 'function f requires a string argument';
605 }
606 }
607 </pre>
609 <h2>Caveats</h2>
611 <ul>
612 <li>JSCoverage adds instrumentation to JavaScript code, which will slow down execution speed.
613 Expect instrumented code to take at least twice as much time to run.
614 <li>JSCoverage currently instruments only <code>.js</code> files; it does not instrument code in <code>&lt;script&gt;</code>
615 elements in HTML files.
616 <li>HTML files must use relative URLs to reference scripts. If you use an absolute URL, your page will reference
617 the original uninstrumented script rather than the instrumented one, and no code coverage data will be collected.
618 <li>JSCoverage instruments physical lines of code rather than logical JavaScript statements; it works bests with code
619 that has exactly one statement per line. If you put multiple statements on a line, or split a line across two or more
620 statements, you may get strange results.
621 <li>JSCoverage uses frames. Some web pages that use frames may not function properly when run under JSCoverage, especially
622 those which try to access the top-level frame (<code>window.top</code>, <code>target="_top"</code>, etc.).
623 <li>JSCoverage is distributed without any warranty. See the <a href="license.html">license</a> for more details.
624 </ul>
626 <address>
627 Copyright &copy; 2007, 2008 <a href="http://siliconforks.com/"><img src="siliconforks-16x16.png" width="16" height="16" class="icon" alt="Silicon Forks"></a> <a href="http://siliconforks.com/">siliconforks.com</a><br>
628 Last updated September 12, 2008<br>
629 <a href="mailto:jscoverage@siliconforks.com">jscoverage@siliconforks.com</a>
630 </address>
632 </body>
633 </html>

  ViewVC Help
Powered by ViewVC 1.1.24