• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<p>Test for watched expression</p>
2
3<p>To begin test, open DevTools, go the Scripts Panel
4and 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
11the test method, thanks to the <code>debugger</code> statement.
12
13<li><p>Add the following expressions to the "Watch Expressions" section of the
14Scripts 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
19the <code>a</code>, <code>b</code>, and <code>c</code> variables, and a
20value of <code>ReferenceError: d is not defined</code>
21for the <code>d</code> variable.
22
23<li><p>Note that the value for <code>d</code> should not change for the life of
24the 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.
28Also note that as the scope changes due to the function invocation, values
29will be changed to refer to their current scope.  The <code>this</code>
30expression will change when the method is invoked on the object constructed by
31the test.
32
33<li><p>Click different stack frames in the Call Stack section to ensure the
34expressions change value appropriately as the current stack frame changes.
35
36</ol>
37
38<script>
39function 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>
80