【譯】chrome-remote-interface

lentoo 發(fā)布于2019-08-20 18:27 / 777人閱讀

摘要：該支持下列事件當(dāng)?shù)降倪B接已建立時(shí)觸發(fā)。取得該調(diào)試協(xié)議描述符。在關(guān)閉請(qǐng)求收到響應(yīng)后執(zhí)行，他將獲得下列參數(shù)一個(gè)對(duì)象，指明成功狀態(tài)當(dāng)缺省時(shí)，將返回一個(gè)對(duì)象。當(dāng)缺省時(shí)，將返回一個(gè)對(duì)象，並且狀態(tài)取決于屬性。

本文翻譯自：chrome-remote-interface
原文更新時(shí)間：July 21,2017
譯者：Pandorym

Chrome 調(diào)試協(xié)議的接口，他提供一個(gè)使用 JavaScript API 的簡(jiǎn)單的命令和通知抽象，幫助使用 Chrome（或任何其他合適的實(shí)現(xiàn)）。

這個(gè)模塊是眾多第三方協(xié)議客戶(hù)端之一。

簡(jiǎn)單的 API 用法

下列片段加載https://github.com，并轉(zhuǎn)儲(chǔ)每個(gè)請(qǐng)求：

const CDP = require("chrome-remote-interface");

CDP((client) => {
    // extract domains
    const {Network, Page} = client;
    // setup handlers
    Network.requestWillBeSent((params) => {
        console.log(params.request.url);
    });
    Page.loadEventFired(() => {
        client.close();
    });
    // enable events then start!
    Promise.all([
        Network.enable(),
        Page.enable()
    ]).then(() => {
        return Page.navigate({url: "https://github.com"});
    }).catch((err) => {
        console.error(err);
        client.close();
    });
}).on("error", (err) => {
    // cannot connect to the remote endpoint
    console.error(err);
});

在維基中尋找更多的例子，特別注意，上面的例子可以改寫(xiě)成 async / await 原型。

你可能還想查看 FAQ。

安裝

npm install chrome-remote-interface

全局安裝（-g）可以使用附隨的客戶(hù)端。

實(shí)現(xiàn)

這個(gè)模塊應(yīng)該和每個(gè)實(shí)現(xiàn)了 Chrome 調(diào)試協(xié)議的應(yīng)用程序一起工作。特別是，它已經(jīng)對(duì)以下實(shí)現(xiàn)進(jìn)行了測(cè)試：

Implementation	Protocol version	Protocol	List	New	Activate	Close	Version
Google Chrome	tip-of-tree	yes	yes	yes	yes	yes	yes
Microsoft Edge	partial	yes	yes	no	no	no	yes
Node.js (v6.3.0+)	node	yes	no	no	no	no	yes
Safari (iOS)	partial	no	yes	no	no	no	no

目標(biāo)（target）的含義根據(jù)實(shí)現(xiàn)而差異，例如，每個(gè) Chrome 標(biāo)籤代表一個(gè)目標(biāo)，而對(duì)於 Node.js 一個(gè)目標(biāo)是當(dāng)前視察的腳本。

設(shè)置

為了使用這個(gè)模塊，Chrome 自身或其他實(shí)現(xiàn)的實(shí)例需要運(yùn)行在一個(gè)已知端口（默認(rèn)為localhost:9222）。

Choreme/Chromium Desktop

啟動(dòng) Chrome 時(shí)，使用--remote-debugging-port選項(xiàng)，例如：

google-chrome --remote-debugging-port=9222

Headless

在 59 之後的版本，額外使用--headless選項(xiàng)，例如：

google-chrome --headless --remote-debugging-port=9222

Android

插入設(shè)備，并啟動(dòng) 端口轉(zhuǎn)發(fā)，例如：

adb forward tcp:9222 localabstract:chrome_devtools_remote

WebView

為了視察，WebView 必需已配置調(diào)試，並且對(duì)應(yīng)的進(jìn)程 ID 必需是已知的。有幾種方法可以獲得它，例如：

adb shell grep -a webview_devtools_remote /proc/net/unix

最後，可以使用如下方式啟動(dòng)端口轉(zhuǎn)發(fā)：

