DevTools Terminal is a new Chrome DevTools extension that brings the power of the terminal to your browser. If you ever find yourself context-switching between Chrome and the command-line for tasks like: pulling down assets, using git, grunt, wget or even vim - you may find this extension a useful time-saver.
Why use a terminal in the browser?
During development, you’re probably used to working with a few different tools: your text editor for authoring, a browser for testing and debugging and the terminal for updating packages, curling headers or even a build process using Grunt.
Having to switch contexts between tools during development can be distracting and can lead to inefficiency. We’ve previously talked about how (for certain types of projects) you can debug and author code directly inside the Chrome DevTools using Workspaces without leaving the browser.
DevTools Terminal (by Dmitry Filimonov) completes that story, making it possible to code, debug and build from inside the same window. You get access to tab, ctrl and even Git colors making it feel familiar to the terminal you’ve used to using in your daily workflow.
Workflow
My personal workflow for authoring in Chrome now looks a little like this:
- DevTools Terminal use it to
git clonea GitHub repository,toucha new file or runyo (yeoman)to create an app. If I want I can launch a new server to preview the app too - Workspaces: edit and debug my webapp inside Chrome. If I launched a server earlier I can map my local project to my network files. I can use Sass or Less and have my CSS preprocessor changes mapped back to my CSS files.
- DevTools Terminal: I can now commit to source control, use a package manager (npm, bower) to pull down dependencies or run my build process (grunt, make) to generate an optimized version of the same app.
- Although it can take a while to get used to the window arrangement, it’s pleasant being able to achieve most of what I need from inside the browser.
Installation
DevTools Terminal can be installed from the Chrome Web Store. If you’re a Mac or Linux user, once you’ve added it to Chrome, you can simply "Inspect Element" or Ctrl + Shift + I to open up the DevTools and you’ll be able to access it via the new “Terminal” tab.
Windows users will need to connect the extension to the system terminal using a Node.js proxy. To get this setup, install the devtools-terminal module from npm:
npm install -g devtools-terminal
Then open up a new command-line window and run devtools-terminal. Next, open up the DevTools and in the "Terminal" tab, connect to the server using the default configuration options. You’ll be able to customize the port and address further if needed.
Limitations
DevTools Terminal does have a few limitations worth noting. Unlike Terminal.app or iTerm2 on the Mac, it doesn’t yet support tabs, multiple windows or history playback. You can however open as many new tabs of Chrome as you like, each of which can have their own DevTools Terminal instance. This can be done from the Chrome Apps screen:
This extension currently relies on NPAPI, which is being phased out over the next year in favor of the Native Messaging API. DevTools Terminal author Dmitry Fillimonov plans to move away from NPAPI in favor of either this API or the Native Client API in the near future.
Conclusions
DevTools Terminal (and extensions similar to it, like Auxilio) can help you avoid switching back and forth between your editor, the browser and command-line during development. Whilst an in-browser terminal may not be everyone’s cup of tea, you may find the extension a useful complement to your workflow and we encourage you to try it out and see how you like it!