OLD | NEW |
| (Empty) |
1 <p>Test for watched expression</p> | |
2 | |
3 <p>To begin test, open DevTools, go the Scripts Panel | |
4 and then click this link: <a href="javascript:runTest()">[begin test]</a>. | |
5 | |
6 <p>Perform the following steps, and note the expected results: | |
7 | |
8 <ol> | |
9 | |
10 <li><p>After clicking the link above, you should now be paused in the body of | |
11 the test method, thanks to the <code>debugger</code> statement. | |
12 | |
13 <li><p>Add the following expressions to the "Watch Expressions" section of the | |
14 Scripts panel sidebar pane: "<code>this</code>", "<code>a</code>", | |
15 "<code>b</code>", "<code>c</code>" and "<code>d</code>". Do <b>NOT</b> enter the
quotes. | |
16 | |
17 <li><p>The values of the expressions as shown in the window should be | |
18 <code>Object</code> for <code>this</code>, <code>undefined</code> for | |
19 the <code>a</code>, <code>b</code>, and <code>c</code> variables, and a | |
20 value of <code>ReferenceError: d is not defined</code> | |
21 for the <code>d</code> variable. | |
22 | |
23 <li><p>Note that the value for <code>d</code> should not change for the life of | |
24 the test, as the variable <code>d</code> is never introduced in the program. | |
25 | |
26 <li><p>Step through the code, and you'll see the values of <code>a</code>, | |
27 <code>b</code>, and <code>c</code> change, as the variables are assigned. | |
28 Also note that as the scope changes due to the function invocation, values | |
29 will be changed to refer to their current scope. The <code>this</code> | |
30 expression will change when the method is invoked on the object constructed by | |
31 the test. | |
32 | |
33 <li><p>Click different stack frames in the Call Stack section to ensure the | |
34 expressions change value appropriately as the current stack frame changes. | |
35 | |
36 </ol> | |
37 | |
38 <script> | |
39 function runTest() { | |
40 | |
41 // a nested function | |
42 function subFunction() { | |
43 debugger; | |
44 var a = "a in subFunction()"; | |
45 | |
46 subSubFunction(); | |
47 | |
48 // another nested function | |
49 function subSubFunction() { | |
50 debugger; | |
51 var b = "b in subSubFunction()"; | |
52 } | |
53 } | |
54 | |
55 // a class | |
56 function aClass() { | |
57 this.x = "xxx"; | |
58 this.y = "yyy"; | |
59 } | |
60 | |
61 aClass.prototype.aMethod = function() { | |
62 debugger; | |
63 var c = "c in aMethod()"; | |
64 } | |
65 | |
66 // main logic | |
67 debugger; | |
68 | |
69 var a = "a in runTest()"; | |
70 var b = "b in runTest()"; | |
71 var c = "c in runTest()"; | |
72 | |
73 subFunction(); | |
74 | |
75 var object = new aClass(); | |
76 object.aMethod(); | |
77 | |
78 } | |
79 </script> | |
OLD | NEW |