Bug 161658 – Web Inspector: Stepping through `a(); b(); c();` it is unclear where we are and what is about to execute

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

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

[Radar WebKit Bug Importer]

<rdar://problem/28181254>

[Joseph Pecoraro]

- 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.

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

Created attachment 290113 [details]
[IMAGE] Multiple Statements on one line

[Joseph Pecoraro]

Created attachment 290114 [details]
[IMAGE] Multiple Function Calls on One Line (step-in and step-out)

[Joseph Pecoraro]

Created attachment 290115 [details]
[IMAGE] Condition / Loop expressions

[Joseph Pecoraro]

Created attachment 290116 [details]
[IMAGE] Inside Function Call (looking at parent call frame)

[Joseph Pecoraro]

Created attachment 290117 [details]
[IMAGE] Multi-line statement

[Joseph Pecoraro]

Created attachment 290118 [details]
[PATCH] Proposed Fix

Blocked by other patches that have not yet landed.

[Geoffrey Garen]

Comment on attachment 290118 [details]
[PATCH] Proposed Fix

r=me

[Joseph Pecoraro]

<https://trac.webkit.org/changeset/206654>

[Joseph Pecoraro]

Follow-up for better locations in call stacks with failures due to unary operations:
<https://trac.webkit.org/changeset/206677>

[Joseph Pecoraro]

*** Bug 161660 has been marked as a duplicate of this bug. ***