Chrome 黑科技,如何在 Chrome DevTools 中运行终端

先来看一张最终效果图:

clipboard.png

具体步骤

  1. 打开 Chrome DevTools 的实验功能:用 Chrome 打开 chrome://flags/#enable-devtools-experiments(选择开启,然后重启浏览器);

  2. 打开 Chrome DevTools,按 F1 键,选择左侧的 Experiments 标签,然后连续按 7 下 shift 键,在显示出的实验功能中勾选 Terminal in drawer

  3. 然后从右上角的菜单中选择 Terminal,如下:
    clipboard.png

  4. 如果提示 Terminal service is not available 请按下面的步骤继续进行。

  5. 安装 devtools-backend 工具(需要 node 5.10.0 及以上版本),并运行 devtools-backend 命令。

    npm i -g devtools-backend
    devtools-backend
  6. 退出 Chrome,然后在命令行中运行以下命令(Windows 中要修改为 Chrome 的具体路径)打开 Chrome。

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --devtools-flags='service-backend=ws://localhost:9022/endpoint'
  7. 再次打开 DevTools 的 Terminal,就会看到效果了。

注:默认打开的是 bash,如果安装了 zsh 的话,可以在 Terminal 中运行 zsh 进行切换。还等什么,赶快来体验一下吧。

参考:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值