microsoft/vscode-react-native

breakpoints position is incorrect

fantasy525 opened this issue · 7 comments

Actual Behavior

  1. I set a red breakpoints at line 53,but it located at line 79
    gif

Expected Behavior

  1. red breakpoint located at line 53

Software versions

  • React-Native VS Code extension version: 0.8.0
  • VSCode version: 1.31.0
  • OS platform and version: Windows_NT x64 10.0.17.134
  • NodeJS version: 10.2.0
  • React Native version: 0.58.1
  • Expo SDK version (include if relevant):no

Outputs (Include if relevant)

  • Output of the Debug Console (View -> Toggle Debug Console):
PASTE OUTPUT HERE
  • Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):
[Info] Starting Packager

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   e:\work\RN\fantasy-music 

[Info] Packager started.

Loading dependency graph, done.
::ffff:192.168.1.100 - - [07/Feb/2019:08:54:26 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:192.168.1.100 - - [07/Feb/2019:08:54:41 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:192.168.1.100 - - [07/Feb/2019:08:54:56 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:192.168.1.100 - - [07/Feb/2019:08:55:06 +0000] "GET /onchange HTTP/1.1" 205 - "-" "okhttp/3.12.1"
 DELTA  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (777/777), done.

::ffff:192.168.1.100 - - [07/Feb/2019:08:55:08 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 200 - "-" "okhttp/3.12.1"
::ffff:192.168.1.100 - - [07/Feb/2019:08:55:15 +0000] "GET /onchange HTTP/1.1" 205 - "-" "okhttp/3.12.1"
::ffff:192.168.1.100 - - [07/Feb/2019:08:55:16 +0000] "GET /index.delta?platform=android&dev=true&minify=false&revisionId=85cec1c5d44c70e4 HTTP/1.1" 200 - "-" "okhttp/3.12.1"
 DELTA  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

  • Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):
PASTE OUTPUT HERE

Hi @fantasy525 and thanks for reaching us. Is it https://github.com/fantasy525/fantasy-music project? Is it ready to be used by us to reproduce your problem? Do you have any instructions for us to how get started with it?

@ruslan-bikkinin Yes ,you can clone it ,then just do this:
1.yarn install
2. react-native run-android

@ruslan-bikkinin I'm not sure which line of code is going to happen ,but I have met many times.and you can also see this issues

@ruslan-bikkinin I type 'debugger' in my file,but finally the breakpoint stops in other file
image

other file:
image

and I've given up on the red breakpoint.I want to type 'debugger' manually.but Why is my debugging experience so bad? Today red breakpoint is still incorrect and sometimes program still can't stop at breakpoint...

@ruslan-bikkinin Hi,I think it is possible that the cache of the previous code caused the breakpoint to be placed incorrectly.just a guess...,I hope you can solve the problem as soon as possible, thank you!

I have the same problem

Hi @fantasy525 , I tried to debug your application with Chrome debugger on Windows and Linux and it looks like there are some problems with source maps inside React Native. As you can see at this GIF I was able to reproduce the problem in Chrome Debugger without using VS Code at all. I would recommend you to create an issue in React Native repo and describe your situation there, also add a link to this issue and attach this GIF there as well. Feel free to re-open if you have any updates in the future.
chrome_debugger