Home | History | Annotate | Download | only in inspector 
      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 
     13 the test method, thanks to the <code>debugger</code> statement.
     14 
     15 <li><p>Add the following expressions to the "Watch Expressions" section of the
     16 Scripts 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
     21 the <code>a</code>, <code>b</code>, and <code>c</code> variables, and a 
     22 value of <code>ReferenceError: Can't find variable: d</code>
     23 for the <code>d</code> variable.
     24 
     25 <li><p>Note that the value for <code>d</code> should not change for the life of 
     26 the 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.
     30 Also note that as the scope changes due to the function invocation, values
     31 will be changed to refer to their current scope.  The <code>this</code>
     32 expression will change when the method is invoked on the object constructed by
     33 the test.
     34 
     35 <li><p>Click different stack frames in the Call Stack section to ensure the
     36 expressions 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
     39 the 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
     41 ReferenceError like <code>d</code>, since these variables are defined in the
     42 <code>runTest()</code> function, and the expressions are being evaluated against
     43 the global object.
     44 
     45 <li><p>From the console, execute the statement "<code>a = 1</code>".  The
     46 watch expressions do not currently refresh, so the value for <code>a</code>
     47 should still be ReferenceError.
     48 
     49 <li><p>Click the "Refresh" button in the Watch Expressions section and the
     50 value 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,
     53 bring up web inspector, go to the Scripts panel.  You should see the same
     54 set of Watch Expressions in the list as you had when you last used web
     55 inspector.
     56 
     57 <li><p>Delete an expression by moving the mouse into the Watch Expression
     58 section, and clicking the X icon which appears to the right of an 
     59 expression (on hover).
     60 
     61 <li><p>Delete an expression by double-clicking anywhere on a top-level line
     62 of a watch expression, and changing the expression to an empty string or 
     63 nothing but white-space.
     64 
     65 <li><p>Modify an entry by double-clicking anywhere on a top-level line
     66 of a watch expression, and changing the expression.
     67 
     68 <li><p>Enter a new expression, "<code>new Date()</code>".  The value should be
     69 a toString() version of the date.  Repeatedly press the Refresh button to see
     70 the value updated with the current time.
     71 
     72 </ol>
     73 
     74 <script>
     75 function 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