116 lines
4.1 KiB
HTML
116 lines
4.1 KiB
HTML
<p>Test for
|
|
<a href="https://bugs.webkit.org/show_bug.cgi?id=27514">Bug 27514 - add support for watched expression</a>.
|
|
|
|
<p>To begin test, open web inspector, go the scripts panel
|
|
(enabling script debugging if necccessary), and then click this link:
|
|
<a href="javascript:runTest()">[begin test]</a>.
|
|
|
|
<p>Perform the following steps, and note the expected results:
|
|
|
|
<ol>
|
|
|
|
<li><p>After clicking the link above, you should now be paused in the body of
|
|
the test method, thanks to the <code>debugger</code> statement.
|
|
|
|
<li><p>Add the following expressions to the "Watch Expressions" section of the
|
|
Scripts panel sidebar pane: "<code>this</code>", "<code>a</code>",
|
|
"<code>b</code>", "<code>c</code>" and "<code>d</code>". Do <b>NOT</b> enter the quotes.
|
|
|
|
<li><p>The values of the expressions as shown in the window should a
|
|
<code>DOMWindow</code> for <code>this</code>, <code>undefined</code> for
|
|
the <code>a</code>, <code>b</code>, and <code>c</code> variables, and a
|
|
value of <code>ReferenceError: Can't find variable: d</code>
|
|
for the <code>d</code> variable.
|
|
|
|
<li><p>Note that the value for <code>d</code> should not change for the life of
|
|
the test, as the variable <code>d</code> is never introduced in the program.
|
|
|
|
<li><p>Step through the code, and you'll see the values of <code>a</code>,
|
|
<code>b</code>, and <code>c</code> change, as the variables are assigned.
|
|
Also note that as the scope changes due to the function invocation, values
|
|
will be changed to refer to their current scope. The <code>this</code>
|
|
expression will change when the method is invoked on the object constructed by
|
|
the test.
|
|
|
|
<li><p>Click different stack frames in the Call Stack section to ensure the
|
|
expressions change value appropriately as the current stack frame changes.
|
|
|
|
<li><p>Drive the debugger through the end of the outermost function, so that
|
|
the debugger is no longer in paused state. The values of
|
|
<code>a</code>, <code>b</code>, and <code>c</code> should all be a
|
|
ReferenceError like <code>d</code>, since these variables are defined in the
|
|
<code>runTest()</code> function, and the expressions are being evaluated against
|
|
the global object.
|
|
|
|
<li><p>From the console, execute the statement "<code>a = 1</code>". The
|
|
watch expressions do not currently refresh, so the value for <code>a</code>
|
|
should still be ReferenceError.
|
|
|
|
<li><p>Click the "Refresh" button in the Watch Expressions section and the
|
|
value for "<code>a</code>" should now be "<code>1</code>".
|
|
|
|
<li><p>Close down the browser, start it back up, traverse to a web site,
|
|
bring up web inspector, go to the Scripts panel. You should see the same
|
|
set of Watch Expressions in the list as you had when you last used web
|
|
inspector.
|
|
|
|
<li><p>Delete an expression by moving the mouse into the Watch Expression
|
|
section, and clicking the X icon which appears to the right of an
|
|
expression (on hover).
|
|
|
|
<li><p>Delete an expression by double-clicking anywhere on a top-level line
|
|
of a watch expression, and changing the expression to an empty string or
|
|
nothing but white-space.
|
|
|
|
<li><p>Modify an entry by double-clicking anywhere on a top-level line
|
|
of a watch expression, and changing the expression.
|
|
|
|
<li><p>Enter a new expression, "<code>new Date()</code>". The value should be
|
|
a toString() version of the date. Repeatedly press the Refresh button to see
|
|
the value updated with the current time.
|
|
|
|
</ol>
|
|
|
|
<script>
|
|
function runTest() {
|
|
|
|
// a nested function
|
|
function subFunction() {
|
|
debugger;
|
|
var a = "a in subFunction()";
|
|
|
|
subSubFunction();
|
|
|
|
// another nested function
|
|
function subSubFunction() {
|
|
debugger;
|
|
var b = "b in subSubFunction()";
|
|
}
|
|
}
|
|
|
|
// a class
|
|
function aClass() {
|
|
this.x = "xxx";
|
|
this.y = "yyy";
|
|
}
|
|
|
|
aClass.prototype.aMethod = function() {
|
|
debugger;
|
|
var c = "c in aMethod()";
|
|
}
|
|
|
|
// main logic
|
|
debugger;
|
|
|
|
var a = "a in runTest()";
|
|
var b = "b in runTest()";
|
|
var c = "c in runTest()";
|
|
|
|
subFunction();
|
|
|
|
var object = new aClass();
|
|
object.aMethod();
|
|
|
|
}
|
|
</script>
|