microsoft / vscode-chrome-debug-core

A library for implementing VS Code debug adapters for targets that implement the Chrome Debugging Protocol.
Other
157 stars 119 forks source link

Redundant inline breakpoints on Expo app debugging in VS Code #531

Open RedMickey opened 5 years ago

RedMickey commented 5 years ago

Hi, we are the development team of VS Code extension for debugging React Native apps (vscode-react-native). We implemented inline breakpoint support in our extension and this approach works without problems, but we found out a feature on Expo apps debugging in VS Code Insiders. It seems that inline breakpoints are set on React components markup, besides JS code. So I describe our steps for VS Code Insiders and Google Chrome:

  1. Launch Expo debugging in VS Code Insiders / attach to Expo app in Google Chrome
  2. Set the first breakpoints
Debugging Expo in Google Chrome Debugging Expo in VS Code
Screen Shot 2019-10-08 at 12 44 56
In Google Chrome inline breakpoints aren't set automatically at all.
Screen Shot 2019-10-08 at 12 21 11
Inactive breakpoints are set automatically.
  1. Set more breakpoints, including inline ones and try to debug
Debugging Expo in Google Chrome Debugging Expo in VS Code
Screen Shot 2019-10-08 at 12 32 30 There aren't inline breakpoints. Screen Shot 2019-10-08 at 12 25 54As seen some of breakpoints are set on React components markup and they can't be reached.
I marked unreachable breakpoints (red check mark).

I attached Expo app debugging logs.

We suppose that inline breakpoints functional should work in VS Code Insiders the same way as in Google Chrome. Could you please help us to understand what could cause such a behavior?

roblourens commented 5 years ago

If you set a breakpoint on the line with <AppLoading in chrome devtools, does it show a breakpoint there? It's possibly actually a valid bp location based on how the code is transpiled. The problem is that you are getting breakpoint decorations on different lines from where the breakpoint was requested.

@isidorn is this a vscode problem or a debug adapter problem? If the debug adapter is returning breakpoints on different lines is vscode supposed to filter them out?

isidorn commented 5 years ago

@roblourens I think this is a vscode problem. We should never show inline breakpoint on first character if that is the only breakpoint location on that line. Can you please open an issue on the vscode side regarding this and I can look into fixing it. Thanks a lot!

RedMickey commented 5 years ago

@roblourens, @isidorn, I set a breakpoint on <AppLoading in Google Chrome and the debugger stopped on that breakpoint. But when I did the same in VS Code, this breakpoint was ignored on debugging.

Debugging Expo in Google Chrome Debugging Expo in VS Code
The first breakpoint is captured. Screen Shot 2019-10-09 at 14 21 12

The second breakpoint is captured. Screen Shot 2019-10-09 at 14 21 25
The first breakpoint is captured. Inline breakpoints are set automatically. Screen Shot 2019-10-09 at 14 23 36

The second breakpoint is missed. The third breakpoint is captured. Screen Shot 2019-10-09 at 14 23 54
roblourens commented 5 years ago

@isidorn the problem is, you requested breakpoint locations for line 14, and the debug adapter returned locations that are on lines 15, 16, etc. The debug adapter should probably filter those out, but should vscode also be filtering those out?

isidorn commented 5 years ago

@roblourens ahaa. Well I think if I ask for location on line 17 that I should get locations only on that line. Let's start with just the adapter filtering them out, and if needed later I can also add a filter on the vscode side (would not for now)