hidden-evals.html   [plain text]

<p><b>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=30212">Bug 30212</a> - Each JS execution in console adds extra item into "scripts" combo</b>

<p>The following manual test creates functions via <tt>eval()</tt> and the 
<tt>Function()</tt> constructor, some functions are named using the 
<code>//@sourceURL=</code> directive, some aren't.  Some contain
<tt>debugger</tt> commands, some don't.

<p>The functions named <tt>f_named_X</tt> are 'named' via the 
<code>//@sourceURL=</code> directive, the ones named <tt>f_unnamed_X</tt>
are not.  The 'named' functions should show up in the Scripts select element used 
to select a resource/script to view, the 'unnamed' ones should not.

<ul>
<li><p>open this page with Web Inspector
<li><p>switch to the Scripts panel, enabling debug if required
<li><p>the available scripts in the select element should be:
<ul>
<li>(program): f_named_1.eval
<li>(program): f_named_2.eval
<li>(program): f_named_3.eval
<li>hidden-evals.html
</ul>
<li><p>click this button: <input id=button type=button value="click me">
<li><p>debugger should stop in the <code>clickHandler</code> function
<li><p>at this point, start stepping <b>into</b> the code
<li><p>you should be able to step into functions <code>f_unnamed_1()</code>
and <code>f_unnamed_2()</code>.  There are no resource/scripts in the 
select element that contain these functions, until you actually are paused 
in them.  At that point, entries for these functions will be in the select element,
named: "(program)".  After pausing in both functions, there will be two "(program)"
entries.
<li><p>you should be able to use the next/prev buttons (to the left of the select element)
to switch to other resources/scripts that have been opened, including the ones
containing these functions
<li><p>you should be able to click on the functions that exist in the 'hidden'
resources from the Call Stack, and be shown the source; click around the
stack trace entries to verify
<li><p>rather than stepping into the <code>f_named_3()</code> call, press the
resume button
<li><p>the debugger should stop in <code>f_named_3()</code> because of the
<code>debugger</code> command
<li><p>rather than stepping into the <code>f_unnamed_3()</code> call, press the
resume button
<li><p>the debugger should stop in <code>f_unnamed_3()</code> because of the
<code>debugger</code> command.  At this point, a third "(program)" entry for
this function is added to the select element.
</ul>

<script>

function doNothing() { /* allows multi-line functions, easier to debug */ };

eval([
    "function f_named_1() {",
    "   doNothing();",
    "   return 'named_1';",
    "}",
    "//@sourceURL=f_named_1.eval"
].join("\n"));

eval([
    "function f_unnamed_1() {",
    "   doNothing();",
    "   return 'unnamed_1';",
    "}"
].join("\n"));

f_named_2 = Function([
    "",
    "   doNothing();",
    "   return 'named_2';",
    "//@sourceURL=f_named_2.eval"
].join("\n"));

f_unnamed_2 = Function([
    "",
    "   doNothing();",
    "   return 'unnamed_2';"
].join("\n"));

f_named_3 = Function([
    "",
    "   debugger;",
    "   doNothing();",
    "   return 'named_3';",
    "//@sourceURL=f_named_3.eval"
].join("\n"));

f_unnamed_3 = Function([
    "",
    "   debugger;",
    "   doNothing();",
    "   return 'unnamed_3';"
].join("\n"));

var button = document.getElementById("button");

button.addEventListener("click", clickHandler, false);

function clickHandler() {
    debugger;
    f_named_1();
    f_unnamed_1();
    f_named_2();
    f_unnamed_2();
    
    // press "resume" at this point
    console.log("press resume before calling f_named_3()");
    f_named_3();
    
    // press "resume" at this point
    console.log("press resume before calling f_unnamed_3()");
    f_unnamed_3();
}

</script>
<!-- End -->