typescript breakpoints not working #441

seyaobey · 2017-04-18T12:37:18Z

Actual Behavior

In debug breakpoints are not hit inside typescript files.

I have followed the suggestions from #328 and #402 without success. (I have downloaded the ReactNativeTS sample, I was able to hit the breakpoints only once...since then I have not been able to repeat my success...)

In tsconfig.json, I have these options:

"inlineSourceMap": true,
"sourceRoot": "/src"

In .babelrc I have:

{
    "presets": ["react-native"],
    "sourceMaps": true
}

I have also made use of react-native-sm-transformer

Expected Behavior

Breakpoints should be hit

Software versions

React-Native VS Code extension version:
VSCode version: 1.11.2
OS platform and version: windows 10 Enterprise
NodeJS version: v6.10.2
React Native version: 0.43.3

Outputs (Include if relevant)

Output of the Debug Console (View -> Toggle Debug Console):

:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Nexus7(AVD) - 7.0' for app:debug
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 15.695 secs
Running C:\Users\eobey\AppData\Local\Android\android-sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
adb server version (35) doesn't match this client (36); killing...
* daemon started successfully *
Starting the app on emulator-5554 (C:\Users\eobey\AppData\Local\Android\android-sdk/platform-tools/adb -s emulator-5554 shell am start -n com.wallet/.MainActivity)...
Starting: Intent { cmp=com.wallet/.MainActivity }
[vscode-react-native] Finished executing: react-native.cmd run-android
[vscode-react-native] Executing command: adb -s emulator-5554 shell am broadcast -a "com.wallet.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Broadcasting: Intent { act=com.wallet.RELOAD_APP_ACTION (has extras) }
Broadcast completed: result=0
[vscode-react-native] Finished executing: adb -s emulator-5554 shell am broadcast -a "com.wallet.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 42135
(node:12284) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
Running application "wallet" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