adb forward tcp:9222 localabstract:webview_devtools_remote_

Edge

安裝并運(yùn)行 Edge 診斷配適器（Diagnostics Adapter）。

Node.js

啟動(dòng) Node.js 使附加--inspect選項(xiàng)，例如：

node --inspect=9222 script.js

Safari (iOS)

安裝并運(yùn)行 iOS WebKit 調(diào)試代理（Debug Proxy）。

附隨的客戶(hù)端

這個(gè)模塊有一個(gè)附隨的客戶(hù)端應(yīng)用程序，他可用於交互式的控制遠(yuǎn)程實(shí)例。

目標(biāo)管理

該附隨的客戶(hù)端提供用於與 HTTP 前端交互的子命令（例如，List、New 等）,運(yùn)行--help以顯示一個(gè)可用選項(xiàng)的列表。

下面是一些例子：

$ chrome-remote-interface new "http://example.com"
{
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "id": "b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "thumbnailUrl": "/thumb/b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "title": "",
    "type": "page",
    "url": "http://example.com/",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/b049bb56-de7d-424c-a331-6ae44cf7ae01"
}
$ chrome-remote-interface close "b049bb56-de7d-424c-a331-6ae44cf7ae01"

查閱

使用子命令inspect可以以 REPL 方式進(jìn)行命令執(zhí)行和事件綁定。不像常規(guī)的 API，該回調(diào)被重寫(xiě)了，以方便顯示命令的返回值和事件的信息。還有，這里的事件綁定是簡(jiǎn)化的，執(zhí)行一個(gè)速寫(xiě)方法（例如Page.loadEventFired()）切換事件註冊(cè)。

記住，該 REPL 接口提供了實(shí)現(xiàn)。

這是一個(gè)簡(jiǎn)單的片段：

$ chrome-remote-interface inspect
>>> Runtime.evaluate({expression: "window.location.toString()"})
{ result:
   { result:
      { type: "string",
        value: "https://www.google.it/_/chrome/newtab?espv=2&ie=UTF-8" },
     wasThrown: false } }
>>> Page.enable()
{ result: {} }
>>> Page.loadEventFired() // registered
{ "Page.loadEventFired": true }
>>> Page.loadEventFired() // unregistered
{ "Page.loadEventFired": false }
>>> Page.loadEventFired() // registered
{ "Page.loadEventFired": true }
>>> Page.navigate({url: "https://github.com"})
{ result: { frameId: "28677.1" } }
{ "Page.loadEventFired": { timestamp: 21385.383076 } }
>>> Runtime.evaluate({expression: "window.location.toString()"})
{ result:
   { result: { type: "string", value: "https://github.com/" },
     wasThrown: false } }

事件過(guò)濾

為了減少來(lái)自事件監(jiān)聽(tīng)器的數(shù)據(jù)顯示量，可以提供一個(gè)過(guò)濾函數(shù)。在這個(gè)例子中，只顯示資源的 URL：

$ chrome-remote-interface inspect
>>> Network.enable()
{ result: {} }
>>> Network.requestWillBeSent(params => params.request.url)
{ "Network.requestWillBeSent": "params => params.request.url" }
>>> Page.navigate({url: "https://www.wikipedia.org"})
{ "Network.requestWillBeSent": "https://www.wikipedia.org/" }
{ result: { frameId: "5530.1" } }
{ "Network.requestWillBeSent": "https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia_wordmark.png" }
{ "Network.requestWillBeSent": "https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" }
{ "Network.requestWillBeSent": "https://www.wikipedia.org/portal/wikipedia.org/assets/js/index-3b68787aa6.js" }
{ "Network.requestWillBeSent": "https://www.wikipedia.org/portal/wikipedia.org/assets/js/gt-ie9-c84bf66d33.js" }
{ "Network.requestWillBeSent": "https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-bookshelf_icons.png?16ed124e8ca7c5ce9d463e8f99b2064427366360" }
{ "Network.requestWillBeSent": "https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-project-logos.png?9afc01c5efe0a8fb6512c776955e2ad3eb48fbca" }

內(nèi)置文檔

