How do I add runtime breakpoints to a TypeScript compiled project? - debugging

Question:
How do I enable breakpoints to be appended while executing when debugging a Typescript Node.js app?
Context:
I currently have a server side application run through the nodevm. My modules are built using TypeScript. I'm currently using WebStorm, and its TypeScript transpiler. As TypeScript is a transpiled language, I know the final output is a .js file.
Right now my breakpoints work correctly as long as they are set when the node process starts. Coming from other languages, you can set breakpoints as you move through your code at runtime. Is it possible to do this?
Goal: Launch Process - Hit Breakpoint A -> Add Breakpoint B -> Play -> Execution stops at B.
Current: Launch Process - Hit Breakpoint A -> Add Breakpoint B -> Play -> Execution ignores breakpoint B until restart.
I'm more interested in ANY solution that enables this experience, not just WebStorm.
[names redacted]

My current workaround to the webstorm issue is to use the remote debugger. Start your app up with node --debug-brk=5858 server.js and add a 'Node.js Remote Debug' configuration:
This will pause the application on start up until you start your remote debugger listening on port 5858. I spin up the server in a terminal window, flip over to Webstorm and start up the debugger. This will allow you to insert breakpoints without restarting either the server or debugger.

This works today in VS Code.
There might be some light configuration based on how your source maps are setup, but there are great docs on TS debugging in VS Code. You can also reference this node-typescript sample that is preconfigured for VS Code that I've been working on.

Related

How to force Rider to use Chrome for debugging?

No matter what I do, I cannot get Rider to use Chrome for debugging. I've removed all other browsers listed and even set a "Custom path" to Chrome. I also have the required plugins installed and enabled; still, it starts up with:
Opening <URL> using the default OS app (=Edge)
It then starts logging errors like below:
Debugger listening on ws://...
Debugger attached.
Waiting for the debugger to disconnect...
About to exit with code: 0
Process terminated before summary could be written, possible error in async code no continuing!
Trying to exit with exit code 1
Process finished with exit code 0
The app consists of multiple SharePoint Framework (SPFx) React projects wrapped in netstandard2.0 class library projects. Each has a gulp file and I've created corresponding run/debug configurations similar to the below sample:
What do I need to do to get Rider to use Chrome?
In Gulp run configuration, you can't specify a browser to be used for debugging, neither you can debug the front-end app that runs in browser using this configuration. I suppose, it's your Gulp task that opens your system default browser once your app is started - the IDE has no control over this.
Anyway, to attach the debugger to the application that runs in browser, you need using JavaScript Debug run configuration with your server URL. In this configuration, you need to specify a browser to be used (the IDE will use Chrome there by default)
Also, I'd suggest removing --inspect option from Node options: in Gulp run configuration - it makes no sense here unless you are going to debug your Gulp task itself.

Standalone IntelliTrace collected recording shows only external code

I am testing the standalone IntelliTrace recorder tool but struggle to use it for post-mortem debugging of a client WPF application.
I managed to record the data using the IntelliTrace recorder. However, when I view the created .itrace file in Visual Studio 2017 15.8.6 Enterprise, I cannot see any references to the code. VS tells me for all events that all threads execute only external or framework code.
The events that have been recorded are mostly WPF button click gestures. Even though the button click method itself is in BCL libraries, I was expecting to see click handler code. Furthermore, I also added a line to throw an exception in my app (which then of course is thrown in the code of the application), but for this, I also cannot see any code.
The collection plan did not make any difference. I was using the builtin ASP.NET Trace collection plan as it is supposed to be verbose, the default plan and a customized plan where I removed everything that is not important for the app under test.
The program database files are located next to the executables as I was executing the program from in its build output directory, so VS should not have any problems finding the pdbs.
The commandline I was using to start the collection is
C:\IntelliTrace\IntelliTraceSC.exe launch /cp:C:\IntelliTrace\collection_plan.ASP.NET.trace.xml /f:C:\IntelliTrace\test.itrace MyApp.exe
Am I missing something? What is required to see the actual code? Currently, I only see the sequence of events, which alone is pretty useless for debugging.
I am using the IntelliTrace collector version 14.0.24720.00.
You have to check your debbuger.
Try Right click on the project and under Configuration Properties -> Debugging there should be a row with Debugger type).
Can you try debugging with the type switched to mixed mode? It seems like you also have managed code running and it may be using the incorrect debugger if it is set to auto.
Are you still getting the same issue?
Also can you try debugging with Just My Code turned off. Tools -> Optio -> Debugging. Make sure Enabled Just My Code is unchecked. Does this issue still appear?
Also, try with:
Debug > Options > General > Uncheck "Enable Just My Code"
All the references that I mention has background in:
https://msdn.microsoft.com/de-de/library/dd264915(v=vs.120)
Hope it fix your issue

breakpoints are greyed out vs code react-native-tools debug

