Home | History | Annotate | Download | only in manual_tests 
      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>
     80