在 REPL和常規(guī) API 中的每個(gè)協(xié)議對(duì)象都擁有在元信息中找到的描述符。此外，還添加了一個(gè)category字段，譯確定成員是command、event或type。

例如，學(xué)習(xí)如何調(diào)用Page.navigate：

>>> Page.navigate
{ [Function]
  category: "command",
  parameters: { url: { type: "string", description: "URL to navigate the page to." } },
  returns:
   [ { name: "frameId",
       "$ref": "FrameId",
       hidden: true,
       description: "Frame id that will be navigated." } ],
  description: "Navigates current page to the given URL.",
  handlers: [ "browser", "renderer" ] }

學(xué)習(xí)來(lái)自Network.requestWillBeSent事件的參數(shù)：

>>> Network.requestWillBeSent
{ [Function]
  category: "event",
  description: "Fired when page is about to send HTTP request.",
  parameters:
   { requestId: { "$ref": "RequestId", description: "Request identifier." },
     frameId:
      { "$ref": "Page.FrameId",
        description: "Frame identifier.",
        hidden: true },
     loaderId: { "$ref": "LoaderId", description: "Loader identifier." },
     documentURL:
      { type: "string",
        description: "URL of the document this request is loaded for." },
     request: { "$ref": "Request", description: "Request data." },
     timestamp: { "$ref": "Timestamp", description: "Timestamp." },
     wallTime:
      { "$ref": "Timestamp",
        hidden: true,
        description: "UTC Timestamp." },
     initiator: { "$ref": "Initiator", description: "Request initiator." },
     redirectResponse:
      { optional: true,
        "$ref": "Response",
        description: "Redirect response data." },
     type:
      { "$ref": "Page.ResourceType",
        optional: true,
        hidden: true,
        description: "Type of this resource." } } }

視察Network.Request類(lèi)型（注意，不同於命令和時(shí)間，類(lèi)型使用大駝峰拼寫(xiě)法）：

>>> Network.Request
{ category: "type",
  id: "Request",
  type: "object",
  description: "HTTP request data.",
  properties:
   { url: { type: "string", description: "Request URL." },
     method: { type: "string", description: "HTTP request method." },
     headers: { "$ref": "Headers", description: "HTTP request headers." },
     postData:
      { type: "string",
        optional: true,
        description: "HTTP POST request data." },
     mixedContentType:
      { optional: true,
        type: "string",
        enum: [Object],
        description: "The mixed content status of the request, as defined in http://www.w3.org/TR/mixed-content/" },
     initialPriority:
      { "$ref": "ResourcePriority",
        description: "Priority of the resource request at the time request is sent." } } }

Chrome 調(diào)試協(xié)議版本

chrome-remote-interface默認(rèn)使用本地版本的協(xié)議描述符。不停的更新這個(gè)文件，使用scripts/update-protocol.sh並且推送到這個(gè)倉(cāng)庫(kù)。

這種行為可以改變?cè)?connection 的remote選項(xiàng)為true，在這種情況，遠(yuǎn)程實(shí)例要求自己提供協(xié)議描述符。

Chrome < 60.0.3097.0 不支持這麼做，所以當(dāng)這種情況，將從源倉(cāng)庫(kù)獲取協(xié)議描述符。

有三個(gè)選項(xiàng)可以覆蓋上述行為：

使用特定的協(xié)議描述符 connection (protocol 選項(xiàng))；

用原始版本的命令和事件接口來(lái)使用前沿特性，這不會(huì)出現(xiàn)在本地版本的協(xié)議描述符；

更新scripts/update-protocol.sh的本地副本（當(dāng)使用npm install獲取時(shí)不存在）。

瀏覽器用法

這個(gè)模塊可以運(yùn)行在 Web 上下文，但有明顯的局限性，即外部 HTTP請(qǐng)求（List,New 等）不能直接執(zhí)行，因此為了使用它用戶(hù)必須提供一個(gè)全局 criRequest：

function criRequest(options, callback) {}

options與在 Node.js http模塊中的寫(xiě)法一樣，並且callback是一個(gè)接受兩個(gè)參數(shù)的函數(shù)：err（JavaScript Error對(duì)象，或null）和data（字符串返回值）。

使用 webpack

