debug Grails app's JavaScript from IntelliJ - javascript

I use IntelliJ to develop Grails apps and when testing locally, I usually launch the app from IntelliJ which runs the app in an embedded Tomcat server. IntelliJ provides JavaScript debugging, but until now I've always used Firebug, but the idea of being able to use IntelliJ for all my debugging is pretty appealing.
I tried setting a breakpoint in IntelliJ and lauching the app in debug mode from inside IntelliJ, but the breakpoint was ignored. I also tried launching the app from outside IntelliJ via grails-debug run-app, then connecting to it with a remote JVM debugger, but the breakpoint was still ignored. Does someone know how I can debug JavaScript of a Grails app launched from IntelliJ?
I'm using IntelliJ Ultimate Edition version 13

Actually you need to do some extra work for debugging JavaScript with IntelliJ. Here are some useful articles about how you can configure your IDE and browser for JS debugging.
http://blog.jetbrains.com/idea/2011/03/intellij-idea-debugging-javascript-in-google-chrome/
http://wiki.jetbrains.net/intellij/Debugging_JavaScript_with_IntelliJ_IDEA
After configuration you need to just run your Grails application in debug mode.

Related

Accessing javascript functions on running Node application

I'm trying to setup a new node application server and I'm finding it frustrating to debug on. Previously I have mainly worked on web based applications/ chrome extensions and I could easily execute javascript functions, api's and access variables from chrome dev tools.
I have tried --inspect and --inspect-brk coupled with Visual Studio Code and also mapping to chrome://inspect/#devices but to no avail; to make matters worse my node code is remote. Can anyone provide any pointers?

How to run and debug an AngularJS application in Eclipse?

I'm trying to get started with Nodeclipse. I would like to run and debug an AngularJS application, e.g. the angular-phonecat example from Eclipse.
In particular, I would like to
use a Debug on Server launcher to start a server with my application and open a web browser (Firefox or Chromium).
set a breakpoint in a JavaScript file in Eclipse
click around in the web browser and have the Eclipse debugger stop at the breakpoint.
(The equivalent of this does work in NetBeans in a very intuitive way.)
From the Nodeclipse help, I don't see how to get started or whether this is possible at all.
I managed to run an debug a Node.js project with the Hello World template, but I don't see how to debug anything running in a web browser.
Does that require a Remote Javascript debug launcher? If so, how to use it?
Finally, I don't see how to actually run an AngularJS application in Nodeclipse. As far as I can tell, the AngularJS Eclipse plugin only implements editing features but does not deal with running and debugging. Do I need to turn the Angular project into a Node.js application? If so, how?
AngularJS runs in browser, Node.js on server,
so you need different approaches.
Nodeclipse is primarily about supporting Node.js and has ChromeDevTools-based debugger. I cannot tell what is best for debugging browser JavaScript, maybe it is Chrome browser.
managed to run an debug a Node.js project with the Hello World template, but I don't see how to debug anything running in a web browser.
Ask on https://github.com/angelozerr/angularjs-eclipse/
Do I need to turn the Angular project into a Node.js application?
For Node.js run/debug it is not needed.

Jhipster and debugging angular js

I've built the jhipster sample application. I am quite new to angular so this may be a silly question, but how do I debug the angular javascript (ex. app.js). I am using Intellij Idea Ultimate 14.0.2 on Windows. I installed the JB plugin for browser debug in chrome and of course enabled debugging. Still I can't get the editor to stop on break points. Hummm frustrating...if anyone has an idea I would greatly appreciate their wisdom.
There is a plugin for chrome and special configuration setting for the IDEA
1. Install the JetBrains IDE Support extension for Chrome
2. Create a new JavaScript Debug configuration on Intellij
3. Configure your JavaScript debug configuration
4. Debug your JavaScript Debug Configuration

Debugging JavaScript with Flask and PyCharm

I just installed the professional version of PyCharm for its Flask features, but I'm having a lot of issues getting anything JavaScript related working.
Firstly, is there any way of getting the browser to open when you run the flask project? There doesn't seem to be a Flask run configuration, which means you have to use the default Python configuration, and that doesn't have the option to run a browser. I tried making a JavaScript Debug project that runs the server as a Before Launch command, but it still doesn't open the browser (either Chrome or Firefox)
Secondly, how do I get PyCharm to hit the JavaScript breakpoints? Even if I manually browse to the flask server (http://localhost:5555/), Intellij doesn't hit breakpoints in my JavaScript, even though the JetBrains plugin is installed (again, in both Firefox and Chrome). I suspect this may be related to the fact that PyCharm doesn't open the browser, which is why I mentioned that as my first point.
Can anyone with experience in PyCharm or IntelliJ help me out?
Just solved this problem.
You need some setup steps.
My prerequisites:
PyCharm on my local laptop
I'm developing on remote virtual machine (droplet DO, Ubuntu)
Setup you web-server. It should be Apache, nginx whatever.
Setup you web-app. You web-app should be runned on web-server.
Setup your debug configuration:
a. Run->Edit configuration
b. Add->JavaScript debug
c. Specify you URL as real url from web-browser like:
http://YOUR_IP:YOUR_PORT/directory/category
d. Specify File/Directory of HTML template and remote URL where your template located.
e. Debug it.
f. Profit ! :)
P.S. So lovely evaluate JavaScript variables from familiar PyCharm tool :)
P.S2: Almost forgot: Need install Chrome extension: https://www.jetbrains.com/help/pycharm/2016.3/debugging-javascript.html#d615717e345

Debug JavaScript in WebStorm

Is it possible to debug JS files from within WebStorm IDE? Preferably, running the app in a Chromium browser instead of using using Chrome developer tools. How do I debug from within WebStorm?
Yes, it's possible. You need to install the "JetBrains IDE Support" add on. Btw: you can run since version 7 Html/JavaScript projects with the builtin webserver.
Since WebStorm 2017.3 you can now use Chrome DevTools and WebStorm debugger at the same time. You no longer need an additional Chrome extension to debug apps in WebStorm.
Read about it in Debugging JavaScript with WebStorm 2017.3

Categories