Summary: Stepping through `a(); b(); c();` it is unclear where we are and what is about to execute Test: 1. <script> 2. function a() { console.log("a"); } 3. function b() { console.log("b"); } 4. function c() { console.log("c"); } 5. a(); b(); c(); 6. <script> Steps to Reproduce: 1. Inspect test page 2. Set a breakpoint on line 5 3. Reload 4. Step over multiple times => Same line highlights, it is unclear what is about to execute Notes: - We have a line/column. We can highlight from that position onward. - I think Chrome does this as well
<rdar://problem/28181254>
- Safari just shows the line you are paused on with no info about where - Firefox just shows the line you are paused on with no info about where - Chrome shows the line you are paused on and highlights the pause point to the end of the line indicating what is next to be evaluated. This breaks down for multiline expressions. - Edge highlights the entire statement that is about to be evaluated. This breaks down when there are multiple subexpressions that are calls. I think the ideal highlight would be both the statement and the expression within the statement that is about to be evaluated. Take these example lines: a(); b(); c(); a() + b() + c(); The first has 3 statements, highlighting the entire statement makes it clear where you are stepping. The second has one statement with 3 calls that can be stepped into. It would be good to highlight exactly which call you are about to make. This should be doable on the frontend with an AST. Determine the (1) Statement the pause location is in and (2) determine if there is a CallExpression (or anything that can be stepped-into) at the current pause location. I might be overlooking something obvious. Likewise, the "highlight the line onward" approach is a very simple and easy approach that I should be able to get done quickly in the meantime.
Using Esprima (inside JS files, not yet inside <script> for HTML) we can highlight more accurately what statement/expression we are inside of / about to execute.
Created attachment 290113 [details] [IMAGE] Multiple Statements on one line
Created attachment 290114 [details] [IMAGE] Multiple Function Calls on One Line (step-in and step-out)
Created attachment 290115 [details] [IMAGE] Condition / Loop expressions
Created attachment 290116 [details] [IMAGE] Inside Function Call (looking at parent call frame)
Created attachment 290117 [details] [IMAGE] Multi-line statement
Created attachment 290118 [details] [PATCH] Proposed Fix Blocked by other patches that have not yet landed.
Comment on attachment 290118 [details] [PATCH] Proposed Fix r=me
<https://trac.webkit.org/changeset/206654>
Follow-up for better locations in call stacks with failures due to unary operations: <https://trac.webkit.org/changeset/206677>
*** Bug 161660 has been marked as a duplicate of this bug. ***