只需要使用這個(gè)模塊，他就會(huì)工作：

const CDP = require("chrome-remote-interface");

使用 non-minified 版本手動(dòng)運(yùn)行 webpack ：

DEBUG=true npm run webpack

使用 Vanilla JavaScript

生成一個(gè) JavaScript 文件，這可以使用

API
該 API 由三部分組成：

DevTools 方法（對(duì)於那些實(shí)現(xiàn) 的支持，例如，List、New 等）；

建立連接；

該實(shí)際上的協(xié)議接口；
CDP([options], [callback])
使用 Chrome 調(diào)試協(xié)議連接一個(gè)遠(yuǎn)程實(shí)例。
options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

target：確定這個(gè)客戶(hù)端應(yīng)該連接到哪個(gè)目標(biāo)。行為根據(jù)類(lèi)型的變化而變化：

一個(gè)function，該函數(shù)以List方法返回的數(shù)組作為參數(shù)，并返回一個(gè)目標(biāo)、或目標(biāo)在數(shù)組中的數(shù)值索引；

一個(gè)目標(biāo)object，如New或List方法的返回值；

一個(gè)string，他表示原始 WebSocket URL，在這種情況，host和port不用於獲取目標(biāo)列表，但是他們將用於使相對(duì) URL 變得完整。

一個(gè)string，他表示目標(biāo) id。

默認(rèn)是一個(gè)實(shí)現(xiàn)了返回第一個(gè)可用目標(biāo)的函數(shù)。（注意，最多可在同一目標(biāo)上建立一個(gè)連接）；

protocol：Chrome 調(diào)試協(xié)議描述符對(duì)象。默認(rèn)使用根據(jù)遠(yuǎn)程選項(xiàng)選擇的協(xié)議；

remote：一個(gè)布爾值，指示協(xié)議是否必須遠(yuǎn)程獲取，或者必須使用本地版本。如果設(shè)置了protocol選項(xiàng)，這個(gè)選擇不會(huì)生效。默認(rèn)值為false。

這些選項(xiàng)在該CDP類(lèi)實(shí)例的所有操作都是有效屬性。除此之外， webSocketURL字段包含當(dāng)前使用的 WebSocket URL。

callback是一個(gè)監(jiān)聽(tīng)器，將自動(dòng)添加到返回EventEmitter的connect事件。當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象，如果觸發(fā)connect事件即為成功（fulfilled），如果觸發(fā)error事件即為失敗（rejected）。

該EventEmitter支持下列事件：
Event: "connetn"
function (client) {}

當(dāng)?shù)?WebSocket 的連接已建立時(shí)觸發(fā)。

client是一個(gè)CDP類(lèi)的實(shí)例。
Event: "error"
function (err) {}

當(dāng)不能訪(fǎng)問(wèn)http://host:port/json，或不能連接到 WebSocket 時(shí)觸發(fā)。

err是一個(gè)Error的實(shí)例。
CDP.Protocol([options], [callback])
取得該 Chrome 調(diào)試協(xié)議描述符。

options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

remote：一個(gè)布爾值，指示協(xié)議是否必須遠(yuǎn)程獲取，或者必須使用本地版本。如果不能完成請(qǐng)求，則使用本地版本。默認(rèn)值為false。

callback在取得協(xié)議后執(zhí)行，他將獲得下列參數(shù)：

err：一個(gè)Error對(duì)象，指明成功狀態(tài)；

protocol：一個(gè)對(duì)象，擁有下列屬性：

remote：一個(gè)布爾值，指明返回的描述符是否是遠(yuǎn)程版本（取決于用戶(hù)選擇或錯(cuò)誤）；

descriptor：該 Chrome 調(diào)試協(xié)議描述符。

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。

For example:

const CDP = require("chrome-remote-interface"); CDP.Protocol(function (err, protocol) { if (!err) { console.log(JSON.stringify(protocol.descriptor, null, 4)); } });
CDP.List([options], [callback])
請(qǐng)求遠(yuǎn)程實(shí)例的打開(kāi)的可用目標(biāo) / 標(biāo)籤的列表。

options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

callback在正確取得列表后執(zhí)行，他將獲得下列參數(shù)：

