| OLD | NEW |
| (Empty) |
| 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> | |
| OLD | NEW |