loading...
Cover image for 4 fast ways to run JavaScript

4 fast ways to run JavaScript

maciekchmura profile image Maciek Chmura Originally published at maciek.cloud Updated on ・2 min read

I like to learn new things.
When I experiment, I need a fast way to run a code snippet, do some debugging and figure out what is working and what is not.
Depending on the situation and mood 🌅 I switch between these setups:

VSCode

Most of the time I will write the code in my code_notes repository.
I have the simplest VSCode configuration possible:

{
  "type": "node",
  "request": "launch",
  "name": "single file",
  "program": "${file}"
}

With this config, VSCode will run currently opened file in the debugger.

Just hit F5 and look for the output in DEBUG CONSOLE.
Of course, you will have all the debugging goodies - read more here

VSCode + Quokka.js

To have 'live reload' for code evaluation check out Quokka.js

Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.

I use it when I am just starting out with an idea.
It really helps to understand what effect has each line of the code.

Chrome Snippets

Sometimes the quickest way to run JavaScript is in Chrome directly.
logTree
Just open Developer Tools, switch to Sources tab and create a new code snippet. Snippets might be hidden under the >> icon.
Remember to wrap the code in {} to have a new local scope on each run.

Python Tutor

python tutor
Don't be fooled by the name! It can run JavaScript also. And it even has a live mode too.
The cool thing about this tool is that it visualizes what is happening at each step.
It's great for educational purposes.
link

Discussion

pic
Editor guide
Collapse
qm3ster profile image
Mihail Malo

All of these are excellent!
Never heard of Python Tutor, fascinating.

I've also never used snippets, I just drop my whole {} into console usually, then when I want to tweak I press up arrow key and edit :v

Collapse
maciekchmura profile image
Maciek Chmura Author

I glad you found it helpful :)

Collapse
z2lai profile image
z2lai

Holy moly, this one short article is enough to boost my Javascript skills by 50%. I'm surprised that it took me this long to find this gem, no other course or tutorial ever mentioned anything besides the Chrome console, which you can't set breakpoints in.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

The browser, being javascripts original environment, is probably the best place to run code snippets, specially when they're meant for the web. Chromium-based browsers make this very easy with their developer tools.

Collapse
sleepyfran profile image
Fran González

Never heard about Quokka but it's amazing! Thanks for sharing, I'll definitely integrate this awesomeness into my usual workflow :)

Collapse
maciekchmura profile image
Collapse
norbertasgaulia profile image
norbertas-gaulia

chrome snippets are great for prototyping, i wish this tool would get more attention from chrome team