err：一個(gè)Error對(duì)象，指明成功狀態(tài)；

targets：該數(shù)組返回`http://host:port/json/list中包含的目標(biāo)列表。

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。

For example:

const CDP = require("chrome-remote-interface"); CDP.List(function (err, targets) { if (!err) { console.log(targets); } });
CDP.New([options], [callback])
在遠(yuǎn)程實(shí)例中創(chuàng)建一個(gè)新的目標(biāo) / 標(biāo)籤。

options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

url：URL 用於載入新目標(biāo) / 標(biāo)籤。默認(rèn)為about:blank。

callback在創(chuàng)建目標(biāo)后執(zhí)行，他將獲得下列參數(shù)：

err：一個(gè)Error對(duì)象，指明成功狀態(tài)；

targets：該對(duì)象，來(lái)自http://host:port/json/new中包含的目標(biāo)。

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。

For example:

const CDP = require("chrome-remote-interface"); CDP.New(function (err, target) { if (!err) { console.log(target); } });
CDP.Activate([options], [callback])
在遠(yuǎn)程實(shí)例中激活一個(gè)目標(biāo) / 標(biāo)籤。

options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

id：目標(biāo) id。必填，無(wú)默認(rèn)值。

callback在激活請(qǐng)求收到響應(yīng)后執(zhí)行，他將獲得下列參數(shù)：

err：一個(gè)Error對(duì)象，指明成功狀態(tài)；

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。

For example:

const CDP = require("chrome-remote-interface"); CDP.Activate({"id": "CC46FBFA-3BDA-493B-B2E4-2BE6EB0D97EC"}, function (err) { if (!err) { console.log("target is activated"); } });
CDP.Close([options], [callback])
關(guān)閉一個(gè)在遠(yuǎn)程實(shí)例中打開(kāi)的目標(biāo) / 標(biāo)籤。

options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

id：目標(biāo) id。必填，無(wú)默認(rèn)值。

callback在關(guān)閉請(qǐng)求收到響應(yīng)后執(zhí)行，他將獲得下列參數(shù)：

err：一個(gè)Error對(duì)象，指明成功狀態(tài)；

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。

For example:

const CDP = require("chrome-remote-interface"); CDP.Close({"id": "CC46FBFA-3BDA-493B-B2E4-2BE6EB0D97EC"}, function (err) { if (!err) { console.log("target is closing"); } });

注意，當(dāng)目標(biāo)排隊(duì)等待刪除時(shí)，該回調(diào)將被觸發(fā)，但真正的刪除將異步執(zhí)行。
CDP.Version([options], [callback])
從遠(yuǎn)程實(shí)例請(qǐng)求版本信息。

options是一個(gè)對(duì)象，并有下列可選屬性：

host：HTTP 前端主機(jī)。默認(rèn)為localhost；

port：HTTP 前端端口。默認(rèn)為9222；

secure：HTTPS/WSS 前端。默認(rèn)為false；

callback在正確獲得版本信息后執(zhí)行，他將獲得下列參數(shù)：

err：一個(gè)Error對(duì)象，指明成功狀態(tài)；

info：一個(gè) JSON 對(duì)象，來(lái)自http://host:port/json/version包含的版本信息。

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。

For example:

const CDP = require("chrome-remote-interface"); CDP.Version(function (err, info) { if (!err) { console.log(info); } });
Class: CDP Event: "event"
function (message) {}

當(dāng)遠(yuǎn)程實(shí)例通過(guò) WebSocket 發(fā)送任何通知時(shí)觸發(fā)。

message是接收的對(duì)象，他有下列屬性：

method：一個(gè)字符串，描述該通知（例如）"Network.requestWillBeSent"）；

params：一個(gè)對(duì)象，包含有效載荷（payload）。

參考 Chrome 調(diào)試協(xié)議規(guī)格獲取更多信息。

For example:

client.on("event", function (message) { if (message.method === "Network.requestWillBeSent") { console.log(message.params); } });
Event: "."
function (params) {}

當(dāng)遠(yuǎn)程實(shí)例通過(guò) WebSocket 發(fā)送關(guān)於.的通知時(shí)觸發(fā)。

params：一個(gè)對(duì)象，包含有效載荷（payload）。

這是一個(gè)實(shí)用的時(shí)間，他可以很容易的偵聽(tīng)特定的時(shí)間（看 "event"），for example:

client.on("Network.requestWillBeSent", console.log);
Event: "ready"
function () {}

每次不存在等待遠(yuǎn)程實(shí)例響應(yīng)的命令時(shí)觸發(fā)。交互是異步的，序列化命令隊(duì)列的唯一方式是使用 send 方法提供的回調(diào)。這個(gè)時(shí)間起到一個(gè)屏障作用，並且在某些簡(jiǎn)單情況下，可以避免回調(diào)地獄。

鼓勵(lì)使用者廣泛的檢查每個(gè)方法的響應(yīng)，並且在處理複雜的異步程序流是應(yīng)該更喜歡 promises API。

例如，僅在啟用了Network和Page域的通知后才加載 URL：

client.Network.enable(); client.Page.enable(); client.once("ready", function () { client.Page.navigate({"url": "https://github.com"}); });

在這個(gè)特殊的情況下，不強(qiáng)制序列化執(zhí)行可能導(dǎo)致遠(yuǎn)程實(shí)例不能正確的交付通知該客戶(hù)端。
Event: "disconnect"
function () {}

當(dāng)實(shí)例關(guān)閉該 WebSocket 連接時(shí)觸發(fā)。

這可能發(fā)生在當(dāng)用戶(hù)打開(kāi) DevTools 或關(guān)閉標(biāo)籤。
client.send(method, [params], [callback])
向遠(yuǎn)程實(shí)例發(fā)出一個(gè)命令。

method 是一個(gè)描述命令的字符串。

params 是一個(gè)對(duì)象，包含有效載荷。

callback 是在收到遠(yuǎn)程實(shí)例關(guān)於這個(gè)命令的響應(yīng)時(shí)執(zhí)行，他將獲得下列參數(shù)：

error：一個(gè)布爾值，指明成功狀態(tài)，來(lái)自遠(yuǎn)程實(shí)例；

response：一個(gè)對(duì)象，包含響應(yīng)（result 字段，如果error === false）或者錯(cuò)誤知識(shí)（error字段，如果`error === true）。

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象，並且 fulfilled/rejected 狀態(tài)取決于error屬性。

