Web development has its fair share of challenges for everyone, with its ever-changing frameworks and seemingingly never-ending list of tools you "need" to know. But if you're working on a 11" Macbook Air, as I do, you have an even more immediate problem: Finding the screen "real estate" to do web development.
For any given change in a project containing HTML, CSS, and JS, my workflow (after I link my files) would go something like:
As you probably guessed, there is indeed a better way. I can make my workflow more efficient with the Mac's trackpad gestures to view thumbnails of all open windows or use multiple desktops. Although solution would improve my workflow, I really like having all my windows in front of me and I've found that even the context switching of the gestures taxing.
I had already learned I could fire up a local Python server to allow me to preview my projects before I committed them. This effectively ended my commit, view, modify, commit cycle and the messy commit history it leaves behind. Given this experience, I searched for a way to run my Javascript code without using the browser.
It turns out this can be done within a Sublime file - the perfect solution for my cramped screen.
Beautiful, isn't it?
Note: The instructions provided work on Mac OSX and Sublime Text. Other popular editors, such as Atom and Emacs have their own solutions. Windows users will be restricted to Node.js.
To use this console, you need to create a build system for Sublime, since there isn't a default build. In Sublime's Tools dropdown, can select "Build System" and then "New Build System."
Sublime will open a new editor tab with a template for the information you need to enter.
It's interesting to see what the file is doing, but not necessarily to get your console working. Once you replace the contents of your Sublime template file with the following, you'll be ready to save your file as JSC.sublime-build in the User folder.
{
"cmd": ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc", "$file"],
"selector": "source.js"
}
You just made yourself a new build!
To use, you'll need to open the Javascript file you are editing with Sublime, select "Build System," and replace all your console.log() statements with debug() statements. Instead of staining your eyeballs looking for all your console.log() statements, use search and replace. Once you "Find all" you can delete all the console.log() statements and replace with debug(). Then you are ready to build the file with Cmd+B to run your code!
You'll want to remind yourself that you've replaced your console.log() statements so you (or others!) don't waste any time or confusion when it becomes time to view the result in the browser. I like to do this with a simple comment at the top of the file.
/* This file has all console.log() statements replaced with debug() statements so that results can be seen in the editor. */
Congratulate yourself on never having to window-wrangle on a small screen again!