chorme 中的功能越來越強大, 不僅可以編輯文件, 如果能直接使用控制台, 那運行系統命令什么的也都不用再切換窗口了. 這次真的邊開發邊預覽了!
目前有兩個實現方式, 外部插件版及官方測試版.
ps: 希望官方版早點發布.
外部插件版
DevTools Terminal 是一個Chrome DevTools擴展, 它把操作系統終端功能帶入到Chrome瀏覽器中.
你可以在Chrome DevTools開發者工具中使用操作系統終端來完成需要執行的shell命令和操作.
$ sudo npm install -g devtools-terminal
npm http GET https://registry.npmjs.org/devtools-terminal
npm http 304 https://registry.npmjs.org/devtools-terminal
...
...
...
npm http 200 https://github.com/component/global/archive/v2.0.1.tar.gz
/usr/local/bin/devtools-terminal -> /usr/local/lib/node_modules/devtools-terminal/bin/devtools-terminal
devtools-terminal@0.1.2 /usr/local/lib/node_modules/devtools-terminal
├── mkdirp@0.5.0 (minimist@0.0.8)
├── optimist@0.6.1 (wordwrap@0.0.2, minimist@0.0.10)
├── pty.js@0.2.4 (extend@1.2.1, nan@0.7.0)
└── socket.io@1.0.6 (debug@0.7.4, engine.io@1.3.1, has-binary-data@0.1.1, socket.io-parser@2.2.0, socket.io-adapter@0.2.0, socket.io-client@1.0.6)
告訴Chrome瀏覽器在哪里去找到它
$ sudo devtools-terminal --install --id=leakmhneaibbdapdoienlkifomjceknl
Chrome Native Messaging host application installed successfully
快捷鍵
Mac OS X: Option + Command + I
Windows : Ctrl + Shift + I 或 F12
官方測試版
DevTools中內置了一個實驗終端。您可以將此功能與 Filesystem 2.0 結合使用，以對代碼進行實時更改，並實時查看HTML，CSS和JavaScript的整理輸出。
當您運行DevTools終端時，可以在更改代碼時啟動 Gulp / Grunt / Webpack 等觀察程序來運行 linters。
警告：DevTools Terminal 處於試驗階段。事情可能會改變或放棄。
以下演示在 Mac OS X 中使用 chorme 終端的步驟。
獲取DevTools倉庫：
$ git clone --depth 1 https://github.com/ChromeDevTools/devtools-frontend.git && cd devtools-frontend/services && npm i
啟動終端腳本：
$ node devtools.js
啟動 Canary：
$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --devtools-flags='service-backend=ws://localhost:9022/endpoint'
- 前往 chrome 設置面板,
- Settings>Experiments 按 Shift 6 次
- 啟用Terminal in Drawer實驗
- 重新啟動 DevTools
- 通過tab訪問 DevTools 終端
擴展閱讀
https://umaar.com/dev-tips/139-devtools-terminal-linting/
https://remysharp.com/2017/02/10/browser-terminals https://github.com/petethepig/devtools-terminal
http://developerworks.github.io/2014/08/02/chrome-devtools-terminal/
https://www.html5rocks.com/en/tutorials/developertools/devtools-terminal/