在低等級(jí) WebSocket 錯(cuò)誤的情況下，該error包含產(chǎn)生的Error對(duì)象，並且沒(méi)有response返回。

注意，他的字段id在 Chrome 調(diào)試協(xié)議中提到是內(nèi)部管理的，並且不向用戶(hù)揭露。

For example:

client.send("Page.navigate", {"url": "https://github.com"}, console.log);
client..([params], [callback])
就是一個(gè)速寫(xiě)：

client.send(".", params, callback);

For example:

client.Page.navigate({"url": "https://github.com"}, console.log);
client..([callback])
就是一個(gè)速寫(xiě)：

client.on(".", callback);

唯一的區(qū)別是，當(dāng)callback省卻時(shí)，事件只註冊(cè)一次，并返回一個(gè)Promise對(duì)象。

For example:

client.Network.requestWillBeSent(console.log);
client.close([callback])
關(guān)閉到遠(yuǎn)程實(shí)例的連接。

callback當(dāng)該 WebSocket 成功關(guān)閉時(shí)執(zhí)行。

當(dāng)callback缺省時(shí)，將返回一個(gè)Promise對(duì)象。
FAQ
調(diào)用Domain.method，我獲得提示Domain.method is not a function

這意味著你正在使用的協(xié)議描述符中不包含Domain.method。如果你確信你的 Chrome 實(shí)例支持這種方法，你可以直接調(diào)用它：

client.send("Domain.method", ...);

或者詢(xún)問(wèn) Chrome 正確的協(xié)議描述符是什麼：

CDP({remote: true});

看這裡，獲得更多信息。

調(diào)用Domain.method，我獲得提示Domain.method wasn"t found

這意味著你正在使用的協(xié)議描述符包含一個(gè)不受 Chrome 實(shí)例支持的方法。最有可能的原因是，你正在嘗試使用一個(gè)最前沿的功能，試試升級(jí)到新的 Chrome 版本吧。

