Chrome remote debugging
Chrome remote debugging
Chrome Remote Debugging Protocol (CRDP) is a protocol that is used to view and interact with tabs and DevTools of one browser in another browser (probably remote).
To develop Webapp on target such as mobile or smart rack system solution RD/RIM by HPCMATE, we open need to access remote running Chrome browser from development host system remotely. cause developers are able to debug remotely running webapp instance on the target system through the Chrome remote debugging environment.
Setup remote debugging environment
| Where | What | Description |
|---|---|---|
| On target system | Run Chrome with
--remote-debugging-port=9222 --incognito --remote-allow-origins=* |
Chrome on target system support debug port 9222 along with remote-allow-origins |
| Start SSH tunnel
ssh -L 0.0.0.0:9223:localhost:9222 localhost -N |
Enable SSH tunel from 0.0.0.0:9223 to localhost(target):9222.
The reason is Chrome debug port 9222 is only available for localhost(target) | |
| On development system | - Open Chrome URL : http://<Target IP>:9223/ | It will show just white empty page |
| - Change URL to http://<Target IP>:9223/json | The page will display running debug session information.
Check the devtoolsFrontendUrl value Example output, [ {
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=192.168.1.3:9223/devtools/page/35B4257323F6C9C8925C51CF3DC9ED33",
"id": "35B4257323F6C9C8925C51CF3DC9ED33",
"title": "HMRIM",
"type": "page",
"url": "http://192.168.1.61:8095/",
"webSocketDebuggerUrl": "ws://192.168.1.3:9223/devtools/page/35B4257323F6C9C8925C51CF3DC9ED33"
} ]
| |
| - Open the devtoolsFrontendUrl
http://<Target IP>:9223/devtoolsFrontendUrl |
This URL will connect you to the Chrome instance on remote target for development and debugging
Example (using above information), http://<Target IP>:9223/devtools/inspector.html?ws=192.168.1.3:9223/devtools/page/35B4257323F6C9C8925C51CF3DC9ED33 |