Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't get TypeScript debugging to work to hit breakpoint. #371

Closed
mikepaggi opened this issue Dec 23, 2016 · 12 comments
Closed

Can't get TypeScript debugging to work to hit breakpoint. #371

mikepaggi opened this issue Dec 23, 2016 · 12 comments

Comments

@mikepaggi
Copy link

Actual Behavior

  1. VScode doesn't hit the breakpoint even though the code has been hit in the app and console when using .tsx file to generate the .js file.

Expected Behavior

  1. VScode would hit the breakpoint at the point the code has run in the .tsx file

Software versions

  • React-Native VS Code extension version: 0.2.4
  • VSCode version: 1.8.1
  • OS platform and version: 10.12.2
  • NodeJS version: 6.9.1
  • React Native version: 0.39.2

Outputs (Include if relevant)

  • Output of the Debug Console (View -> Toggle Debug Console):
    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 start --port 8081 ##########
    Scanning 661 folders for symlinks in /Users/mikepaggi/Projects/BrewLigan_RN/node_modules (17ms)
    ┌────────────────────────────────────────────────────────────────────────────┐
    │ 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
    /Users/mikepaggi/Projects/BrewLigan_RN

[12/23/2016, 5:28:31 PM] HMR Server listening on /hot

React packager ready.

######### Packager started. ##########
[12/23/2016, 5:28:31 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios
[12/23/2016, 5:28:31 PM] Initializing Packager
[12/23/2016, 5:28:31 PM] Building in-memory fs for JavaScript
[12/23/2016, 5:28:31 PM] Building in-memory fs for JavaScript (104ms)
[12/23/2016, 5:28:32 PM] Building Haste Map
[12/23/2016, 5:28:32 PM] Building Haste Map (375ms)
[12/23/2016, 5:28:32 PM] Initializing Packager (531ms)
[12/23/2016, 5:28:32 PM] Transforming files
[12/23/2016, 5:28:40 PM] Transforming files (8584ms)
######### The Bundle Cache was prewarmed. ##########
[12/23/2016, 5:28:41 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios (9759ms)
[12/23/2016, 5:28:54 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
[12/23/2016, 5:28:54 PM] Transforming files
[12/23/2016, 5:28:54 PM] Transforming files (243ms)
[12/23/2016, 5:28:54 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false (350ms)
[12/23/2016, 5:29:04 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
[12/23/2016, 5:29:04 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false (15ms)
[12/23/2016, 5:29:04 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
[12/23/2016, 5:29:04 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false (14ms)
Starting custom debugger by executing: echo A debugger is not needed: "/Users/mikepaggi/Projects/BrewLigan_RN"
[12/23/2016, 5:29:05 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
[12/23/2016, 5:29:05 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false (15ms)
[12/23/2016, 5:29:05 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false
[12/23/2016, 5:29:05 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false (52ms)
[12/23/2016, 5:29:08 PM] Processing asset request asset: app/assets/welcome_beer_background.png
[12/23/2016, 5:29:08 PM] Processing asset request asset: app/assets/welcome_beer_background.png (3ms)
[12/23/2016, 5:29:13 PM] Processing asset request asset: node_modules/react-native-router-flux/src/back_chevron.png
[12/23/2016, 5:29:13 PM] Processing asset request asset: node_modules/react-native-router-flux/src/back_chevron.png (2ms)
[12/23/2016, 5:30:28 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:30:28 PM] Transforming files
Starting custom debugger by executing: echo A debugger is not needed: "/Users/mikepaggi/Projects/BrewLigan_RN"
[12/23/2016, 5:30:36 PM] Transforming files (7414ms)
[12/23/2016, 5:30:36 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (7647ms)
[12/23/2016, 5:30:36 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:30:36 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (27ms)
[12/23/2016, 5:30:36 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:30:36 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false&hot=true (55ms)
[12/23/2016, 5:30:40 PM] HMR Client connected
[12/23/2016, 5:30:40 PM] Processing asset request asset: app/assets/welcome_beer_background.png
[12/23/2016, 5:30:40 PM] Processing asset request asset: app/assets/welcome_beer_background.png (3ms)
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:10 PM] HMR Server detected file change
[12/23/2016, 5:34:11 PM] Transforming files
[12/23/2016, 5:34:11 PM] Transforming files (0ms)
[12/23/2016, 5:34:11 PM] Transforming files
[12/23/2016, 5:34:11 PM] Transforming files (0ms)
[12/23/2016, 5:34:11 PM] Transforming files
[12/23/2016, 5:34:11 PM] Transforming files (0ms)
[12/23/2016, 5:34:11 PM] HMR Server sending update to client
[12/23/2016, 5:34:11 PM] HMR Server sending update to client
[12/23/2016, 5:34:11 PM] HMR Server sending update to client
[12/23/2016, 5:34:11 PM] Transforming files
[12/23/2016, 5:34:11 PM] Transforming files (0ms)
[12/23/2016, 5:34:11 PM] Transforming files
[12/23/2016, 5:34:11 PM] Transforming files (0ms)
[12/23/2016, 5:34:11 PM] HMR Server sending update to client
[12/23/2016, 5:34:11 PM] HMR Server sending update to client
######### Attaching to running React Native packager ##########
######### Checking react native is correctly setup. This may take a while... ##########
Checking if the correct react native is installed..
######### Packager is already running. ##########
[12/23/2016, 5:41:41 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios
[12/23/2016, 5:41:41 PM] Transforming files
[12/23/2016, 5:41:41 PM] Transforming files (193ms)
######### The Bundle Cache was prewarmed. ##########
[12/23/2016, 5:41:41 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios (298ms)
[12/23/2016, 5:41:51 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
[12/23/2016, 5:41:51 PM] Transforming files
[12/23/2016, 5:41:51 PM] Transforming files (250ms)
[12/23/2016, 5:41:51 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:41:51 PM] Transforming files
[12/23/2016, 5:41:52 PM] Transforming files (173ms)
Starting custom debugger by executing: echo A debugger is not needed: "/Users/mikepaggi/Projects/BrewLigan_RN"
[12/23/2016, 5:41:52 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
Starting custom debugger by executing: echo A debugger is not needed: "/Users/mikepaggi/Projects/BrewLigan_RN"
[12/23/2016, 5:41:52 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false (577ms)
[12/23/2016, 5:41:52 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (327ms)
[12/23/2016, 5:41:52 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (162ms)
[12/23/2016, 5:41:53 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:41:53 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (23ms)
[12/23/2016, 5:41:53 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:41:53 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false&hot=true (64ms)
[12/23/2016, 5:41:56 PM] HMR Client connected
[12/23/2016, 5:41:56 PM] Processing asset request asset: app/assets/welcome_beer_background.png
[12/23/2016, 5:41:56 PM] Processing asset request asset: app/assets/welcome_beer_background.png (3ms)
[12/23/2016, 5:42:01 PM] Symbolicating
[12/23/2016, 5:42:01 PM] Transforming files
[12/23/2016, 5:42:01 PM] Transforming files (113ms)
[12/23/2016, 5:42:01 PM] Symbolicating (211ms)
Starting custom debugger by executing: echo A debugger is not needed: "/Users/mikepaggi/Projects/BrewLigan_RN"
[12/23/2016, 5:42:03 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:42:03 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (16ms)
[12/23/2016, 5:42:03 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:42:03 PM] Requesting bundle bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false&hot=true (15ms)
[12/23/2016, 5:42:03 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false&hot=true
[12/23/2016, 5:42:03 PM] Requesting bundle bundle_url: /index.ios.map?platform=ios&dev=true&minify=false&hot=true (52ms)
[12/23/2016, 5:42:08 PM] HMR Client connected
[12/23/2016, 5:42:09 PM] Processing asset request asset: app/assets/welcome_beer_background.png
[12/23/2016, 5:42:09 PM] Processing asset request asset: app/assets/welcome_beer_background.png (2ms)

PASTE OUTPUT HERE
  • Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):
PASTE OUTPUT HERE
  • Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):
[Extension Host] starting server on  /var/folders/0b/mhmgs_t9423f4fjt37p6m_kh0000gn/T/vsc-ns-ext-8f3781ccd9e03c2f136cb9c718632c69.sock 
extensionHost.ts:293[Extension Host] starting TCP server false
extensionHost.ts:293[Extension Host] starting server as Unix || Windows Socket
nativeKeymap.ts:316'KeyboardEvent.keyIdentifier' is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5316065118650368 for more details.
extensionHost.ts:293[Extension Host] Error: Module version mismatch. Expected 50, got 48.
    at Error (native)
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:178:20)
    at Object.Module._extensions..node (module.js:583:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:178:20)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:12:24306)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mikepaggi/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/dtrace-provider/dtrace-provider.js:17:23)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)A.logExtensionHostMessage @ extensionHost.ts:293
extensionHost.ts:293[Extension Host] Error: Cannot find module './build/default/DTraceProviderBindings'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:12:24306)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mikepaggi/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/dtrace-provider/dtrace-provider.js:17:23)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:12:24306)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mikepaggi/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/bunyan/lib/bunyan.js:79:18)
    at Module._compile (module.js:556:32)A.logExtensionHostMessage @ extensionHost.ts:293
extensionHost.ts:293[Extension Host] Error: Cannot find module './build/Debug/DTraceProviderBindings'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:12:24306)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mikepaggi/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/dtrace-provider/dtrace-provider.js:17:23)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:12:24306)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mikepaggi/.vscode/extensions/vsmobile.vscode-react-native-0.2.4/node_modules/bunyan/lib/bunyan.js:79:18)
    at Module._compile (module.js:556:32)A.logExtensionHostMessage @ extensionHost.ts:293
@vladimir-kotikov
Copy link
Contributor

@mikepaggi, debugging react-native apps written in typescript doesn't work out of the box and ususally requires some additional steps to get it working. In short the steps are:

  1. make sure you're compiling tsx -> js using jsx: 'react' in tsconfig.json (looks like you're already using that option) and having source maps for compiled js files
  2. provide a special transformer to react-native packager, that will reuse existing tsx -> js maps when generating the map for final bundle - this basically means that you'll need to start packager manually with --transformer option as explained here (see "Enabling Sourcemaps" section)

Also, since debugging ts is heavily depends on project's configuration, It'd be really great if you could provide a project configuration (tsconfig.json, locations of source files) or a sample minimal app, where the problem exists

Also linking #328 as it might be relevant

@mikepaggi
Copy link
Author

mikepaggi commented Dec 29, 2016 •
edited by MSLaguana

@vladimir-kotikov yup I understand and I have my tsconfig.json configured since the beginning and I've added it below. Any other files you want to see?

"compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "jsx": "react",
        "rootDir": "app",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "sourceMap": true
    },
    "filesGlob": [
        "typings/index.d.ts",
        "app/**/*.ts",
        "app/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "node_modules"
    ],
    "compileOnSave": true
}

@mikepaggi
Copy link
Author

I might of messed up that JSON embedding....the embedding in github is a bit poor of a UX..

@MSLaguana
Copy link
Member

How are you compiling your typescript? And have you made sure to specify a custom transformer as mentioned at http://www.reactnative.tools/tutorials/2016/09/20/reactnative-ts to make sure that the sourcemaps are carried along with the rest of the bundling process?

@vladimir-kotikov
Copy link
Contributor

have you made sure to specify a custom transformer

Upd.: the transformer needs to be installed from github repo (npm i --save mhzed/react-native-sm-transformer) rather than from NPM - the version on NPM is outdated and doesn't contain a patch, we've sent to make it working with this extension

@mikepaggi
Copy link
Author

so i added the transformer that @vladimir-kotikov mentioned from that specific version. how do i know if it's running? was there anything else to do but install it? i want to setup so the debugger in vscode starts it up as part of the initial command to run the react native project on the simulator. do i need to modify anything there as well? just doesn't feel like the breakpoints are hitting still yet...

@vladimir-kotikov
Copy link
Contributor

vladimir-kotikov commented Dec 30, 2016 •
edited

was there anything else to do but install it?

Yep, you'll need to follow the other instructions from reactnative-ts tutorial, in particular to get transformer do its job you'll need to run standalone react-native packager with --transformer argument (as mentioned in the tutorial) - this might be automated using prelaunchTask in launch.json

After running the packager you'll need to use "Attach to packager" launch configuration (rather than "Debug iOS"/"Debug Android") to start debug session.

That's basically all. After these steps breakpoints should work in ts/tsx files.

how do i know if it's running?

That's tricky, but as a quick check, you can try to search ts/tsx filenames (including extension) in downloaded source map (e.g. at .vscode/.react/index.ios.map) - if transformer is running correctly, there should be entries, pointing to your original typescript files

@mikepaggi
Copy link
Author

@vladimir-kotikov when you say attach to the packager for debugging does that mean i need to start up a session in terminal for react native and this will attach onto it? i haven't used this before. otherwise i was wondering how do you apply the --transformer flags and location of the module giving this.

@mikepaggi
Copy link
Author

@MSLaguana i'm compiling my typescript in vscode using command + shift + b keyboard commands. I'm gathering i need to do what @vladimir-kotikov has mentioned but a bit confused on how to get started up with the attach to packager.

@vladimir-kotikov
Copy link
Contributor

@mikepaggi, sorry, I was unclear. Yes, exactly, you need to start react-native packager in a separate console session with --transformer option.

@mikepaggi
Copy link
Author

mikepaggi commented Jan 2, 2017 •
edited

@vladimir-kotikov ok that's what i thought. it would be nice if this was able to be customized as part of the vscode iOS / Android debug session though :-)

we can close this out.

@vladimir-kotikov
Copy link
Contributor

@mikepaggi, I agree with you. Ideally i'd like to have packager arguments configurable via some parameter in launch.json but technically it might be tricky to implement as we try to reuse already running packager instance and it's not possible to determine which arguments it has been started with.

@vladimir-kotikov vladimir-kotikov mentioned this issue Jan 5, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@vladimir-kotikov @mikepaggi @MSLaguana