看這裡，獲得更多信息。

檢查正確的協(xié)議描述符：

$ chrome-remote-interface inspect --remote

Headless Chrome 問(wèn)題？

記住，--headless Chrome 是相對(duì)較新的，他的操作指南（in Chrome）還在制定中。如果你認(rèn)為遇到了一個(gè) Bug，那麼就看看這些開(kāi)放性 issues，尤其是外部 issues。

為什麼當(dāng)我在 Docker 容器中運(yùn)行 Chrome 時(shí)，我的程序會(huì)停滯或表現(xiàn)得出乎意料呢？

這是因?yàn)樵?Docker 的默認(rèn)設(shè)置中，/dev/shm的大小被設(shè)置為 64MB，這可能不足以讓 Chrome 跳轉(zhuǎn)到某些網(wǎng)頁(yè)。

你可以改變這個(gè)值，在運(yùn)行你的容器時(shí)附帶說(shuō)，--shm-size=256m。
投稿者
Andrey Sidorov

Greg Cochard
資源
Chrome Debugging Protocol

Chrome Debugging Protocol Google group

devtools-protocol official repo

Showcase Chrome Debugging Protocol Clients

Awesome chrome-devtools

云服務(wù)器 GPU云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84531.html

上一篇：ionic之點(diǎn)擊放大圖片

下一篇：React工程實(shí)踐：基于React、Redux、React-Router的前端腳手架

相關(guān)文章

【譯】Headless Chrome 入門(mén)指南

摘要：確切位置因平臺(tái)而異。如果以編程方式使用，這個(gè)頁(yè)面也是一個(gè)強(qiáng)大的調(diào)試工具，能看到所有原始的協(xié)議命令通過(guò)連線(xiàn)，於瀏覽器進(jìn)行通信。警告協(xié)議可以做很多有趣的事，但作為入門(mén)選項(xiàng)他令人沮喪。目前，提供了比協(xié)議高級(jí)別的。本文翻譯自：Getting Started with Headless Chrome原文更新時(shí)間：July 28,2017作者：Eric Bidelman（Engineer @ G...

toddmark 2019-08-20 18:24 評(píng)論0 收藏0

2017-08-01 前端日?qǐng)?bào)

摘要：前端日?qǐng)?bào)精選掌握開(kāi)發(fā)工具新一代前端開(kāi)發(fā)技術(shù)和到底是咋回事第期深入淺出高階組件基于的移動(dòng)頁(yè)面緩存解決方案譯保護(hù)我們的，立刻停止狐步舞中文譯中和之間的區(qū)別個(gè)人文章譯什么是個(gè)人文章譯個(gè)人文章熱身實(shí)戰(zhàn)過(guò)渡與動(dòng)畫(huà)實(shí)現(xiàn)炫酷下拉， 2017-08-01 前端日?qǐng)?bào) 精選掌握Chrome開(kāi)發(fā)工具：新一代前端開(kāi)發(fā)技術(shù)exports、module.exports和export、export default...

gclove 2019-08-20 18:28 評(píng)論0 收藏0

[譯] scroll-behavior 滑順的捲動(dòng)效果

摘要：不過(guò)這個(gè)效果感覺(jué)上就像是閃一下就切換到該位置。為了使用體驗(yàn)上的感覺(jué)有時(shí)候網(wǎng)站會(huì)設(shè)計(jì)一種平滑捲動(dòng)到該位置的效果。的方式非常簡(jiǎn)單，只要在該元素設(shè)定注意是而不是這個(gè)方式非常方便不過(guò)目前只有支援，查閱。眾所皆知 HTML 錨點(diǎn)(anchor link)透過(guò)給定標(biāo)籤 id 屬性跳到頁(yè)面上特定位置的功能。不過(guò)這個(gè)效果感覺(jué)上就像是閃一下就切換到該位置。為了使用體驗(yàn)上的感覺(jué)有時(shí)候網(wǎng)站會(huì)設(shè)計(jì)一種平滑捲...

PiscesYE 2019-08-21 10:52 評(píng)論0 收藏0

