How can I attach a debugger to debug the typescript part (react/vue) of the new “lite” templates?
For regular SPA projects with npm there are two ways I know of:
either debug from VSCode - run SS and npm start and then attach to Chrome
debug within Chrome, as the typescript source maps are available somehow
With the new “lite” templates debugging the server-side is easy, but what to do with Typescript/React/Vue debugging? I tried to run SS from command-line, and then attach VS Code to port 5000, but the breakpoints won't hit (not even for the compiled JS files)
There’s no source maps support in the Vue/React lite Project Templates so you won’t be able to debug the original .ts source files and you’ll need to debug the bundled .js instead from Chrome’s WebInspector.
Related
I am trying to debug a nodejs + nest application in IntelliJ, I am able to start the application using two types of configs.
Using Yarn (through NPM configuration template in intellij)
Using Node (I am not sure but when I use the main.js from dist folder then I get some debug point but it is useless as it is not pointing to my actual code base)
Debugger doesn't work for any of the above options!
I am posting screen shots of both the configurations.
New to Node + IntelliJ, so not sure what did I do wrong in both the configurations! Any help would be appreciated.
Intellij Version is 2020.3.3 And NodeJS application exposes several APIs, I am trying to call the APIs using a Postman and expect it to debug.
Debugging in both main.ts and controllers works for me when using the configuration below:
See also https://github.com/nestjs/nest/issues/993 for some recipes
Is is possible to debug a wasm module through node?
I am using vscode and compiling with emcc -g4 --source-map-base. Putting a breakpoint in the C source file is ineffective. Trying to debug with node inspector node --inspect through Chrome doesn't allow me to use breakpoints either, although it is possible to debug wasm modules from regular web pages in Chrome.
I am using nodejs v10.13.
WebAssembly Source Maps is supported by both Firefox Developer Edition (in screenshot) and Chrome 71.
What you forgot is, to include a path to the source map. For example:
emcc -g4 --source-map-base http://localhost:8000/
Every source files path is prefixed with http://localhost:8000/ with this option. So replace this with your source directory.
So, I managed to get something working. I installed:
Node v11.4
Chrome beta 71 (because of this)
And launched the node process with node --inspect, for attaching the Chrome DevTools.
Moreover, in my code, instead of doing WebAssembly.instantiate in one shot (supplying directly the bitcode), I do it in two steps: WebAssembly.compile first, and then WebAssembly.instantiate. As soon as compile gets executed, there are some "wasm" sources being made available in the DevTools. This is the WebAssembly in wast text form, in which breakpoints can be set before it gets executed by instantiate.
But you can't debug from the original C-source files, Chrome DevTools only shows the decompiled wast yet. This feels like the stone age of debugging, but it is still possible to debug.
Edit 2020: This article https://developers.google.com/web/updates/2019/12/webassembly seems to indicate you should now be able to debug in devtools, from the original C source files. I did not try it, though.
I would like to know whether it is possible to have third-party javascript libraries' source code available whilst debugging.
FYI, I use npm/nodejs and the angular CLI (which itself relies on Webpack).
Example libraries (together with their source languages) that I would like to have available during debugging are:
Angular 2 (typescript)
RxJS (typescript)
I guess what I want to achieve is related to configuring source maps.
Any comment or guidance welcome.
edit: Can someone please advise how to configure the angular CLI in order to have angular and RxJS typescript sources available whilst debugging?
Yes, to be able to set breakpoints in source files while debugging, you need sourcemaps. But this is not the thing that can be configured in the IDE, you need to set up your build tools accordingly. The only thing that should be configured on the IDE end is the run configuration - you might need to specify Remote URL mappings for your project directories
To complement lena's answer and as of #angular/cli version's 6.1 is it now possible to output source maps for vendor libraries using the following syntax:
ng serve --source-map --vendor-source-map
It also works for the ng build command.
See also: https://blog.ninja-squad.com/2018/07/27/angular-cli-6.1/
It is then possible to debug third-party libraries using an IDE or the browser.
The tutorial of angular2 with dart never actually uses a real server, always pub serve.
How can I debug my dart code when using a real server like NodeJS? Atm I'm just getting errors like a.b.Y is not defined(in the browser), which is completely useless.
Is there some kind of source mapping for dart2js?
Ok after building with pub build --mode=debug. The dart source is available in chrome dev tools (it shows "source mapped from main.dart.js" for all my dart files. Breakpoints are not stopping tho.
Sounds like the problem I had with another Dart library when I tried running in another server via NGINX. Is your pubspec.yaml properly set up?
My issue was that I wasn't using the transformers or entry_points section of the pubspec.yaml which generates definitions of start up classes.
https://stackoverflow.com/a/38284430/174368
Is your pubspec.yaml similar to the Dart Angular2 example below?
https://angular.io/docs/dart/latest/quickstart.html#!#add-config-files
Also make sure you serve the build directory via nodejs because it'll edit your index.html put it in the build directory and add automatically other link/script lines to include other files.
This might also be part of the reason you can't see your breakpoints. That happened to me too.
I recently started to use the new "devtool" module for debugging Node.js in Chrome Dev Tools.
The debugging process was a dream until I tried to use some ES6 code by using require("babel-core/register"); in the entry point of my application.
I could still use the devtool debugger but everything except my "node_modules" files where dumped into the "no domain" folder.
I assume the es6->es5 compiling needs some sort sourcemap to keep the folder structure possible.
Any ideas?
Way late to this but hope this helps someone, here goes.
From my understanding you're trying to use es6 features when running projects using the devtool command to server projects via Chrome Dev Tools?
To do this follow the babel docs on setting up a new project (make sure you have a .babelrc) then server your projects by running
devtool -r babel-register [MY_FILE_NAME.js]
Instead of simply devtool [MY_FILE_NAME.js]
You don't need to add any imports in your app's entry point if you followed the babel docs correctly.
see https://github.com/Jam3/devtool