Simple Ways to Create a Javascript Console in Sublime Text

PDF download Download Article
An easy-to-follow guide so you can use Sublime Text to write javascript
PDF download Download Article

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 sources will tell you to create a .html page with a link to the .js file, then use a web browser console to see the results of your code. This equates to constant window-switching and browser reloading; leading to frustration, heartache, and ultimately inefficiency. Fortunately, constructing your own Javascript build system for Sublime Text is quick and easy!

Things You Should Know

  • Launch Sublime Text and build a new system.
  • Replace the existing code with the code here, save it, then run it as a saved file to debug.
  • Alternatively, open Node.js and build a new system in Sublime Text.
Method 1
Method 1 of 2:

Using JSC (Mac OS X)

PDF download Download Article

Setting Up

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/3544251-1-1.jpg\/v4-460px-3544251-1-1.jpg","bigUrl":"\/images\/thumb\/4\/4e\/3544251-1-1.jpg\/v4-728px-3544251-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    • 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.
    • If you have a Windows computer, see the directions for Node.js below.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f8\/3544251-2-1.jpg\/v4-460px-3544251-2-1.jpg","bigUrl":"\/images\/thumb\/f\/f8\/3544251-2-1.jpg\/v4-728px-3544251-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Advertisement
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/3544251-3-1.jpg\/v4-460px-3544251-3-1.jpg","bigUrl":"\/images\/thumb\/c\/c9\/3544251-3-1.jpg\/v4-728px-3544251-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Replace anything else in it: 
     { 
 "cmd" 
 : 
 [ 
 "/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc" 
 , 
 "$file" 
 ], 
 "selector" 
 : 
 "source.js" 
 }
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/3544251-4-1.jpg\/v4-460px-3544251-4-1.jpg","bigUrl":"\/images\/thumb\/6\/60\/3544251-4-1.jpg\/v4-728px-3544251-4-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Now you have created your build system!
    5. Advertisement

Using the Console

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b0\/3544251-5-1.jpg\/v4-460px-3544251-5-1.jpg","bigUrl":"\/images\/thumb\/b\/b0\/3544251-5-1.jpg\/v4-728px-3544251-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9b\/3544251-6-1.jpg\/v4-460px-3544251-6-1.jpg","bigUrl":"\/images\/thumb\/9\/9b\/3544251-6-1.jpg\/v4-728px-3544251-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bb\/3544251-7-1.jpg\/v4-460px-3544251-7-1.jpg","bigUrl":"\/images\/thumb\/b\/bb\/3544251-7-1.jpg\/v4-728px-3544251-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This is the build system that you just created.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b7\/3544251-8-1.jpg\/v4-460px-3544251-8-1.jpg","bigUrl":"\/images\/thumb\/b\/b7\/3544251-8-1.jpg\/v4-728px-3544251-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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!
    5. Advertisement
Method 2
Method 2 of 2:

Using Node.js

PDF download Download Article

Setting Up

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/3544251-9-1.jpg\/v4-460px-3544251-9-1.jpg","bigUrl":"\/images\/thumb\/c\/cd\/3544251-9-1.jpg\/v4-728px-3544251-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Download the Node installer from the project's homepage and run it. Simply use the default settings.
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bd\/3544251-10-1.jpg\/v4-460px-3544251-10-1.jpg","bigUrl":"\/images\/thumb\/b\/bd\/3544251-10-1.jpg\/v4-728px-3544251-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/3544251-11-1.jpg\/v4-460px-3544251-11-1.jpg","bigUrl":"\/images\/thumb\/4\/45\/3544251-11-1.jpg\/v4-728px-3544251-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Replace anything else in it: 
     { 
 "cmd" 
 : 
 [ 
 "node" 
 , 
 "$file" 
 ], 
 "selector" 
 : 
 "source.js" 
 }
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7c\/3544251-12-1.jpg\/v4-460px-3544251-12-1.jpg","bigUrl":"\/images\/thumb\/7\/7c\/3544251-12-1.jpg\/v4-728px-3544251-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    Now you have created your build system!
    5. Advertisement

Using the Console

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/3544251-13-1.jpg\/v4-460px-3544251-13-1.jpg","bigUrl":"\/images\/thumb\/d\/d6\/3544251-13-1.jpg\/v4-728px-3544251-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/3544251-14-1.jpg\/v4-460px-3544251-14-1.jpg","bigUrl":"\/images\/thumb\/f\/fe\/3544251-14-1.jpg\/v4-728px-3544251-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    This is the build system that you just created.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d0\/3544251-15-1.jpg\/v4-460px-3544251-15-1.jpg","bigUrl":"\/images\/thumb\/d\/d0\/3544251-15-1.jpg\/v4-728px-3544251-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><p>Image by: Uploader<br>\nLicense: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by\/3.0\/\">Creative Commons<\/a>\n<\/p><\/div>"}
    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. Advertisement

Community Q&A

Search
Add New Question
  • Question
    When I type console.log(), why does nothing show up in the console?
    Community Answer
    Because you need to make a build to the current file, using either the build shortcut (Ctrl+B for Windows, and ⌘ Command+B for Mac) or by choosing "Build" from the "Tools" menu.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 14 Helpful 0
  • Question
    What of using the Linux platform?
    Community Answer
    On Linux, go with the node solution. I have tried on Linux Mint 19.1, and it works perfectly.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 2 Helpful 5
  • Question
    Where is the user folder located on MAC or how do you navigate to it?
    Community Answer
    The user folder is located here: Mac HD > Users > yourMacUsername > Library > Application Support > Sublime Text 3 > Packages > User If you're not able to see the 'Library' folder within your MacUsername folder do the following: 1. In Finder navigate to Mac HD > Users > yourMacUsername folder 2. In Finder, goto View > Show View Options... 3. Check the box that says 'Show Library Folder'
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 4 Helpful 2
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!

      Things You’ll Need

      • A computer
      • Sublime Text (a programming text editor)
      • An internet connection and browser (for Node.js method)

      You Might Also Like

      How to
      Enable JavaScript
      How to
      Enable Webgl
      How to
      Use JavaScript Injections
      How to Enable JavaScript in a Browser on a Mac
      How to
      Disable JavaScript
      How to
      Program Using Javascript
      How to
      Enable JavaScript in Mozilla Firefox
      How to
      Change Button Color in Javascript
      How to
      Make a JavaScript Image Rollover
      How to
      Enable JavaScript in Internet Explorer
      4 Ways to Print in JavaScript: Console, Window Alert, & More
      How to Code an Alert with a Variable Using Javascript
      Advertisement

      About This Article

      Thanks to all authors for creating a page that has been read 226,281 times.

      Is this article up to date?

      Advertisement