[譯] scroll-behavior 滑順的捲動(dòng)效果

摘要：不過(guò)這個(gè)效果感覺(jué)上就像是閃一下就切換到該位置。為了使用體驗(yàn)上的感覺(jué)有時(shí)候網(wǎng)站會(huì)設(shè)計(jì)一種平滑捲動(dòng)到該位置的效果。的方式非常簡(jiǎn)單，只要在該元素設(shè)定注意是而不是這個(gè)方式非常方便不過(guò)目前只有支援，查閱。眾所皆知 HTML 錨點(diǎn)(anchor link)透過(guò)給定標(biāo)籤 id 屬性跳到頁(yè)面上特定位置的功能。不過(guò)這個(gè)效果感覺(jué)上就像是閃一下就切換到該位置。為了使用體驗(yàn)上的感覺(jué)有時(shí)候網(wǎng)站會(huì)設(shè)計(jì)一種平滑捲...

james 2019-08-30 13:04 評(píng)論0 收藏0

【譯】Chrome Launcher npm v0.3.2

摘要：本文翻譯自原文更新時(shí)間譯者從輕鬆啟動(dòng)。禁用了許多服務(wù)，他們對(duì)於自動(dòng)化情景是無(wú)用的。自動(dòng)定位二進(jìn)制文件的位置進(jìn)行啟動(dòng)。每次啟動(dòng)都使用一個(gè)新的，並在中清除它。對(duì)於可配置性的細(xì)節(jié)，提供一些設(shè)置選項(xiàng)。然後在中，像這樣使用它本文翻譯自：Chrome Launcher原文更新時(shí)間：July 21,2017譯者：Pandorym 從 Node 輕鬆啟動(dòng) Google Chrome。禁用了許多 ...

阿羅 2019-08-20 18:25 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lentoo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章
閱讀更多

如何下載tensorflow

閱讀 783·2023-04-25 17:33

Ubuntu系統(tǒng)手動(dòng)編譯安裝LAMP Web網(wǎng)站環(huán)境的過(guò)程

閱讀 3636·2021-07-29 14:49

實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對(duì)JavaScript中的5種主要的數(shù)據(jù)類(lèi)型進(jìn)行值復(fù)制。

閱讀 2487·2019-08-30 15:53

事件循環(huán)(EventLoop)的學(xué)習(xí)總結(jié)

閱讀 3440·2019-08-29 16:27

前端每日實(shí)戰(zhàn)：91# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)行駛中的火車(chē) loader

閱讀 2007·2019-08-29 16:11

css垂直居中布局總結(jié)

閱讀 1036·2019-08-29 14:17

前端開(kāi)發(fā)應(yīng)屆生面試指南（含各大公司具體指南及面試真題）

閱讀 2443·2019-08-29 13:47

20170917 前端開(kāi)發(fā)周報(bào):JavaScript函數(shù)式編程、作用域和閉包

閱讀 2023·2019-08-29 13:28

最新活動(dòng)

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【譯】chrome-remote-interface

相關(guān)文章

【譯】Headless Chrome 入門(mén)指南

2017-08-01 前端日?qǐng)?bào)

[譯] scroll-behavior 滑順的捲動(dòng)效果

[譯] scroll-behavior 滑順的捲動(dòng)效果

【譯】Chrome Launcher npm v0.3.2

發(fā)表評(píng)論

0條評(píng)論

lentoo

男|高級(jí)講師

TA的文章

如何下載tensorflow

Ubuntu系統(tǒng)手動(dòng)編譯安裝LAMP Web網(wǎng)站環(huán)境的過(guò)程

實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對(duì)JavaScript中的5種主要的數(shù)據(jù)類(lèi)型進(jìn)行值復(fù)制。

事件循環(huán)(EventLoop)的學(xué)習(xí)總結(jié)

前端每日實(shí)戰(zhàn)：91# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)行駛中的火車(chē) loader

css垂直居中布局總結(jié)

前端開(kāi)發(fā)應(yīng)屆生面試指南（含各大公司具體指南及面試真題）

20170917 前端開(kāi)發(fā)周報(bào):JavaScript函數(shù)式編程、作用域和閉包

最新活動(dòng)