No matter if I choose "Attach to packager" configuration running packager with
react-native start
first or "Debug Android", breakpoints that I set in vs code are greyed out and are not get hit.
Here is information I am getting from Debug Console:
OS: win32 ia32 Adapter node: v7.9.0 ia32 vscode-chrome-debug-core:
3.23.0 Starting debugger app worker. Established a connection with the Proxy (Packager) to the React Native application Debugger worker
loaded runtime on port 10029 Running application "EugeneKrApp" with
appParams: {"rootTag":71}. DEV === true, development-level warning
are ON, performance optimizations are OFF index.bundle:19019 Warning:
componentWillMount is deprecated and will be removed in the next major
version. Use componentDidMount instead. As a temporary workaround, you
can rename to UNSAFE_componentWill
There is a bunch of warnings down the line like the last one about componentDidMount which I didn't include, they hardly influence debugging.
I had the same problem. It was due to the fact that 'Debug JS Remotely' was not enabled on the device/emulator.
Please check Tunvir Rahman Tusher answer and comments on this question.
Enter 'adb shell input keyevent 82' in the cmd/bash on your dev machine while the app is open on the device/emulator. A dialog box opens on the device/emulator like
Select 'Debug JS Remotely' and it will work out. You might need to restart the debugger.

Debug a process that terminates after start

I need to debug a process (starting from an external exe) that terminates immediately after start, so I don't have time to attach. How can I debug it?
UPD I don't have source code of that external exe; I can decompile it, but it's impossible to compile it back
You need to launch your process for debug in a suspended state. Visual Studio is capable of that, just invoke the debugger like this:
devenv /debugexe yourprog.exe <arguments>
The process will start suspended so you'll be able to iterate through first instructions before the crash.
See the detailed answer here.
You just need to open Visual Studio, go to File -> Open -> Project / Solution
and select the exe.
Press F5 and you will see the exception in the Output window. If you go to the Debug -> Exceptions window and select everything you will see the first chance exception before it shutdowns the application.
Note that you don't need the source code at all to do this.
Hope it helps.
You need to start it with the debugger. This will start the program with the debugger already attached.
If you cannot do that with Visual Studio, you can use the Windows Debugging Tools, part of the Windows Driver Kit. Note that the linked kit is for Windows 8.1, you may need to find older versions if you're not on Windows 8.
You can enable debug mode runtime by placing some piece of code.
write a method as below:
[Conditional("DEBUG_SERVICE")]
private static void DebugMode()
{
Debugger.Break();
}
and call this method where you want to start debugging, for example in the OnStart event.
you have to build your code with debug mode. dont forget to remove this piece of code after debugging and want to release.

How to debug node js app with breakpoints and everything?

I've installed node-inspector just to find out that it doesn't support breakpoints :| What's the point in it at all, bearing in mind that on big part node code is asynchronous and you simply cannot follow it step by step?..
I'm definitely missing a point here...
Anyway to debug node code with breakpoints and everything?
yupp, I've successfully used node-inspector. If you want permanent breakpoints, simply insert debugger; in your code. See http://nodejs.org/api/debugger.html.
Making node wait until a debugger is attached, using node --inspect-brk script.js (previously node --debug-brk script.js), can also be very helpful.
(For Node 8 and later)
Node.js has a built-in debugger. Normally you can turn on the debugger in two ways:
Start your Node.js app or script with the --inspect or --inspect-brk switch. For example:
$ node.js --inspect index.js
(Note: --inspect-brk breaks before user code starts)
If for some reason you cannot start your Node.js app or script with the --inspect switch, you can still instruct the Node.js process to start listening for debugging messages by signalling it with SIGUSR1 (on Linux and OS X). For Node 8 and later it will activate the Inspector API, same as the --inspect switch
$ kill -sigusr1 23485
(Note: you need to replace 23485 with your own Node.js process ID)
With the debugger turned on, you can open the Google Chrome browser, and type in the address bar chrome://inspect
Then you should see an entry listed under "Remote Target". Go ahead and click "inspect".
Now you can set breakpoints and start debugging your code.
Reference:
https://nodejs.org/en/docs/guides/debugging-getting-started/
Related issue on stackoverflow:
Chrome Devtools Dedicated Node.js Inspector not stopping at breakpoints
To debug a Node.js application, one can use the debugging built-in method:
(1) Insert debugger; statement where you want to insert a break point
(2) Run the file with command $ node inspect <file name>
(3) Use a key for example, c to continue to next break point
You can even debug values associated to variables at that break point by typing repl. For more information, Please check the official guide.
Have you tried using nodemon library? it can be found here.
For development purposes you could start the app running nodemon. I have this script:
"dev": "nodemon --inspect src/index.js"
It will break any time a debugger statement is reached in the code. To open the console where you can see the server code, open the console in chrome and click on the nodejs icon:
It also helps you refreshing the server every time you save any file on the server.
Let me know if it works!
Just to elaborate a bit here:
Set a debugger wherever you want the breakpoints to be and then run your code with node debug script.js/index.js
When the debugger stops at you breakpoint, you will need to repl to inspect the variables.

Resources