在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:cyrus-and/chrome-remote-interface开源软件地址:https://github.com/cyrus-and/chrome-remote-interface开源编程语言:JavaScript 98.3%开源软件介绍:chrome-remote-interfaceChrome Debugging Protocol interface that helps to instrument Chrome (or any other suitable implementation) by providing a simple abstraction of commands and notifications using a straightforward JavaScript API. This module is one of the many third-party protocol clients. Sample API usageThe following snippet loads const CDP = require('chrome-remote-interface');
async function example() {
let client;
try {
// connect to endpoint
client = await CDP();
// extract domains
const {Network, Page} = client;
// setup handlers
Network.requestWillBeSent((params) => {
console.log(params.request.url);
});
// enable events then start!
await Network.enable();
await Page.enable();
await Page.navigate({url: 'https://github.com'});
await Page.loadEventFired();
} catch (err) {
console.error(err);
} finally {
if (client) {
await client.close();
}
}
}
example(); Find more examples in the wiki. You may also want to take a look at the FAQ. Installation
Install globally ( ImplementationsThis module should work with every application implementing the Chrome Debugging Protocol. In particular, it has been tested against the following implementations:
¹ Not available on Chrome for Android, hence a local version of the protocol must be used. The meaning of target varies according to the implementation, for example, each Chrome tab represents a target whereas for Node.js a target is the currently inspected script. SetupAn instance of either Chrome itself or another implementation needs to be
running on a known port in order to use this module (defaults to
Chrome/ChromiumDesktopStart Chrome with the
HeadlessSince version 59, additionally use the
AndroidPlug the device and enable the port forwarding, for example:
Note that in Android, Chrome does not have its own protocol available, a local version must be used. See here for more information. WebViewIn order to be inspectable, a WebView must be configured for debugging and the corresponding process ID must be known. There are several ways to obtain it, for example:
Finally, port forwarding can be enabled as follows:
OperaStart Opera with the
Node.jsStart Node.js with the
Safari (iOS)Install and run the iOS WebKit Debug Proxy. Then use it with the EdgeStart Edge with the
Please find more information here. Firefox (Nightly)Start Firefox with the
Bear in mind that this is an experimental feature of Firefox. Bundled clientThis module comes with a bundled client application that can be used to interactively control a remote instance. Target managementThe bundled client exposes subcommands to interact with the HTTP frontend
(e.g., List, New, etc.),
run with Here are some examples: $ 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' InspectionUsing the Here is a sample session: $ chrome-remote-interface inspect
>>> Runtime.evaluate({expression: 'window.location.toString()'})
{ result: { type: 'string', value: 'about:blank' } }
>>> Page.enable()
{}
>>> Page.loadEventFired(console.log)
[Function]
>>> Page.navigate({url: 'https://github.com'})
{ frameId: 'E1657E22F06E6E0BE13DFA8130C20298',
loaderId: '439236ADE39978F98C20E8939A32D3A5' }
>>> { timestamp: 7454.721299 } // from Page.loadEventFired
>>> Runtime.evaluate({expression: 'window.location.toString()'})
{ result: { type: 'string', value: 'https://github.com/' } } Additionally there are some custom commands available: >>> .help
[...]
.reset Remove all the registered event handlers
.target Display the current target Embedded documentationIn both the REPL and the regular API every object of the protocol is decorated
with the meta information found within the descriptor. In addition The
For example to learn how to call >>> 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' ] } To learn about the parameters returned by the >>> 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.' } } } To inspect the >>> 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 Debugging Protocol versionsBy default This behavior can be changed by setting the To further override the above behavior there are basically two options:
Browser usageThis module is able to run within a web context, with obvious limitations
though, namely external HTTP requests
(List, New, etc.) cannot
be performed directly, for this reason the user must provide a global
function criRequest(options, callback) {}
webpackUsingIt just works, simply require this module: const CDP = require('chrome-remote-interface'); Using vanilla JavaScriptTo generate a JavaScript file that can be used with a
TypeScript SupportTypeScript definitions are kindly provided by Khairul Azhar Kasmiran and Seth Westphal, and can be installed from DefinitelyTyped:
APIThe API consists of three parts:
CDP([options], [callback])Connects to a remote instance using the Chrome Debugging Protocol.
These options are also valid properties of all the instances of the
The Event: 'connect'function (client) {} Emitted when the connection to the WebSocket is established.
Event: 'error'function (err) {} Emitted when
CDP.Protocol([options], [callback])Fetch the Chrome Debugging Protocol descriptor.
When For example: const CDP = require('chrom |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论