1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
2 |
<html> |
3 |
<head> |
4 |
<title>JSCoverage user manual</title> |
5 |
<link type="text/css" href="doc.css" rel="stylesheet"> |
6 |
</head> |
7 |
<body> |
8 |
|
9 |
<h1>JSCoverage user manual</h1> |
10 |
|
11 |
<p> |
12 |
JSCoverage is a tool used to measure code coverage in JavaScript |
13 |
programs. |
14 |
</p> |
15 |
|
16 |
<p> |
17 |
JSCoverage has two components: |
18 |
</p> |
19 |
|
20 |
<ol> |
21 |
<li>An executable program which is used to add instrumentation to JavaScript code. |
22 |
<li>A web application which is used to execute instrumented code and generate a |
23 |
code coverage report. |
24 |
</ol> |
25 |
|
26 |
<h2>Installing JSCoverage</h2> |
27 |
|
28 |
<p> |
29 |
You can compile JSCoverage on GNU/Linux or Microsoft Windows, using GCC. On |
30 |
Windows you will require <a href="http://cygwin.com/">Cygwin</a> or <a |
31 |
href="http://mingw.org/">MinGW/MSYS</a>. |
32 |
</p> |
33 |
|
34 |
<p> |
35 |
You can extract and compile the code with the following commands: |
36 |
</p> |
37 |
|
38 |
<pre> |
39 |
tar jxvf jscoverage-0.3.tar.bz2 |
40 |
cd jscoverage-0.3/ |
41 |
./configure |
42 |
make |
43 |
</pre> |
44 |
|
45 |
<p> |
46 |
This will create the <code>jscoverage</code> executable (<code>jscoverage.exe</code> on Windows). |
47 |
You can install the executable in <code>/usr/local</code> with the command: |
48 |
</p> |
49 |
|
50 |
<pre> |
51 |
make install |
52 |
</pre> |
53 |
|
54 |
<p> |
55 |
Alternatively, since the program consists of only the single self-contained |
56 |
<code>jscoverage</code> executable, you may simply copy it to a suitable location |
57 |
in your <code>PATH</code>. |
58 |
</p> |
59 |
|
60 |
<h2>Using JSCoverage</h2> |
61 |
|
62 |
<p> |
63 |
Using JSCoverage requires three steps: |
64 |
</p> |
65 |
|
66 |
<h3>1. Instrumenting code</h3> |
67 |
|
68 |
<p> |
69 |
The first step is to add instrumentation to your JavaScript code. This is the function of the |
70 |
<code>jscoverage</code> executable. You must provide two arguments: |
71 |
</p> |
72 |
|
73 |
<pre> |
74 |
jscoverage <var>SOURCE-DIRECTORY</var> <var>DESTINATION-DIRECTORY</var> |
75 |
</pre> |
76 |
|
77 |
<p> |
78 |
<var>SOURCE-DIRECTORY</var> is the directory containing the JavaScript code to be instrumented, |
79 |
and <var>DESTINATION-DIRECTORY</var> is the name of the |
80 |
directory to which <code>jscoverage</code> should output the instrumented code. |
81 |
The <code>jscoverage</code> program will create <var>DESTINATION-DIRECTORY</var> if necessary and (recursively) copy |
82 |
<var>SOURCE-DIRECTORY</var> to <var>DESTINATION-DIRECTORY</var>, instrumenting |
83 |
any files ending with a <code>.js</code> extension. |
84 |
</p> |
85 |
|
86 |
<p> |
87 |
For example, if you have a file |
88 |
<code><var>SOURCE-DIRECTORY</var>/dir/index.html</code> referencing the script |
89 |
<code><var>SOURCE-DIRECTORY</var>/dir/script.js</code>, then |
90 |
<code>jscoverage</code> will create a copy of the HTML file at |
91 |
<code><var>DESTINATION-DIRECTORY</var>/dir/index.html</code> and an instrumented |
92 |
version of the script at |
93 |
<code><var>DESTINATION-DIRECTORY</var>/dir/script.js</code>. |
94 |
</p> |
95 |
|
96 |
<table> |
97 |
<tr> |
98 |
<td><pre> |
99 |
<var>SOURCE-DIRECTORY</var>/ |
100 |
dir/ |
101 |
index.html |
102 |
script.js |
103 |
|
104 |
</pre></td> |
105 |
<td class="arrow">→</td> |
106 |
<td><pre> |
107 |
<var>DESTINATION-DIRECTORY</var>/ |
108 |
dir/ |
109 |
index.html |
110 |
script.js [instrumented] |
111 |
jscoverage.html |
112 |
</pre></td> |
113 |
</tr> |
114 |
</table> |
115 |
|
116 |
<p> |
117 |
In addition, <code>jscoverage</code> creates a file called <code>jscoverage.html</code> |
118 |
which is used to execute the instrumented code. |
119 |
</p> |
120 |
|
121 |
<h3>2. Running instrumented code in the web application</h3> |
122 |
|
123 |
<p> |
124 |
Open <code>jscoverage.html</code> in your web browser. |
125 |
The page contains a tabbed user interface: |
126 |
</p> |
127 |
|
128 |
<ul> |
129 |
<li>The "Browser" tab is used to display pages with instrumented scripts. |
130 |
<li>The "Summary" tab is used to display code coverage data. |
131 |
<li>The "Source" tab is used to display JavaScript code, showing the number of times |
132 |
each line of code was executed. |
133 |
<li>The "About" tab displays information about the current version of JSCoverage. |
134 |
</ul> |
135 |
|
136 |
<img src="screenshot.png" alt="Screenshot"> |
137 |
|
138 |
<p> |
139 |
The "Browser" tab contains an <code><iframe></code>, which is initially empty. |
140 |
You can load a page into this frame by |
141 |
entering its URL into the "URL" input field. For example, to load |
142 |
the file <code><var>DESTINATION-DIRECTORY</var>/dir/index.html</code>, you can |
143 |
enter the relative URL <code>dir/index.html</code> into the input field. |
144 |
</p> |
145 |
|
146 |
<h3>3. Generating the coverage report</h3> |
147 |
|
148 |
<p> |
149 |
Once the JavaScript code in the page in the "Browser" tab has been executed, click on |
150 |
the "Summary" tab. This will display the current code coverage statistics. |
151 |
</p> |
152 |
|
153 |
<p> |
154 |
As long as you do not reload the |
155 |
<code>jscoverage.html</code> page, the coverage report statistics are |
156 |
cumulative. If you execute more JavaScript in the frame in the "Browser" tab (e.g., by clicking on a link to |
157 |
another scripted page, or by reloading the frame containing a scripted |
158 |
page) and switch to the "Summary" tab again, |
159 |
the coverage report will combine the statistics from the previous report with any newly generated statistics. |
160 |
Reloading <code>jscoverage.html</code> resets all code coverage statistics to zero. |
161 |
</p> |
162 |
|
163 |
<h2>Example</h2> |
164 |
|
165 |
<p> |
166 |
The JSCoverage distribution comes with a trivial example program in the <code>doc/example</code> directory. |
167 |
You can view the file <code>doc/example/index.html</code> in your web browser to run the (uninstrumented) program. |
168 |
To instrument this program, follow these steps: |
169 |
</p> |
170 |
|
171 |
<h3>1. Instrumenting code</h3> |
172 |
|
173 |
<p> |
174 |
From the main distribution directory, execute the command: |
175 |
</p> |
176 |
|
177 |
<pre> |
178 |
jscoverage doc/example doc/instrumented |
179 |
</pre> |
180 |
|
181 |
<p> |
182 |
This will create the directory <code>doc/instrumented</code> and |
183 |
place an instrumented copy of the code from <code>doc/example</code> in <code>doc/instrumented</code>. |
184 |
</p> |
185 |
|
186 |
<h3>2. Executing instrumented code</h3> |
187 |
|
188 |
<p> |
189 |
You can load the file <code>doc/instrumented/jscoverage.html</code> in your web browser and type |
190 |
the URL for the instrumented code in the "URL" input field. Since a relative URL is accepted, you |
191 |
can simply type <code>index.html</code> to load the page. |
192 |
</p> |
193 |
|
194 |
<p> |
195 |
Alternatively, you can append the URL to the query string of the |
196 |
<code>jscoverage.html</code> URL; for example, if you are in the main JSCoverage |
197 |
directory and the Firefox executable is in your <code>PATH</code>, you can load |
198 |
the <code>jscoverage.html</code> frameset and the <code>index.html</code> page |
199 |
all in one command line: |
200 |
</p> |
201 |
|
202 |
<pre> |
203 |
firefox "doc/instrumented/jscoverage.html?index.html" |
204 |
</pre> |
205 |
|
206 |
<img src="screenshot2.png" alt="Screenshot"> |
207 |
|
208 |
<p> |
209 |
For this particular page, the JavaScript does not execute automatically: |
210 |
you have to select one of the radio buttons to execute the code. |
211 |
</p> |
212 |
|
213 |
<img src="screenshot3.png" alt="Screenshot"> |
214 |
|
215 |
<h3>3. Generating the coverage report</h3> |
216 |
|
217 |
<p> |
218 |
Once you have executed the JavaScript code, you are instructed to click on the |
219 |
"Summary" tab. |
220 |
</p> |
221 |
|
222 |
<img src="screenshot4.png" alt="Screenshot"> |
223 |
|
224 |
<p> |
225 |
You can click the checkbox to show a list of statements missed during execution. |
226 |
</p> |
227 |
|
228 |
<img src="screenshot5.png" alt="Screenshot"> |
229 |
|
230 |
<p> |
231 |
You can click one of the links to get a detailed view of a JavaScript source file. |
232 |
</p> |
233 |
|
234 |
<img src="screenshot6.png" alt="Screenshot"> |
235 |
|
236 |
<h2>Inverted mode</h2> |
237 |
|
238 |
<p> |
239 |
In some situations it may be difficult to execute your code within the |
240 |
JSCoverage "Browser" tab. For example, the code may assume that it is running in |
241 |
the top-level browser window, generating errors if it is executed from within a |
242 |
frame. JSCoverage has an alternative mode of operation, called <dfn>inverted |
243 |
mode</dfn>, which may be useful in this case. |
244 |
</p> |
245 |
|
246 |
<p> |
247 |
Normally you load <code>jscoverage.html</code> in your web browser, and in its |
248 |
"Browser" tab you launch your test code. In inverted mode, you do the |
249 |
opposite: you load your test page directly in your web browser, and from there |
250 |
you launch JSCoverage. To do this you need to add some code to your test page: |
251 |
</p> |
252 |
|
253 |
<pre> |
254 |
window.open("path/to/jscoverage.html"); |
255 |
</pre> |
256 |
|
257 |
<p> |
258 |
The <code>"path/to/jscoverage.html"</code> should be a URL pointing to the |
259 |
location of the <code>jscoverage.html</code> file (remember, this will be in the |
260 |
top level of the <var>DESTINATION-DIRECTORY</var> you specified when running |
261 |
the <code>jscoverage</code> executable). |
262 |
</p> |
263 |
|
264 |
<p> |
265 |
You can place this code wherever you like in your page: for example, you could |
266 |
attach it to a button: |
267 |
</p> |
268 |
|
269 |
<pre> |
270 |
<button onclick='window.open("path/to/jscoverage.html");'>Coverage report</button> |
271 |
</pre> |
272 |
|
273 |
<p> |
274 |
Note that you <em>must</em> use a <code>window.open</code> call; simply making a |
275 |
link to <code>jscoverage.html</code> is not sufficient. |
276 |
</p> |
277 |
|
278 |
<p> |
279 |
An example is located in the <code>doc/example-inverted</code> directory. |
280 |
You can instrument the code and launch the <code>index.html</code> page: |
281 |
</p> |
282 |
|
283 |
<pre> |
284 |
jscoverage doc/example-inverted doc/instrumented-inverted |
285 |
firefox "doc/instrumented-inverted/index.html" |
286 |
</pre> |
287 |
|
288 |
<p> |
289 |
From this page, you select one of the radio buttons and then click the "Coverage |
290 |
report" button to launch the JSCoverage report. |
291 |
</p> |
292 |
|
293 |
<h2>Command line options</h2> |
294 |
|
295 |
<p> |
296 |
The <code>jscoverage</code> program accepts the following options: |
297 |
</p> |
298 |
|
299 |
<dl> |
300 |
<dt><code>-h</code>, <code>--help</code> |
301 |
<dd>Display a brief help message. |
302 |
<dt><code>-V</code>, <code>--version</code> |
303 |
<dd>Display the version of the program. |
304 |
<dt><code>-v</code>, <code>--verbose</code> |
305 |
<dd>Explain what is being done. |
306 |
<dt><code>--exclude=<var>PATH</var></code> |
307 |
<dd>The command |
308 |
<pre> |
309 |
jscoverage --exclude=<var>PATH</var> <var>SOURCE-DIRECTORY</var> <var>DESTINATION-DIRECTORY</var> |
310 |
</pre> |
311 |
copies <var>SOURCE-DIRECTORY</var> to <var>DESTINATION-DIRECTORY</var> |
312 |
recursively, but does not copy <var>SOURCE-DIRECTORY</var>/<var>PATH</var>. |
313 |
<var>PATH</var> must be a complete path relative to <var>SOURCE-DIRECTORY</var>. |
314 |
<var>PATH</var> can be a file or a directory (in which case the directory and |
315 |
its entire contents are skipped). This option may be given multiple times. |
316 |
<dt><code>--no-instrument=<var>PATH</var></code> |
317 |
<dd>The command |
318 |
<pre> |
319 |
jscoverage --no-instrument=<var>PATH</var> <var>SOURCE-DIRECTORY</var> <var>DESTINATION-DIRECTORY</var> |
320 |
</pre> |
321 |
copies <var>SOURCE-DIRECTORY</var> to <var>DESTINATION-DIRECTORY</var> |
322 |
recursively, but does not instrument any JavaScript code in |
323 |
<var>SOURCE-DIRECTORY</var>/<var>PATH</var>. <var>PATH</var> must be a complete |
324 |
path relative to <var>SOURCE-DIRECTORY</var>. <var>PATH</var> can be a |
325 |
(JavaScript) file or a directory (in which case any JavaScript files located |
326 |
anywhere underneath the directory are not instrumented). This option may be |
327 |
given multiple times. |
328 |
</dl> |
329 |
|
330 |
<h2>Query string options</h2> |
331 |
|
332 |
<p> |
333 |
When accessing <code>jscoverage.html</code> in a web browser, you may provide a |
334 |
query string consisting of options separated by ampersand (<code>&</code>) |
335 |
or semicolon (<code>;</code>). Any option not containing an equals sign |
336 |
(<code>=</code>) is considered to be a URL which will be loaded in the "Browser" |
337 |
tab. |
338 |
</p> |
339 |
|
340 |
<dl> |
341 |
<dt><code>u=<var>URL</var></code>, <code>url=<var>URL</var></code> |
342 |
<dd>Load <var>URL</var> in the "Browser" tab. (This is the same as specifying |
343 |
an option without an equals sign.) |
344 |
<dt><code>m=<var>BOOLEAN</var></code>, <code>missing=<var>BOOLEAN</var></code> |
345 |
<dd>Determines whether to initially display the "Missing" column in the "Summary" |
346 |
tab. <var>BOOLEAN</var> can be |
347 |
<code>true</code>, <code>t</code>, <code>yes</code>, <code>y</code>, <code>on</code>, <code>1</code> |
348 |
(to display the "Missing" column), or |
349 |
<code>false</code>, <code>f</code>, <code>no</code>, <code>n</code>, <code>off</code>, <code>0</code> |
350 |
(to hide the "Missing" column). By default, the "Missing" column is not displayed. |
351 |
</dl> |
352 |
|
353 |
<h2>Caveats</h2> |
354 |
|
355 |
<ul> |
356 |
<li>JSCoverage adds instrumentation to JavaScript code, which will slow down execution speed. |
357 |
Expect instrumented code to take at least twice as much time to run. |
358 |
<li>JSCoverage currently instruments only <code>.js</code> files; it does not instrument code in <code><script></code> |
359 |
elements in HTML files. |
360 |
<li>HTML files must use relative URLs to reference scripts. If you use an absolute URL, your page will reference |
361 |
the original uninstrumented script rather than the instrumented one, and no code coverage data will be collected. |
362 |
<li>JSCoverage instruments physical lines of code rather than logical JavaScript statements; it works bests with code |
363 |
that has exactly one statement per line. If you put multiple statements on a line, or split a line across two or more |
364 |
statements, you may get strange results. |
365 |
<li>JSCoverage uses frames. Some web pages that use frames may not function properly when run under JSCoverage, especially |
366 |
those which try to access the top-level frame (<code>window.top</code>, <code>target="_top"</code>, etc.). |
367 |
<li>JSCoverage is alpha software. Use at your own risk. |
368 |
</ul> |
369 |
|
370 |
<address> |
371 |
Copyright © 2007 siliconforks.com<br> |
372 |
Last updated August 26, 2007<br> |
373 |
<a href="mailto:jscoverage@siliconforks.com">jscoverage@siliconforks.com</a> |
374 |
</address> |
375 |
|
376 |
</body> |
377 |
</html> |