DEV Community

Cover image for 4 fast ways to run JavaScript
Maciek Chmura
Maciek Chmura

Posted on • Edited on • Originally published at maciek.cloud

4 fast ways to run JavaScript

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}"
}


Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
qm3ster profile image
Mihail Malo • Edited

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

I glad you found it helpful :)

Collapse
 
z2lai profile image
z2lai • Edited

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
𒎏Wii 🏳️‍⚧️

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
Maciek Chmura

:D