Home Program JavaScript

How to Create a Javascript Console in Sublime Text

Javascript consoles are very handy for debugging and getting live results from your script. Although Sublime Text comes with build systems for many other scripting languages, it does not come with a built-in Javascript build system. Many...

Method 1 of 2:

Using JSC (Mac OS X)

Setting Up

  1. Launch Sublime Text.
    1. JSC is a command-line Javascript runner, cooked directly into Mac OS X. Because most Macs already contains everything you need to run the script, creating the build system in Sublime Text is incredibly easy.
    2. If you have a Windows computer, see the directions for Node.js below.
  2. How to Create a Javascript Console in Sublime Text Picture 1
    Go to Tools > Build System > New Build System in the top bar.
  3. How to Create a Javascript Console in Sublime Text Picture 2
    Paste this code into the resulting new tab that Sublime Text opened. Replace anything else in it: 
    { "cmd": ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc", "$file"], "selector": "source.js" }
  4. How to Create a Javascript Console in Sublime Text Picture 3
    Save the file as JSC.sublime-build in the default "user" folder. Now you have created your build system!

Using the Console

  1. Open the Javascript file that you want to run in Sublime Text.
  2. Use debug() instead of console.log() in your script.
  3. How to Create a Javascript Console in Sublime Text Picture 4
    Go to Tools > Build System in the top bar and select JSC. This is the build system that you just created.
  4. How to Create a Javascript Console in Sublime Text Picture 5
    Build the Javascript file. Use either the shortcut (Ctrl+B for Windows, and ⌘ Cmd+B for Mac), or choose Build from the Tools menu. A console will now appear in a pane at the bottom of the window, showing the results of your script!
Method 2 of 2:

Using Node.js

Setting Up

  1. Download the Node installer from the project's homepage and run it. Simply use the default settings.
    1. Node.js (Node) is a platform built to allow Javascript to run on a server. However, it can also be installed on your local computer, providing a relatively simple way to run Javascript and get the results without using a browser.
  2. How to Create a Javascript Console in Sublime Text Picture 6
    Go to Tools > Build System > New Build System in the top bar.
  3. How to Create a Javascript Console in Sublime Text Picture 7
    Paste this code into the resulting new tab that Sublime Text opened. Replace anything else in it: 
    { "cmd": ["node", "$file"], "selector": "source.js" }
    1. If you receive a "[Errno 2]" error, then you'll need to change node in the code above to the path where node is located. To do this, open terminal and run which node. This will print out the path to the node binary.
  4. How to Create a Javascript Console in Sublime Text Picture 8
    Save the file as node.sublime-build in the default "user" folder. Now you have created your build system!

Using the Console

  1. Open the Javascript file that you want to run in Sublime Text.
  2. How to Create a Javascript Console in Sublime Text Picture 9
    Go to Tools > Build System in the top bar and select node. This is the build system that you just created.
  3. How to Create a Javascript Console in Sublime Text Picture 10
    Build the Javascript file. Use either the build shortcut (Ctrl+B for Windows, and ⌘ Cmd+B for Mac), or choose Build from the Tools menu. A console will now appear in a pane at the bottom of the window, showing the results of your script!
4 ★ | 22 Vote
« PREV : How to Enable Webgl...
How to Make a... : NEXT »
Read More
Maybe you are interested