怎么在 Chrome DevTools 中运行终端?(方法介绍) - 网站

怎么在 Chrome DevTools 中运行终端?(方法介绍)

分类:Chrome(谷歌浏览器)使用教程 · 发布时间:2020-09-15 18:23 · 阅读:1621

怎么在 Chrome DevTools 中运行终端?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

相关推荐:chrome开发者工具

先来看一张最终效果图:

1.png-600

具体步骤

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

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

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

    2.png-600

  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 进行切换。还等什么,赶快来体验一下吧。

参考:

本文转载自:https://segmentfault.com/a/1190000008445976

想要了解更多相关知识,可访问 前端学习网站!!

标签:
Chrome DevTools 终端

相关文章

DevTools(Chrome 85)的新增功能

DevTools是开发和测试Web应用时最有用的工具之一。在Chrome85中,DevTools做了一些改进。在本文中,将回顾与样式编辑和新的JavaScript功能相关的更改,以及Source和Performance面板中的改进。

10个应该启用的超棒Chrome功能!

如果你能神奇地将你的浏览器升级为普通Chrome用户不知道的功能,这不是很酷吗?以下是十个Chrome功能,可帮助你做到这一点。这些实验性功能,默认情况下尚未启用。

Chrome浏览器怎么安装Chrome扩展插件?

Chrome浏览器怎么安装Chrome扩展插件?下面本篇文章给大家介绍一下两种安装Chrome扩展插件的方法。下面给大家介绍一下,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Chrome浏览器怎么将语言改成中文?

Chrome浏览器怎么将语言改成中文?下面本篇文章给大家介绍一下Google Chrome浏览器由英文语言改成中文版的方法。下面给大家介绍一下,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

推荐一些好用的Chrome插件

本篇文章给大家推荐一些好用的Chrome插件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

返回分类 返回首页