chrome dev 取色_chrome dev工具协议

chrome dev 取色

A communication protocol is a system of rules that allow two or more entities of a communications system to transmit information via any kind of variation of a physical quantity. The protocol defines the rules, syntax, semantics and synchronization of communication and possible error recovery methods.

通信协议是一种规则系统，其允许通信系统的两个或多个实体通过任何种类的物理量变化来传输信息。 该协议定义了通信的规则，语法，语义和同步以及可能的错误恢复方法。

它是什么 ？ (What is it ?)

The Chrome Dev Tools(CDP) enables us to communicate with the Chromium & Chrome browsers and helps perform

Chrome开发工具(CDP)使我们能够与Chromium和Chrome浏览器进行通信，并有助于执行

• Test Automation
  测试自动化
• Tracing & Troubleshooting
  跟踪与故障排除
• Profiling & Instrumentation
  分析与检测

Many libraries and browser extensions leverage the protocol to orchestrate various actions within the browser. For e.g Puppeteer provides a higher level API on top of the CDP.

许多库和浏览器扩展都利用该协议来协调浏览器中的各种操作。 例如， Puppeteer在CDP之上提供了更高级别的API。

入门 (Getting Started)

In your node project or globally let’s install chrome-remote-interface one of the many third party clients that are available.

在您的节点项目或全局项目中，让我们安装chrome-remote-interface 可用的众多第三方客户之一。

npm i 

This library helps us to interact with the chrome or one of the supported browsers running with a known debugging port. Default is localhost:9222

该库可帮助我们与chrome或使用已知调试端口运行的受支持浏览器之一进行交互。 默认值为localhost：9222

To start chrome with debugging port on a Mac with a remote user profile,

要在具有远程用户配置文件的Mac上通过调试端口启动chrome，

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=remote-profile

Once you do this you should see, a new chrome instance opened and in the shell you see the following

完成此操作后，您应该会看到一个新的chrome实例打开，并且在外壳中看到以下内容

Chrome opened with remote debugging port

Chrome通过远程调试端口打开

让我们做一些追踪 (Let’s do some Tracing)

Let’s assume that you want to dump all the requests that are made when you navigate to a URL.

假设您要转储导航到URL时发出的所有请求。

When you execute this code on the launched chrome you should see the page being loaded

在启动的Chrome上执行此代码时，您应该看到正在加载的页面

and on the console you should see all the request urls being printed

在控制台上，您应该看到所有正在打印的请求网址

Now to understand what is happening here

现在了解这里发生了什么

• First we are establishing a connection to the chrome using the debugging port
  首先，我们使用调试端口建立与chrome的连接
• The protocol defines a number of domains like Network, Page, Debugger etc. and each of them exposes a set of methods that can be used to track the activities pertaining to that domain.
  该协议定义了许多域，例如网络，页面，调试器等，每个域都公开了一组方法，可用于跟踪与该域有关的活动。
• We enable each of these domains and ensure that the activities can be tracked.
  我们启用每个域，并确保可以跟踪活动。
• Register a callback to the event that we are interested in
  注册对我们感兴趣的事件的回调

Network.requestWillBeSent((params) => {      console.log(params.request.url);});

• Then we navigate to the url that we want to do the tracing.
  然后，我们导航到要进行跟踪的URL。

To make it a little bit more interesting let’s assume you want to build a utility which will count all the images that are loaded as part of your website’s homepage. Maybe you want to restrict the number of images that are rendered as part of your homepage and you want to keep track of it during the CI process. If the number of images goes beyond a number you want to notify the developers.

为了使它更具趣味性，让我们假设您要构建一个实用程序，该实用程序将计算作为网站主页一部分加载的所有图像。 也许您想限制作为主页一部分呈现的图像的数量，并且想要在CI流程中跟踪它。 如果图像数量超出数量，则您想通知开发人员。

Now when you run this code, you would see the following result in the console.

现在，当您运行此代码时，您将在控制台中看到以下结果。

Response grouped by mime-type

响应按mime类型分组

Here we get number of response grouped by their type and then counting them. You can integrate this script into your integration testing pipeline to ensure that the number of images is within your budget.

在这里，我们得到按响应类型分组的响应数，然后对其进行计数。 您可以将此脚本集成到集成测试管道中，以确保图像数量在预算范围内。

Tools like lighthouse and Tracerbench use CDP to collect most of their metrics like user timing, response size etc. and lets you do the following,

诸如lighthouse和Tracerbench之类的工具使用CDP来收集其大多数指标，例如用户计时，响应大小等，并允许您执行以下操作：

• Perform Audit
  执行审核
• Performance Benchmarks
  绩效基准
• Best Practices and Reports
  最佳做法和报告

翻译自: https://medium.com/@rengarajanm/chrome-dev-tools-protocol-2d0ef2baf4bf

chrome dev 取色