2

So something I do very frequently is writing random scripts in JS without really being part of an app. To run them I just paste them in the console of either Chrome of FF which works as a nice REPL, or if I really need more fancy debugging I just add it to my test app on localhost and browse it from the browser. Is there a way to get all the good debugging of a browser (breakpoints, locals, etc), without it being served from a server?, e.g by just copy-pasting my code into console or something?

3 Answers 3

3

You can use http://jsbin.com/.

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code - new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.

Update:

I don't think you can place a breakpoint as the script you write is automaticly checked by jsbin in the console window and if there's an error after you refresh it will be paused in debugger.

enter image description here

If you don't refresh the page it will warn you as you type about possible errors.

enter image description here

Also for your information the script you write is parsed by jsbin so it's stored in the edit resource.

enter image description here

4
  • Thanks for that, that's going to be helpful. Any way to add a breakpoints on my code on jsbin?
    – sazpaz
    Oct 28, 2012 at 21:47
  • 1
    You can use console.trace() and console.log() but for the debugging i would open Google Chrome DEV tools and debug while the code is executing in jsbin. Oct 28, 2012 at 21:53
  • That's what I want to do, but how do I find my JSBin's code under Chrome Deb tools?
    – sazpaz
    Oct 28, 2012 at 21:59
  • Check the updated answer. Oct 29, 2012 at 7:49
1

If you have php installed you can run a .vbs script to paste contents in a file and run a php server on the fly.
testjs.vbs:

Set objHTML = CreateObject("htmlfile")
ClipboardText = objHTML.ParentWindow.ClipboardData.GetData("text")
Set fs= CreateObject("Scripting.FileSystemObject")
Set file= fs.CreateTextFile("testjs.html", True)    
file.WriteLine "<!DOCTYPE html><html><body><h3>JS test</h3><script>"
file.WriteLine ClipboardText
file.WriteLine "</script></body></html>"
file.Close
Set osh = WScript.CreateObject("WScript.Shell")
osh.Run "explorer http://localhost:8000/testjs.html"
osh.Run "cmd /K php -S localhost:8000"

Just copy your JS code to Clipboard and execute this script.

On the other hand, I have a phpserver.BAT file on my shell:sendto folder (Windows) to run a php server for every folder I SendTo->phpServer.bat. It contains the same cmd commands used above.
shell:sendto/phpserver.bat:

explorer http://localhost:8000
php -S localhost:8000

You were asking about a non-server solution, but this is really fast and useful. To shutdown the on-the-fly server you only have to close the php console window.
Note that if you don't have the php's home directory on your PATH environment variable, you'll have to specify the full path to php. Usually C:\Program files\php...

Btw, do you know about NodeJs? (JS running on the server, with console, etc)

0

For FireFox, FireBug and JSFiddle are absolute must haves for debugging. You'll not only be able to debug with breakpoints, but also to modify any data as part of the transaction.

For Chrome, it's built in: https://developers.google.com/chrome-developer-tools/ ... right click an element and then go to inspect. Alternately if you want a single interface check out Firebug Lite for Chrome.

IE9/10 ... hit F12 for developer tools, they have debug capacity.

IE8 (don't know, I never bother checking against it)

IE7 you'll need to download the developer tools from Microsoft.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .