How do I debug within my WebStorm workspace? - debugging

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.

Related

Error on getting debug port :: Unable to authenticate on RDS server using current security information. (Adobe's ColdFusion extension)

I installed Adobe's ColdFusion extension. I added local server (127.0.0.1:80), created workspace and now I want to debug my project. I opened some cfml file, I go to "Run and Debug" tab and click "Run and Debug" button. I get the following error messages:
Debugger Stopped
Error on getting debug port :: Unable to authenticate on RDS server using current security information.
What do I need to do to be able to debug my code?
Additional stuff:
Debugging works perfectly fine in Eclipse's CF Builder. In CF Administrator debug port is set to default - 5005. I don't really know what that RDS (Remote Development Service) is but I don't remember having to set that up for Eclipse's CFB (even if I did). Do I have to have RDS to be able to debug?
The most useful piece of documentation from Adobe I was able to find is located here:
https://helpx.adobe.com/sg/coldfusion/coldfusion-builder-extension-for-visual-studio-code/debug-applications.html
Quote:
Run and debug in VS Code
If you have not configured running and debugging, then VS Code
displays the Run start view.

Run and Debug is a custom debug option provided by VS Code. If you
click Create a JSON launch file and follow the prompts, you can
associate your file with "CFML Debug" profile and then use it to run
the debugger.
CFML debug has overridden VS Code’s default debug and run commands.
So, debugger can be started without creating json file.
But even if I create debugger launch json file and then click green debug triangle I still get the same error message.
Update
I got RDS enabled and was able to successfully connect:
I go to "Run and Debug" section of vscode, select "CFML Debug" configuration from dropdown to create debug config, click on a green triangle and get the following error:
Cannot read properties of undefined (reading 'document')
I had a clean reinstall of vscode and Adobe's ColdFusion extension is only one I have installed:
Small edit/update:
I am also able to control CF server (stop/start/restart) from within vscode:
Question:
What do I need to do to fix "Cannot read properties of undefined (reading 'document')" error?
You need to enable RDS in CF administrator in Security section.
You can choose the RDS password or no authentication as per your preferences. Then, you would need to provide the authentication information in VSCode while adding the Server.
You can find more detail about the VSCode extension including debugger in this video - https://youtu.be/90sOeP48TS0?t=2630

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.

How to allow geopositing in Intellij Idea and apply chrome flags "unsafely-treat-insecure-origin-as-secure"

Is there a way to pass development browser flags in IntelliJ Idea (or WebStorm) ? (as it is in chrome "unsafely-treat-insecure-origin-as-secure" StackOverflow answer)
If I try to get user geolocation with
navigator.geolocation.watchPosition
I get this error and it doesn't allow me to debug my webapp directly from IntelliJ
But I successfully debug it in Chrome in dev tools
Seems to be in IntelliJ there is no place to add dev-flags
Settings (Preferences on macOS) | Tools | Web Browsers
Go there, find your browser (or just create your own custom entry) and add command line arguments or select custom data directory (that points to existing user profile) there.
To ensure that those flags/params will be applied you would need to have that browser closed when launching your Run/Debug Configuration.
In your case you should add --unsafely-treat-insecure-origin-as-secure="http://192.168.1.101:3000" or any other flag separated with a space.

Can I use Aptana V3 (Eclipse) debugger with Marionette/Require/Backbone?

I have the Marionette/Require TodoMVC sample imported into Eclipse (Aptana V3) and have breakpoints set, but they never hit.
The non-Marionette/Require version debugs just fine.
I assume this has to do with how things are modularized with Require.js? Anything I can do so I can debug and not have to go back to console.log?
Thanks!
You can also use Backbone Eye (http://dhruvaray.github.io/spa-eye/)!
[Disclaimer : I am the author]
You need to debug the client code from the browser like firebug if running client in Firefox. Or Chrome Dev tool if Chrome is used.
Here are the steps:
From Eclipse, right click the 'index.html' file
Goto Run-As menu --> Select JavaScript Web Application
It will launch Web Browser and load the index.html file and Aptana internal server will be running without you doing anything.
Browser setting is"Preferences/General/Web Browser"
Then you can follow the firebug to debug if using Firefox and to set breakpoints.

Webstorm debugging?

I recently installed Webstorm for my html5 / css / javascript project. I have been unable to run or debug sucessfully from inside the IDE. I have a typical web setup with and index.html file and css and js folders. I'm using MAMP for my local web server and it starts and runs my site no problem when run inside my browser. I can't run because the "Run" button is greyed out. When I try to debug (I set a breakppint in a js file that I know should execute up front) Firefox opens but just shows (http://) with no full path to my index.html AND I see a message in the IDE: Remote URL isn't specified for 'kazaam_localDB.js' so breakpoints won't work in it. Set remote URL for 'kazaam_localDB.js
I did configure my local server when I created a "new project from existing files". I did notice the first time I did try to debug a message cam up saying it needed to configure Firefox with an add-on or extension, but I'm not sure that succeeded because I can't debug...
Ok here is what you have to do:
Ok stop and exit Firefox THEN retry debugger from webstorm. You should now see now the extension has been installed in Firefox.
When you set breakpoint in js file in a local file WebStorm it needs to know which URL corresponds to that file on the server. To specify URL mapping for local files you can either click on 'Set remote url' link in the warning popup or open Run | 'Edit Configurations' dialog and select the run configuration under 'JavaScript Debug' node.

Resources