Dublin Library

The Publishing project

Testing javascript in the browser without the browser

In this post

    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.

    VendorJavaScript engineBinary namemac64win32win64linux32linux64
    MicrosoftChakrachakra or ch
    FacebookHermeshermes & hermes-repl
    WebKit/AppleJavaScriptCorejavascriptcore or jsc✅ *✅ *
    Fabrice BellardQuickJSquickjs
    MozillaSpiderMonkeyspidermonkey or sm
    GoogleV8v8
    GoogleV8 debugv8-debug
    Moddable-OpenSourceXSxs✅ (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