######### [Internal] [Info] Extension messaging server started at \\?\pipe\vscode-reactnative-679f39c503dc27b9ff694c72887914f8c9628e215d728c6466a855047f8bbcda. ##########
######### [Internal] [Info] Handling message: GET_PACKAGER_PORT ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
######### [Internal] [Info] Handling message: START_PACKAGER ##########
Getting exponent dependecy.
######### Checking react native is correctly setup. This may take a while... ##########
Checking if the correct react native is installed..
######### Starting Packager ##########
######### Executing command: react-native.cmd start --port 8081 ##########
Scanning 563 folders for symlinks in c:\Development\wallet\node_modules (29ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   c:\Development\wallet 


React packager ready.

######### Packager started. ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
######### [Internal] [Info] Handling message: PREWARM_BUNDLE_CACHE ##########
######### [Internal] [Info] About to get: http://localhost:8081/index.android.bundle?platform=android ##########
Loading dependency graph, done.
Bundling `index.android.js`  100.0% (404/404), done.
######### The Bundle Cache was prewarmed. ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
Starting custom debugger by executing: echo A debugger is not needed:  "c:\Development\wallet"
######### [Internal] [Info] Handling message: START_MONITORING_LOGCAT ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
######### [Internal] [Info] Handling message: SEND_TELEMETRY ##########
Starting custom debugger by executing: echo A debugger is not needed:  "c:\Development\wallet"
Bundling `index.android.js`  100.0% (404/404), done.

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

Overwriting extension <<.jsx>> to now point to mime <<text/x-jsx>>
2mime.ts:59Overwriting extension <<.jsx>> to now point to mime <<text/javascript>>
keybindingResolver.ts:129Conflict detected, command `workbench.action.debug.pause` cannot be triggered due to cordova.build
keybindingResolver.ts:129Conflict detected, command `workbench.action.debug.run` cannot be triggered due to cordova.run

The text was updated successfully, but these errors were encountered:

saeedtabrizi · 2017-04-19T11:59:44Z

@seyaobey the same problem here :(

ajonno · 2017-04-30T12:32:41Z

i can't set breakpoints either and would dearly love to for obvious reasons. come on Microsoft help us all out ! :-)

matthewchung74 · 2017-05-15T03:53:05Z

same problem here :(

vladimir-kotikov · 2017-06-08T07:34:58Z

@seyaobey thanks for reporting and sorry for silence. We're aware of the promlem and working on the fix.

mindrage · 2017-06-08T08:48:07Z

Awesome!, this been troubling me alot lately, done alot of changes to some config files to just workaround for some location feedback (going after stacktraces).

Just for clarification when/if this is done, could you possibly link a gist or something of the [tsconfig.json, .babelrc, jsconfig.json, package.json] from the example you tested/confirmed it on?

vladimir-kotikov · 2017-06-08T17:15:32Z

@mindrage absolutely, but AFAIK it won't require any specific configuration. I'll update the thread w/ actual information ance it's ready

tslearn · 2017-06-09T03:24:50Z

exciting, this issue troubles me a lot.

mindrage · 2017-06-13T15:24:29Z

Any updates on this? Wouldn't mind attempt to try to track this down myself, but is there any more information revealed about this issue?

mindrage · 2017-06-26T06:09:17Z

Is this completely unsolvable? It's feels like it's been still for quite a while.
Havent really been able to find a solution to this yet myself, anyone gotten any further progress with this?

markmadlangbayan · 2017-06-26T14:55:51Z

Any word on this? I'm having the same issue with a sample code.

lukewlms · 2017-07-20T19:45:50Z

@markmadlangbayan @mindrage recommend following this RN issue . TS debugging is currently broken.

vladimir-kotikov · 2017-07-26T09:47:12Z

@lukecwilliams responding here as this is the most recent issue with typescript sourcemaps - there is a workaround, that doesn't rely on RN sourcemaps pipeline and additional transformers - see #461. It'll be available once we get new version of extension published

lukewlms · 2017-07-26T16:11:58Z

@vladimir-kotikov Thank you, that's exciting!

ambientlight · 2017-08-06T10:26:21Z

@vladimir-kotikov so 0.4.0, 0.4.1 is out. I have update react native from latest working for me - 0.41.2 to 0.47.0.
Breakpoints not working for me now. (i was pretty excited)
Is there anything I should change in the project?
I have also tried removing .vscode and regenerating the launch.json and related from F5.

Resulting index.ios.js contains the expected (i guess) source map link:

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguaW9zLmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9odXJkZW4vRGV2ZWxvcGVyL2xlYW4vY29kZS9CYWxsY2FzdC9tb2JpbGUvc3JjLyIsInNvdXJjZXMiOlsiaW5kZXguaW9zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7OztHQUlHO0FBRUgsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUIsTUFBTSxFQUFDLFNBQVMsRUFBQyxHQUFHLEtBQUssQ0FBQTtBQUN6QixPQUFPLEVBQ0gsVUFBVSxFQUNWLElBQUksRUFDSixJQUFJLEdBQ1AsTUFBTSxjQUFjLENBQUE7QUFVckIsTUFBTSxDQUFDLE9BQU8sVUFBVyxTQUFRLFNBQXVCO0lBQ3BELE1BQU07UUFDRixPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3JCLE9BQU8sQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckIsTUFBTSxDQUFDLENBQ0gsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUMxQjtnQkFBQSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQ3JCOztnQkFDSixFQUFFLElBQUksQ0FDVjtZQUFBLEVBQUUsSUFBSSxDQUFDLENBQ1YsQ0FBQztJQUNOLENBQUM7Q0FDSjtBQUVELE1BQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7SUFDN0IsU0FBUyxFQUFFO1FBQ1AsSUFBSSxFQUFFLENBQUM7UUFDUCxjQUFjLEVBQUUsUUFBUTtRQUN4QixVQUFVLEVBQUUsUUFBUTtRQUNwQixlQUFlLEVBQUUsU0FBUztLQUNoQjtJQUVkLElBQUksRUFBRTtRQUNGLFFBQVEsRUFBRSxFQUFFO1FBQ1osU0FBUyxFQUFFLFFBQVE7UUFDbkIsTUFBTSxFQUFFLEVBQUU7S0FDQTtDQUNqQixDQUFDLENBQUMifQ==

tsconfig.json

{
    "compilerOptions": {
        "target": "es2015",
        "jsx": "react-native",
        "outDir": "build",
        "rootDir": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,

        "forceConsistentCasingInFileNames": true,
        "inlineSourceMap": true,
        "sourceRoot": "src"
    },

    "files": [
        "src/index.android.tsx",
        "src/index.ios.tsx"
    ],
    "compileOnSave": true
}

.babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [],
  "sourceMaps": true
}

.vscode launch.json hasn't been unchanged except added tsc prelaunch task.
Debugging will produce the expected output in console:

[vscode-react-native] Finished executing: react-native run-ios --simulator iPhone 5s --project-path ios
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application

ambientlight · 2017-08-06T11:11:36Z

@vladimir-kotikov ignore it.

Works for me on 0.42.0 and a bit later on 0.47.1...
Migrating RN was a bit tricky... confused me initially.

vladimir-kotikov added the typescript label May 31, 2017

vladimir-kotikov mentioned this issue Jun 8, 2017

Support VSCODE , React Native 0.44.0 and Typescript debugging #445

Closed

vladimir-kotikov added the Hi Pri label Jun 8, 2017

vladimir-kotikov mentioned this issue Jun 27, 2017

Allow to set breakpoints in original source files #461

Merged

vladimir-kotikov closed this as completed in #461 Jun 27, 2017

This was referenced Jul 26, 2017

Can't add breakpoint, source maps issue? #328

Closed

How to properly use this extension with TypeScript #402

Closed

lukewlms mentioned this issue Jul 26, 2017

Can't debug TypeScript code because of the new source map generator in 0.42 facebook/react-native#12705

Closed

vladimir-kotikov added this to the 0.4.0 milestone Jul 28, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

typescript breakpoints not working #441

typescript breakpoints not working #441

seyaobey commented Apr 18, 2017

saeedtabrizi commented Apr 19, 2017 •

edited

ajonno commented Apr 30, 2017

matthewchung74 commented May 15, 2017

vladimir-kotikov commented Jun 8, 2017

mindrage commented Jun 8, 2017

vladimir-kotikov commented Jun 8, 2017

tslearn commented Jun 9, 2017

mindrage commented Jun 13, 2017

mindrage commented Jun 26, 2017

markmadlangbayan commented Jun 26, 2017

lukewlms commented Jul 20, 2017

vladimir-kotikov commented Jul 26, 2017

lukewlms commented Jul 26, 2017

ambientlight commented Aug 6, 2017 •

edited

ambientlight commented Aug 6, 2017 •

edited

typescript breakpoints not working #441

typescript breakpoints not working #441

Comments

seyaobey commented Apr 18, 2017

Actual Behavior

Expected Behavior

Software versions

Outputs (Include if relevant)

saeedtabrizi commented Apr 19, 2017 • edited

ajonno commented Apr 30, 2017

matthewchung74 commented May 15, 2017

vladimir-kotikov commented Jun 8, 2017

mindrage commented Jun 8, 2017

vladimir-kotikov commented Jun 8, 2017

tslearn commented Jun 9, 2017

mindrage commented Jun 13, 2017

mindrage commented Jun 26, 2017

markmadlangbayan commented Jun 26, 2017

lukewlms commented Jul 20, 2017

vladimir-kotikov commented Jul 26, 2017

lukewlms commented Jul 26, 2017

ambientlight commented Aug 6, 2017 • edited

ambientlight commented Aug 6, 2017 • edited

saeedtabrizi commented Apr 19, 2017 •

edited

ambientlight commented Aug 6, 2017 •

edited

ambientlight commented Aug 6, 2017 •

edited