Chrome remote debugging: Difference between revisions
(Created page with "== Chrome remote debugging == 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 == {| class="wikitable" |+ !Where !What !Description |- | rowspan="2" |On target sy...") |
|||
| Line 16: | Line 16: | ||
|Start SSH tunnel | |Start SSH tunnel | ||
ssh -L 0.0.0.0:9223:localhost:9222 localhost -N | ssh -L 0.0.0.0:9223:localhost:9222 localhost -N | ||
|Enable SSH | |Enable [[SSH Tunneling|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) | The reason is Chrome debug port 9222 is only available for localhost(target) | ||
|- | |- | ||
Revision as of 10:23, 30 May 2024
Chrome remote debugging
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 |