typescript breakpoints not working

seyaobey commented 7 years ago

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

saeedtabrizi commented 7 years ago

@seyaobey the same problem here :(

ajonno commented 7 years ago

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

matthewchung74 commented 7 years ago

same problem here :(

vladimir-kotikov commented 7 years ago

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

mindrage commented 7 years ago

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 commented 7 years ago

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

tslearn commented 7 years ago

exciting, this issue troubles me a lot.

mindrage commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

lukewlms commented 7 years ago

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

vladimir-kotikov commented 7 years ago

@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 commented 7 years ago

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

ambientlight commented 7 years ago

@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 commented 7 years ago

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

microsoft / vscode-react-native