I’ve been working hard on my [terminal.training](https://terminal.training) video course (for anyone wanting to learn about the terminal and command line). In that, I’ve been doing some side research on different terminal applications, and of course…you can run a terminal in you browser…because why not!?

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

In fact, Umar Hansa [demoed this at ffconf 2016](https://2016.ffconf.org/#optimise-your-web-development-workflow), but didn’t have time to go into how you do this. Personally, I’ve tried it and it’s a nice trick, but I won’t be leaving [iTerm2](https://www.iterm2.com/) any time soon. Still, if the image below intrigues you, read on.

![Terminal in the browser](/images/browser-terminal.jpg)

A browser, with a terminal inside it, running a site that teaches you about the terminal…"Inception!" I hear them cry!

How to run a terminal in your browser[](#how-to-run-a-terminal-in-your-browser)

Note that this walk through is only as good as the terminal lasts as an experiment, so if it doesn’t work, check the date (this was written in Feb 2017)!

Step 1: enable the terminal experiment[](#step-1-enable-the-terminal-experiment)

  1. You need to enable devtool experiments, so turn on this Chrome flag: chrome://flags/#enable-devtools-experiments (and you’ll need to reload your browser).

  2. Open up devtools, hit F1 (for settings), then select experiments, hit shift seven times (yes, seven times), and scroll down and select "terminal in drawer".

Now you have the terminal accessible, but it’ll likely say it can’t connect. Shut down Chrome, and follow the next steps.

Step 2: run the terminal tunnel[](#step-2-run-the-terminal-tunnel)

For the terminal in drawer experiment to work, it needs to tunnel through to a local version of devtools. If that sounds funky, it’s because it is funky. But never fear, follow these directions (or copy and paste in your terminal):

$ git clone --depth 1 https://github.com/ChromeDevTools/devtools-frontend.git
$ cd devtools-frontend/services
$ npm install
$ node devtools.js

Step 3: connect Chrome to local devtools[](#step-3-connect-chrome-to-local-devtools)

Now the local devtools will be running, open a new terminal window, and you’ll need to fire up Chrome. These are the directions for a Mac (with some assumptions about the location of Chrome):

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --devtools-flags='service-backend=ws://localhost:9022/endpoint'

Specifically, it’s the --devtools-flags which tells Chrome to connect to your local terminal tunnel.

Et voilà, you have a terminal in your browser. I’ve noticed a few quirks (specifically due to how my prompt is configured), but it does work and you could, combined with workspaces, do all of your development in Chrome if you so felt inclined!

Published 10-Feb 2017 under #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/browser-terminals.md)

Comments

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()

![](/images/no-user.svg)

Hà Nguyễn

0 points

6 years ago

it’s quite funny that when I use the dark theme the terminal becomes bright, and vice versa. Currently the way to fix it is using the bright theme and the "DevTools Author" extension (require "Allow custom UI themes" experiment to be enabled).

Temporary solution in case anyone runs into the same problem.

![](/images/no-user.svg)

Kevin Yue

0 points

7 years ago

Awesome!

![](/images/no-user.svg)

defmoves

0 points

7 years ago

Thanks Remy, that’s a really nice hack. You probably know this already know this, but you can also use web standards (though not in a browser) to implement a terminal with https://hyper.is/

[Commento](https://commento.io)