Using Your Terminal From The DevTools

HTML5 Rocks

Introduction

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.

DevTools Terminal is great for quick command-line tweaks
DevTools Terminal is useful for quick command-line tweaks from inside Chrome while working on your webapp.
Using cURL in DevTools Terminal
After using Copy as cURL in the Network Panel, I can easily paste the complete command into DevTools Terminal and run it.

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.

Running Grunt in DevTools Terminal
Running build tasks with Grunt without having to leave the browser.

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.

Git workflow
A complete git workflow is also possible. Great for a git diff after authoring in a Workspace.

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

Authoring workflow
Begin new projects with a git clone, yeoman or any other tool accessible via the terminal.

My personal workflow for authoring in Chrome now looks a little like this:

  • DevTools Terminal: use it to git clone a GitHub repository, touch a new file or run yo (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.

Using ls in the terminal
List filenames in the current working directory using ls. Great for visualizing directories outside of your Workspace.

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.

DevTools Terminal supports customizing connection details during setup.

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:

DevTools Terminal supports both a light theme and a dark theme
At present, the extension supports both the default light theme and a dark theme.

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!.

Comments

0