I'm building an AngularJs web application in WebStorm. I use browserify as a bundling package, and gulp as a task runner.
I tried setting breakpoint on the individual Javascript file in Webstorm and run Debug. But, I'm not unable to hit the breakpoint.
Also, I tried debug a angularjs application without browserify and gulp. I was able to debug in Webstorm.
Is it possible to run debug in a bundled javascript file? How would we make that work?
If not, what could be the reasons?
Found a solution to this problem. We will need to upgrade to Webstorm 10. Webstorm 9 doesn't support source map in debugging mode.
Related
I'm not getting how to run reactjs code on eclipse.I have created dynamic web page folder,I tried to run react code but i'm not.I have added react-1.4.jar file to that folder also, but I don't know whether it is correct or not.
Please any one can help me about setup to run react code on eclipse.
I've been using CodeMix to work on Node.js Typescript project with an Angular web application all of these under Eclipse, although, it is not React, it also have support for React projects!!! I would recommend to give it a try, I've already tried to create a CodeMix React Project and it provides a nice example on how to write ReactJS under Eclipse. Hopefully this will get you on the right direction.
You can generate bundle.js using web pack that can be placed in
eclipse web content folder.
Don't forget to place HTML, CSS, images and other script files.
You can't run the JSX files using eclipse.
you can't run react (JSX) codes without babel, webpack. whatever IDE your working with, write a JSX code and compile it by using babel.
There is actually a plugin to support JSX and typescript in Eclipse. It's called "TypeScript". TypeScript
follow - official react js documentation React
If you still stuck, try to start react app by using other IDE's like Visual Studio Code, Sublime, Atom.
For Online VS Code IDE react use this : stackblitz
Hope this helps
I started to learn angular.js and build the hello world app according to the official angular site.
I'm working with Spring Tool Suite 3.8.4 and installed the AngularJS Eclipse 1.2.0 plugin and the test project was working fine without any validation errors.
After finishing this tutorial I made a git clone from this demo application, did all the installation steps, imported it as a project into Eclipse and configured it as an angular project (nature).
After all validation was done Eclipse showed me about 2500 errors with the message Unexpected token. I opened some files and it seems that the import and export keyword isn't recognized properly.
As the hello world app uses also these keywords and didn't have any validation errors I assume the reason could be a configuration problem. If i compare them in my project explorer i was wondering why in my hello world app was only a folder "TypeScript Resources (2.2.2)" and in this imported project there is also one folder/lib called "Javascript Resources". Might be ok, just something i noticed.
As im totally new to angular I have no clue what I could check. I read that the angular js support for the Eclipse IDE isn't perfect but these articles have been partly outdated as they were using Angular 1.x and 2.x.
Running the application with npm start in a terminal or "Run as" ==> ng serve" works fine without any problem.
Both applications (hello world and the cloned one) use Angular 4.x.
Does anybody have an idea? Do I need to provide more information?
At first just to clarify things, you have installed Angular2 Eclipse which is for Angular2, Angular4 and where you develop with TypeScript. AngularJS Eclipse is for Angular1 where you develop with JavaScript.
You error is a JavaScript Problem which comes from the JSDT plugins. It seems that you have added JSDT nature. I suggest you to remove JSDT nature from your project because you develop with TypeScript and not with JavaScript.
To do that you can edit your .project file and remove this line:
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
If you need to open JavaScript file in an editor with validation, completion, etc, TypeScript IDE provide a JavaScript (Salsa) Editor which does that. You open your JS file with JavaScript (Salsa) Editor:
and after you benefit from the same feature than TypeScript editor:
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?
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 have a project generated from the Yeoman Angular generator. In WebStorm I setup the project to run 'grunt serve' before debugging and everything just works. When I try this in NetBeans the code doesn't stop at the break points. Is it possible to debug code served from grunt-contrib-connect in NetBeans?