by Just about every web developer or designer is familiar with Google Chrome’s Developer Tools, which allows for easy browser based debugging, tweaking, and adjusting of web pages and web applications. Those who live in web browsers and text editors know just how useful DevTools is, and with the help of a third party Chrome extension you can make Chrome an even better development tool by adding a Terminal to the existing array of developer tools. Yes, a terminal like Terminal.app, for super quick command line tweaks and adjustments, without ever leaving the Chrome browser.
Installing Terminal in Chrome Developer Tools is extremely easy for Mac users, it’s just a matter of downloading a free Chrome extension:
Get Terminal for DevTools here
Users who are not running OS X on their development machines but still want to install the Terminal in their Chrome browser can do so manually following the instructions using node.js on the developers page here. It’s still pretty easy, just not the one-click install that comes with adding a Chrome extension.
Once installed, accessing the Terminal from Developer Tools is not much different than adjusting page elements, watching the error console, or viewing page source, it’s just a matter of selecting the newly accessible Terminal tab.
Right-click anywhere on a web page and choose “Inspect Element”, then choose the “Terminal” tab
Or use a keyboard shortcut: Control+Shift+i to summon Dev Tools, then select the Terminal tab
The animated GIF from the plugins developer below demonstrates simple usage:
Yes, this is a fully functioning Terminal, and you can tail logs, curl headers, use nano or vi to edit code, update a package, recompile something, watch Star Wars and play Tetris, whatever particular command line magic that is required for your development work.
Important security note: All data used and accessed from DevTools Terminal is transmitted in plain text. Thus, if you plan on using this in a production environment, for ssh, sftp, mysql, or to transmit passwords or any sensitive data in any way, always use https. According to the developer, passwords are not stored in the client, but you will still want to take appropriate security precautions to avoid sending out anything important.
