I am trying to debug an Angular application using IntelliJ Webstorm (10.0.1). I created an application with Yeoman (1.4.6) using the command yo angular. I then opened the directory as a project in Webstorm. (This is the same configuration as described in "Grunt Server and WebStorm javascript debugging (and SpyJS) not working".) I can run the application using grunt serve both from the command line and from within Webstorm. I now want to set breakpoints and step through the Javascript in Webstorm.
I followed the instructions in How to debug AngularJS with Intellij, but debugging still does not work. Specifically, I start the app with grunt serve and then try to connect with my debug configuration, but the debugger never connects. The Debugger window in Webstorm reads "Waiting for connection from JetBrains IDE Support Extension for Chrome (IDE port 63342)."
I am on OS X (10.10.2). My default browser is Chrome (41.0.2272.118). The JetBrains IDE Support extension (2.0.7) is installed and enabled in the browser. It is using the default port 63342.
My Angular application is running in the default location http://localhost:9000.
In the debug configuration, my "URL" is http://localhost:9000/ and I map the index.html in my project to the "Remote URL" http://localhost:9000/index.html.
I am asking this separately from the other Webstorm debugging questions on StackOverflow because those do not mention the "Waiting for connection" message and their solutions are to follow the instructions that I started from.
Any ideas on what I'm doing wrong?
Related
I am using visual studio code IDE to develop react native app and am not using expo library.
Before that I was working on the android studio, debugging in that is straightforward and simple.
Now for react-native, I wanted to know how to debug my app using visual studio code IDE?
If you want to debug the app in VS Code itself, like in other IDEs. Then on approach can be to follow the following steps:
Install React Native Tools Extension (provided by Microsoft) to VS Code.
This is a nice add on to VS Code's capabilities for React Native.
Then go to Debug option from left menu and click on Add Configuration.
If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.
Now if already have Launch configuration added, then you can click on Add Configuration button then you will see more options related to React Native.
You can add configurations for React Native: Attach to Packager, React Native: Debug to Android, React Native: Debug to iOS in your launch.json file. It is present in .vscode folder.
Then add your breakpoints in code. Now suppose you already have your app running on emulator then you can choose option Attach to Packager.
Then on emulator or device open developer options (Ctrl + M for Windows + Android) and click on Debug JS Remotely.
Now your breakpoints should be working. Similarly if your app wasn't working already then you can go for Debug Android or Debug iOS accordingly.
Step1: Open app Setting in your mobile by shaking your mobile or by typing this command in your machine if your running android.
adb shell input keyevent 82
Step2: Select Debug JS Remotely which is the second option.
Step3: In your Browser type Url http://localhost:8081/debugger-ui/
Step4: Again Open App Setting by shaking or running the command shown in step 1 and select Reload option which is first option
Now You can get all console logs in the browser and also you can debug your app remotely by putting breakpoints and analyze the values step by step.
So, I am using WebStorm to develop an React app with webpack, usually I just run webpack-dev-server in the console, the server is at port 8081 and I open the browser, visit localhost:8081//build and all works with hot reload.
Today I want to debug deeper into the code with debugger in WebStorm, I never use break points before, so I went to this page https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/
Though I did not install create-react-app, because my project is not generated by the module, I created project manually with webpack.config.js and package.json, I do not know how to generate a existing project.
Second, Instead of run npm start as the instruction, I also passed this part because I think web-dev-server is already a server, I do not need another one.
Then I followed the instructions from here, created a debug configuration with an url of "localhost:8081/build" as there is the webpack-dev-server location.
At last I tried to set "debugger - built-in-server - port" to 8081, I also installed JetBrains IDE Support addon for Chrome and tried to set the port to 8081 either. But WebStorm told me that the port is not free and also the addon on Chrome toolbar now is grey.
Then I thought that the addon port and debugger port is not associated with webpack-dev-server, only the debug configuration is associated, but these thoughts are all guesses, because I really do not understand.
At last I run debug, the app index page is opened and it said JetBrains IDE support is debugging, I modified any file and saved it would hot reload, console in WebStorm showed result as in Chrome console, seems all works great, except breakpoints, they are all ignored, like they were not there, in the debugger tool window in WebStorm, the Frames window shows "Frames are not available", the Variables window shows a blue round icon followed by "Connected to JetBrains Chrome Extension" and that is all, none variable shows there.
I am sorry I did not understand both WebStorm debugger and breakpoint debugging well, this was my first time I do not know how to get stuff together.
Should I use create-react-app explicitly to generate a project (please no), or is there a way to make all this working?
At last I tried to set "debugger - built-in-server - port" to 8081, I
also installed JetBrains IDE Support addon for Chrome and tried to set
the port to 8081 either. But WebStorm told me that the port is not
free and also the addon on Chrome toolbar now is grey.
Please set it back to default - port specified there is a port the IDE is opening on start for debugging/serving static files, it has nothing to do with the port of the server your application is hosted on
seems all works great, except breakpoints, they are all ignored
you need to make sure that the sourcemaps are generated properly (devtool: 'source-map' is the most preferred option) and (probably) specify the remote URL mappings in your debug configuration (check https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/, 4. In WebStorm 2016 (.1, .2 and .3) section for some hints).
If it still doesn't work, please create a support ticket to get the assistance on setting up the debugger
I inherited an AngularJs application that was built using WebStorm, NodeJs, Npm, Grunt etc.
The app is set up in such a way, that I have to run grunt serve to initialize a local server that hits the API and return data. If I simply run it as Localhost (through either WebStorm or VS), it does not pass validation to return my data through the API.
My question is; Is it possible to link grunt serve to IE in Visual Studio, in the same way you would run an application in Debugging (F5) mode?
I enjoy using Visual Studio, and like debugging and stepping through my code with IE, as this allows me to set breakpoints in my JavaScript and C#.
I would suggest that Grunt Launcher will help you:
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Although I did not manage to link "grunt serve" to IE in Visual Studio, I was able to debug using IE, by running my project in Debug mode (F5).
I simply copied the path with token created when running "grunt serve", and used this as my path in Local Host when debugging in Visual Studio. This way it connects to the API, and is validated.
I am running Application.java from within IntelliJ and Grunt Serve from the Command Window. Thus, I can debug Java code and Live Reload changes to Html. But I cannot set breakpoints or trace Javascript files.
I know I could debug in Chrome, but I rather debug in IntelliJ if at all possible.
I would appreciate any suggestions.
Thanks
You should be able to do this with the NodeJS plugin for IntelliJ. I have it installed on my machine and I'm able to right-click on my project's Gruntfile.js and select Run or Debug.
I am running an AngularJS project as a Hawtio plugin and this is deployed in Karaf (as a subcomponent of JBoss Fuse ESB) as a packaged war placed in the deploy folder of Fuse. When I try to debug in Chrome Dev Tools, I have trouble debugging (setting watches, breakpoints, etc.) my JavaScript source codes as these are not visible in the Sources tab. Additionally, my console.logs in my source files do not appear in the Console of Chrome Dev Tools as well as on the Hawtio console.
Is anyone have an idea how to do this?
Thanks.
So for logging, create an instance of Logger in your plugin:
var log = Logging.Logger.get("MyPlugin");
log.debug("Yay, I've got a logger!");
Though console.log normally is captured by the above. You may need to set hawtio's logging to 'Debug' in the preferences if you're not seeing any logs in the console.
It's difficult to deal with breakpoints with an external plugin as dynamically loaded scripts aren't treated the same way in chrome, however you can manually set a breakpoint by putting:
debugger;
in your .js file, see Set a javascript breakpoint in code - in chrome?