How to force Rider to use Chrome for debugging? - 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.

Related

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.

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

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.

How do I debug within my WebStorm workspace?

I start my application on localhost:9000 using a grunt serve command. The application is using yeoman. All my node modules and bower components are in place. I am trying to use the inbuilt grunt task runner - right click and debug serve command. However, it starts the debugger in some other port.
I also tried creating run/debug configurations but that does not seem to have a Grunt debug option.
I am using WebStorm 11.0.3. Any pointers to do this?
To debug client-side code of your app create a new JavaScript run/debug configuration. In the URL field specify localhost:9000. Click save, put the breakpoints in your client-side code and hit debug.

How to debug firefox extension after cfx run?

I want to debug my firefox extension. I set
javascript.options.showInConsole = true
devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
run in sdk console cfx run, after that i go to Web Developer -> Browser Toolbox get incoming connection and i see my extension main.js. But after that, the code in main.js already been executed. How to debug it after cfx run?
also, two other things might be messing with your approach:
1) when you use cfx run, that by default creates a new profile on every run, so any settings that you have changed will not persist. to avoid this, you need to specify a profile directory with --profiledir=DIR (warning: don't use your main profile).
2) if the addon main.js code has already run by the time you open the debugger, you should start firefox manually, setup the debugger, and then drag the addon xpi into a tab.
Bug 899054 - [Meta] Implement an Add-on Debugger
this is really close to landing (the UI bits in bug 911098 are in m-c), so if you grab a Nightly tomorrow, or the day after, it should be in there, and might just work (for some undefined value of "work").

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