Intellij IDEA, run Javascript code right in the editor - javascript

After having written large amounts of code in Intellij Idea Ultimate edition, I often want to test a method, or big pieces.
I often resort to having to paste the code in firebug in firefox, a small annoying cramping space, with no editor features. If the code needs adjusting I need to do it there, test again, copy and insert into Intellij Idea.
Is it possible to run firebug like console code, right in Intellij ? Similar to in Java debug mode with the Inspect tool ? It would have been really useful, even more useful just to highlight some code and press run.
Browser support is not important, any browser will do.
Is this possible already? Is there an Intellij plugin for this? Why not? :(
Thanks!

If the browser is not important, you could use the node.js plugin as a javascript repl / debugger. Keep in mind that it will not provide an HTML DOM so if your code makes jQuery calls, it will not run out of the box. Otherwise, if it's just plain javascript, it will run just fine.

Just stumbled over this. A bit late but anyway:
Debugging Javascript, editing values, etc. works fine using intelliJ with its Chrome Plugin.
See https://www.jetbrains.com/idea/webhelp/configuring-javascript-debugger.html or
http://blog.jetbrains.com/idea/2011/03/intellij-idea-debugging-javascript-in-google-chrome/
You can set breakpoints to stop where you want and can from there evaluate expressions and all the other stuff you would like to do.
Hope this is what you wanted to know.

Related

How to run javascript snippets in firefox/chrome from a script

I am currently trying to learn javascript. Coming from a python/R background I find it really useful for learning purposes to be able to write code in a script in Rstudio/pyCharm which I can then execute in a interpreter by highlighting specific lines of code and then pressing a ctrl+enter or some other keyboard shortcut.
The console available on firefox/chrome seems incredibly rich and useful for learning / testing specific pieces of code but I find it quite limiting that I can't store each line in a script with comments/notes to myself.
Is there a way to run lines of javascript in firefox/chrome like pycharm & rstudio can with their respective interpreters or how is it usually recommend for people to learn the language in an efficient manner ?
Use node.js which is a javascript runtime using v8 (powering the chrome console)
You can get an REPL similar to Python.
You cannot, however use it to modify the DOM or access the window. In such case, using an online IDE like jsfiddle or codepen might be a good alternative.

HTML/JavaScript Debugging in Eclipse

Running a webapplication in an environment with IE 6 (please do not comment that...), I'm looking for a debugging tool for html/javascript in Eclipse Galileo. I'm not supposed to install any other software but I'm able to install a Eclipse Plugin.
Thank you for every hint. :)
PS. IE 6 drives me nuts. I usually use FF or Chrome but sometimes its not my decision.
Have you looked into the ATF plugin for eclipse? Includes a JS debugger that looks and works similarly to the Java debugger.
Alternatively, you could use the MS Script Editor. It' ain't pretty, but it's got all the basic debugging support you probably need. Here's a link that does a decent job of explaining basic use and setup: http://www.jonathanboutelle.com/how-to-debug-javascript-in-internet-explorer
My personal approach for using the MS debugger is to just insert a line into my code that says simply: x.x;
This will fire the debugger at exactly the spot I need, then I just change the value of x in the watchlist to be equal to document, thus correcting the error I forced. I can then step through the lines of my code and debug as usual.
Link to ATF for previous post: http://www.eclipse.org/atf/

Are alert()'s the Javascript equivalent of Visual Studio IDE breakpoints?

I'm trying to find a less haphazard way than a write-and-test way to write Javascript. I don't really use an IDE - I write, then test in browser - if anything's wrong, I then use alert()'s to try tracing. This can be a tedious process having to go back and forth from Notepad++ to the browser, so I wonder if there are better ways of doing this, whether there's a good debug-friendly IDE for Javascript / jQuery or something better than alert's to use (dynamic tracing?).
Are alert()'s the Javascript equivalent of Visual Studio IDE breakpoints?
There are a couple of different solutions available.
Firebug: http://getfirebug.com/doc/breakpoints/demo.html
Venkman Debugger: https://developer.mozilla.org/en/using_breakpoints_in_venkman
Aptana: http://docs.aptana.com/docs/index.php/Adding_a_breakpoint
if you're using firefox, check out firebug. its not so much an ide as a slick debugging tool with a lot of extras.
also, if you're looking for something a little more portable, try blackbird.js one of the coolest little debugging tools i've seen, though nowhere near as frilly as firebugs it will work in any browser and provide your log messages and profiles with a visible place on the screen.
Chrome and IE8 have built-in developer tools that you can use to debug JavaScript code. Firefox has a plug-in for that, too - called Firebug.

Javascript, Firebug: How do I have multiple views or what is the right of way of doing development?

Most of my javascript work is done with Firebug and I feel annoying most of the times having to switch between the HTML mode and console mode (which again I split into output mode and input mode). When I switch to a different page to see the HTML and come back, I lose the code that I write. What is the best way to go about developing javascript applications using firebug?
Something like a mini IDE would be awesome: It just has to let me insert some code, examine the current page and then let me execute it. Any suggestions?
I use a simple text editor (vim) to write Javascript and HTML, and I check the result every now and then in Firefox. I have always two windows open: one for my text editor, and one with the current page open in Firefox. After saving a change in the Javascript, I switch to the browser and refresh the page to observe results. That was my workflow until recently.
A couple of weeks ago, I discovered the Combiner tool by Nicholas C. Zakas. To release my Javascript code, I am now using a complete build process based on Apache Ant, similar to what I was using while doing Java development previously.
The first step is to check the Javascript code with the JSLint tool by Douglas Crockford. I used to painfully copy and paste my Javascript code in the online version of the tool, once in a while; being able to run it on all my Javascript files at once with this Ant script is a huge convenience.
The second step is to combine all my Javascript files into a single file using the Combiner tool. The third step is to minify the Javascript code using YUI Compressor by Yahoo!. These last two steps allow to optimize the delivery of Javascript code to reduce page loading.
You can find an example Ant build file that you may adapt to your own needs. I am currently using this file to build my own Javascript library, bezen.org.
The other answers so far have been correct: I've never heard of anyone actually developing inside Firefox/Firebug, because it's a tool designed for debugging, not coding. To do your coding, you should use a tool designed for it (either a text editor or a full-fledged IDE).
But that being said, you might want to check out FireEclipse (Link). It will allow you to integrate Firebug with the Eclipse IDE (which itself has at least three different JS plug-ins to choose from). Alternatively I think the main (aka Web Standard Toolkit, aka WST) JS editor for Eclipse has some functionality which is similar to Firebug, but I've never used it so I don't know the details.
Hope that helps.
Write your HTML in an editor/IDE
Save your changes
Preview it in your browser
Debug using Firebug
Make your code edits in your SOURCE CODE
Repeat
Firebug is for debugging and allows you to do some "what if" fiddling while the page is live. This is not a replacement for an IDE.

debugging javascript for IE6

firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..
You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.
You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.
The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.
or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.
For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger
I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.
I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.

Categories