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

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.

Related

Intellij IDEA, run Javascript code right in the editor

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.

Web-based JavaScript Debugger

I have an idea for a project that has to do with helping people learn to program. One of the things I think would be cool would be to have a place on the site where you can edit JavaScript code in real time in your browser.
I know there are a number of web-based JavaScript editors, but I haven't been able to find out if there are any tools that let you debug JavaScript from your browser. I think being able to step through your code is a valuable learning experience for people who are new to programming. It seems like something along those lines should be possible, though.
I originally thought you could use something like Firebug Lite: http://getfirebug.com/firebuglite, but they don't support debugging. Is this just too hard of a problem to solve in JavaScript?
I suggest you try Cloud9. It is a full-featured web based IDE for Javascript, which includes a great debugger. It is free for open source projects, which I imagine would include most learning purposes.
Why not just use the build in Javascript console from the browser? Every modern browser has this feature.

Retrieving a javascript processed Web page

What am I asking for is the ability to download a rendered / processed page via Google Chrome or Firefox I think.
For example, I don't want:
hendry#x201 ~$ w3m -dump http://hello.dabase.com
FAIL
I want:
$ $answer http://hello.dabase.com
Hello World
You should be able to do it using PhantomJS. It is running WebKit without the visuals, but you get the same fast and native supports for JavaScript, HTML/DOM, CSS, SVG, Canvas, and many others.
Disclaimer: I started PhantomJS.
Probably too early, but someone ported V8 to Go-lang, so now you could write your own client that makes use of this powerful combo:
http://bravenewmethod.wordpress.com/2011/03/30/embedding-v8-javascript-engine-and-go/
Looks quite straightforward, doesn't require an ugly Java/Rhino stack and adopts the next big programming language.
It looks similar to the problem http://simile.mit.edu/wiki/Crowbar is trying to solve.
You could use jsdom:- https://github.com/tmpvar/jsdom
I'd build a node driver for it, but it's supposed to work with Rhino etc.
I'd take a look at Rhino.
I'd use the excellent env.js library in conjunction with Rhino to simulate the browser environment as much as is technically possible. Once you've implemented some web spider bootstrap code you should be able to obtain the result you want above.
I'd be interested in other solutions to this though.

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.

Categories