https://github.com/jacarte/ws_chrome_debugging_example
https://github.com/jacarte/ws_chrome_debugging_example
chrome chrome-remote-interface js nodejs
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jacarte/ws_chrome_debugging_example
- Owner: Jacarte
- Created: 2019-05-10T14:11:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T02:46:35.000Z (over 3 years ago)
- Last Synced: 2025-07-05T02:22:38.709Z (12 months ago)
- Topics: chrome, chrome-remote-interface, js, nodejs
- Size: 17.6 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Listen to chrome websocket debugging interface
## Basic workflow
0. Choose the debugging port: i.e. 9222
1. Open your browser with --remote-debugging-port=9222
3. Execute query to http://localhost:9222/json
4. The resulting json is something like this:
```json
[ {
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/926A781407E057C7AE6A2C6F1E61B371",
"id": "926A781407E057C7AE6A2C6F1E61B371",
"title": "Document",
"type": "page",
"url": "https://kth.se",
"webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/926A781407E057C7AE6A2C6F1E61B371"
} ]
```
Every tab in the browser session will be represented in this json object as an array entry. The properties of each entry are: page description, id, title of the page, url of the page and the websocket address to access the debugging interface.
5. Then, open a websocket channel targeting the tab **webSocketDebuggerUrl**
6. Start to talking to chrome debugging interface like Runtime.enable method call at open channel event.
- [Runtime channel](https://chromedevtools.github.io/devtools-protocol/tot/Runtime)
```js
// NodeJS example
ws.send(
JSON.stringify({{id: 1, method: 'Runtime.enable'}}))
```
- [Network profiler](https://chromedevtools.github.io/devtools-protocol/tot/Network)
```js
// NodeJS example
ws.send(
JSON.stringify({{id: 1, method: 'Network.enable'}}))
```
7. Listen for incoming messages:
```js
// NodeJS example
ws.on('message', function incoming(data) {
console.log(data);
});
```
## How to execute remote methods ?
Following the DevTools [documentation](https://chromedevtools.github.io/devtools-protocol/v8/Profiler), basically to run it, you need to send a WS message as follows:
```json
{
"id": "RequestUniqueID",
"method": "MethodName",
"params": {
"key": "value" // For each value described as parameter in documentation
}
}
```
The call result is showed in the Runtime listener with the unique sent Id as identifier
```json
{
"id":"RequestUniqueID",
"result":
{
"result":
{
"type":"undefined"
}
}
}
```
Example: Execute JavaScript code in specific page
```js
// NodeJS example
ws.send({
"id": 4,
"method": "Runtime.enable"
})
ws.send({
"id": 2,
"method": "Runtime.evaluate",
"params": {
"expression": "1 + 2"
}
})
```
Result
```json
{
"id":2,
"result":
{
"result":
{
"type":"number",
"value":2,
"description":"2"
}
}
}
```
## Examples
- Create your own integration test tool from scratch [Link](examples/IT_demo)
- Processing network events [Link](examples/networking)
- Capture screen images [Link](examples/recording)