Testing javascript in the browser without the browser
There are times that we want to test snippets of Javascript code in different browsers to make sure that it works as intended in all our target browsers. I've always fired the browsers and pasted the code into DevTools or Web Inspector to check if the results are the same.
Now there is a pair of applications that will automate this for you: jsvu and eshost.
To install these packages run the following command
npm i -g jsvu eshost
JSVU (JavaScript Version Updater) manages the installation and updates for different Javascript engines avoiding the compilation process. Out of the box, it supports the following engines and OS combinations.
Vendor | JavaScript engine | Binary name | mac64 |
win32 |
win64 |
linux32 |
linux64 |
---|---|---|---|---|---|---|---|
Microsoft | Chakra | chakra or ch |
✅ | ✅ | ✅ | ❌ | ✅ |
Hermes | hermes & hermes-repl |
✅ | ❌ | ✅ | ❌ | ✅ | |
WebKit/Apple | JavaScriptCore | javascriptcore or jsc |
✅ | ✅ * | ✅ * | ✅ | ✅ |
Fabrice Bellard | QuickJS | quickjs |
❌ | ❌ | ❌ | ❌ | ✅ |
Mozilla | SpiderMonkey | spidermonkey or sm |
✅ | ✅ | ✅ | ✅ | ✅ |
V8 | v8 |
✅ | ✅ | ✅ | ✅ | ✅ | |
V8 debug | v8-debug |
✅ | ✅ | ✅ | ✅ | ✅ | |
Moddable-OpenSource | XS | xs |
✅ (32) | ✅ | ✅ (32) | ✅ | ✅ |
When you first run it it will prompt you to select the JS engines to install. After initial install running the jsvu
commannd will update the engines as appropriate.
Once we have the engines that we want to work with we can configure ESHost
to run the same command with these multiple js engines. In this example, we're adding the major browser's JS engines to work with ESHost.
# Chakra is old Edge's JS engine
eshost --add 'Chakra' ch ~/.jsvu/chakra
# JSCore is Safari's JS engine
eshost --add 'JavaScriptCore' jsc ~/.jsvu/javascriptcore
# Spider Monkey is Firefox JS engine
eshost --add 'SpiderMonkey' jsshell ~/.jsvu/spidermonkey
# V8 is Chrome's JS engine
eshost --add 'V8' d8 ~/.jsvu/v8
Once we have the engines set up, ESHost is ready to go.
We have multiple ways to run scripts in ESHost. We can run a short script in all configured browsers with the -e
flag like this:
eshost -e "12*12"
You can also run complete scripts in the configured browsers with the following command:
eshost my-script.js
The only flags I will refer to are -m
and -s
.
The -m
flag will treat the script as a module with the corresponding differences in syntax.
The -s
flag will consolidate results when different engines produce the same result. For example, the following command:
eshost -se "console.log(112*12)"
will produce the following result where only JavaScriptCore produces a different result. This will help in researching browser differences that need workarounds
eshost -se "console.log(122*12)"
#### Chakra, SpiderMonkey, V8
1464
undefined
#### JavaScriptCore
TypeError: undefined is not an object (evaluating 'console.log')
For more information use the following command:
eshost --help