• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<p>Test for
2<a href="https://bugs.webkit.org/show_bug.cgi?id=27514">Bug 27514 - add support for watched expression</a>.
3
4<p>To begin test, open web inspector, go the scripts panel
5(enabling script debugging if necccessary), and then click this link:
6<a href="javascript:runTest()">[begin test]</a>.
7
8<p>Perform the following steps, and note the expected results:
9
10<ol>
11
12<li><p>After clicking the link above, you should now be paused in the body of
13the test method, thanks to the <code>debugger</code> statement.
14
15<li><p>Add the following expressions to the "Watch Expressions" section of the
16Scripts panel sidebar pane: "<code>this</code>", "<code>a</code>",
17"<code>b</code>", "<code>c</code>" and "<code>d</code>". Do <b>NOT</b> enter the quotes.
18
19<li><p>The values of the expressions as shown in the window should a
20<code>DOMWindow</code> for <code>this</code>, <code>undefined</code> for
21the <code>a</code>, <code>b</code>, and <code>c</code> variables, and a
22value of <code>ReferenceError: Can't find variable: d</code>
23for the <code>d</code> variable.
24
25<li><p>Note that the value for <code>d</code> should not change for the life of
26the test, as the variable <code>d</code> is never introduced in the program.
27
28<li><p>Step through the code, and you'll see the values of <code>a</code>,
29<code>b</code>, and <code>c</code> change, as the variables are assigned.
30Also note that as the scope changes due to the function invocation, values
31will be changed to refer to their current scope.  The <code>this</code>
32expression will change when the method is invoked on the object constructed by
33the test.
34
35<li><p>Click different stack frames in the Call Stack section to ensure the
36expressions change value appropriately as the current stack frame changes.
37
38<li><p>Drive the debugger through the end of the outermost function, so that
39the debugger is no longer in paused state.  The values of
40<code>a</code>, <code>b</code>, and <code>c</code> should all be a
41ReferenceError like <code>d</code>, since these variables are defined in the
42<code>runTest()</code> function, and the expressions are being evaluated against
43the global object.
44
45<li><p>From the console, execute the statement "<code>a = 1</code>".  The
46watch expressions do not currently refresh, so the value for <code>a</code>
47should still be ReferenceError.
48
49<li><p>Click the "Refresh" button in the Watch Expressions section and the
50value for "<code>a</code>" should now be "<code>1</code>".
51
52<li><p>Close down the browser, start it back up, traverse to a web site,
53bring up web inspector, go to the Scripts panel.  You should see the same
54set of Watch Expressions in the list as you had when you last used web
55inspector.
56
57<li><p>Delete an expression by moving the mouse into the Watch Expression
58section, and clicking the X icon which appears to the right of an
59expression (on hover).
60
61<li><p>Delete an expression by double-clicking anywhere on a top-level line
62of a watch expression, and changing the expression to an empty string or
63nothing but white-space.
64
65<li><p>Modify an entry by double-clicking anywhere on a top-level line
66of a watch expression, and changing the expression.
67
68<li><p>Enter a new expression, "<code>new Date()</code>".  The value should be
69a toString() version of the date.  Repeatedly press the Refresh button to see
70the value updated with the current time.
71
72</ol>
73
74<script>
75function runTest() {
76
77    // a nested function
78    function subFunction() {
79        debugger;
80        var a = "a in subFunction()";
81
82        subSubFunction();
83
84        // another nested function
85        function subSubFunction() {
86            debugger;
87            var b = "b in subSubFunction()";
88        }
89    }
90
91    // a class
92    function aClass() {
93        this.x = "xxx";
94        this.y = "yyy";
95    }
96
97    aClass.prototype.aMethod = function() {
98        debugger;
99        var c = "c in aMethod()";
100    }
101
102    // main logic
103    debugger;
104
105    var a = "a in runTest()";
106    var b = "b in runTest()";
107    var c = "c in runTest()";
108
109    subFunction();
110
111    var object = new aClass();
112    object.aMethod();
113
114}
115</script>
116