【譯】chrome-remote-interface

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

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

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

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

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

簡單的 API 用法

下列片段加載https://github.com，并轉(zhuǎn)儲每個請求：

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);
});

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

你可能還想查看 FAQ。

安裝

npm install chrome-remote-interface

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

實現(xiàn)

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

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ù)實現(xiàn)而差異，例如，每個 Chrome 標(biāo)籤代表一個目標(biāo)，而對於 Node.js 一個目標(biāo)是當(dāng)前視察的腳本。

設(shè)置

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

Choreme/Chromium Desktop

啟動 Chrome 時，使用--remote-debugging-port選項，例如：

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

Headless

在 59 之後的版本，額外使用--headless選項，例如：

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

Android

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

adb forward tcp:9222 localabstract:chrome_devtools_remote

WebView

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

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

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

adb forward tcp:9222 localabstract:webview_devtools_remote_

Edge

安裝并運行 Edge 診斷配適器（Diagnostics Adapter）。

Node.js

啟動 Node.js 使附加--inspect選項，例如：

node --inspect=9222 script.js

Safari (iOS)

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

附隨的客戶端

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

目標(biāo)管理

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

下面是一些例子：

$ 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)被重寫了，以方便顯示命令的返回值和事件的信息。還有，這里的事件綁定是簡化的，執(zhí)行一個速寫方法（例如Page.loadEventFired()）切換事件註冊。

記住，該 REPL 接口提供了實現(xià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 } }

事件過濾

為了減少來自事件監(jiān)聽器的數(shù)據(jù)顯示量，可以提供一個過濾函數(shù)。在這個例子中，只顯示資源的 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 中的每個協(xié)議對象都擁有在元信息中找到的描述符。此外，還添加了一個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í)來自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類型（注意，不同於命令和時間，類型使用大駝峰拼寫法）：

>>> 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é)議描述符。不停的更新這個文件，使用scripts/update-protocol.sh並且推送到這個倉庫。

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

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

有三個選項可以覆蓋上述行為：

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

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

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

瀏覽器用法

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

function criRequest(options, callback) {}

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

使用 webpack

只需要使用這個模塊，他就會工作：

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

使用 non-minified 版本手動運行 webpack ：

DEBUG=true npm run webpack

使用 Vanilla JavaScript

生成一個 JavaScript 文件，這可以使用

API
該 API 由三部分組成：

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

建立連接；

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

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

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

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

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

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

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

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

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

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

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

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

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

callback是一個監(jiān)聽器，將自動添加到返回EventEmitter的connect事件。當(dāng)callback缺省時，將返回一個Promise對象，如果觸發(fā)connect事件即為成功（fulfilled），如果觸發(fā)error事件即為失?。╮ejected）。

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

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

client是一個CDP類的實例。
Event: "error"
function (err) {}

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

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

options是一個對象，并有下列可選屬性：

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

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

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

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

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

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

protocol：一個對象，擁有下列屬性：

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

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

當(dāng)callback缺省時，將返回一個Promise對象。

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])
請求遠(yuǎn)程實例的打開的可用目標(biāo) / 標(biāo)籤的列表。

options是一個對象，并有下列可選屬性：

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

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

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

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

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

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

當(dāng)callback缺省時，將返回一個Promise對象。

For example:

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

options是一個對象，并有下列可選屬性：

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：一個Error對象，指明成功狀態(tài)；

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

當(dāng)callback缺省時，將返回一個Promise對象。

For example:

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

options是一個對象，并有下列可選屬性：

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

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

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

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

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

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

當(dāng)callback缺省時，將返回一個Promise對象。

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)閉一個在遠(yuǎn)程實例中打開的目標(biāo) / 標(biāo)籤。

options是一個對象，并有下列可選屬性：

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

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

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

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

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

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

當(dāng)callback缺省時，將返回一個Promise對象。

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)排隊等待刪除時，該回調(diào)將被觸發(fā)，但真正的刪除將異步執(zhí)行。
CDP.Version([options], [callback])
從遠(yuǎn)程實例請求版本信息。

options是一個對象，并有下列可選屬性：

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

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

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

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

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

info：一個 JSON 對象，來自http://host:port/json/version包含的版本信息。

當(dāng)callback缺省時，將返回一個Promise對象。

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)程實例通過 WebSocket 發(fā)送任何通知時觸發(fā)。

message是接收的對象，他有下列屬性：

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

params：一個對象，包含有效載荷（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)程實例通過 WebSocket 發(fā)送關(guān)於.的通知時觸發(fā)。

params：一個對象，包含有效載荷（payload）。

這是一個實用的時間，他可以很容易的偵聽特定的時間（看 "event"），for example:

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

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

鼓勵使用者廣泛的檢查每個方法的響應(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"}); });

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

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

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

method 是一個描述命令的字符串。

params 是一個對象，包含有效載荷。

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

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

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

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

在低等級 WebSocket 錯誤的情況下，該error包含產(chǎn)生的Error對象，並且沒有response返回。

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

For example:

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

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

For example:

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

client.on(".", callback);

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

For example:

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

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

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

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

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

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

CDP({remote: true});

看這裡，獲得更多信息。

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

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

看這裡，獲得更多信息。

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

$ chrome-remote-interface inspect --remote

Headless Chrome 問題？

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

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

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

你可以改變這個值，在運行你的容器時附帶說，--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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84531.html

上一篇：ionic之點擊放大圖片

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

相關(guān)文章

【譯】Headless Chrome 入門指南

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

toddmark 2019-08-20 18:24 評論0 收藏0

2017-08-01 前端日報

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

gclove 2019-08-20 18:28 評論0 收藏0

[譯] scroll-behavior 滑順的捲動效果

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

PiscesYE 2019-08-21 10:52 評論0 收藏0

[譯] scroll-behavior 滑順的捲動效果

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

james 2019-08-30 13:04 評論0 收藏0

【譯】Chrome Launcher npm v0.3.2

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

阿羅 2019-08-20 18:25 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

lentoo

男|高級講師

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

TA的文章
閱讀更多

如何下載tensorflow

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新活動

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

【譯】chrome-remote-interface

相關(guān)文章

【譯】Headless Chrome 入門指南

2017-08-01 前端日報

[譯] scroll-behavior 滑順的捲動效果

[譯] scroll-behavior 滑順的捲動效果

【譯】Chrome Launcher npm v0.3.2

發(fā)表評論

0條評論

lentoo

男|高級講師

TA的文章

如何下載tensorflow

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

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

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

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

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

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

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

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【譯】chrome-remote-interface

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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