Chrome remote debugging: Difference between revisions

From HPCWIKI
Jump to navigation Jump to search
(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...")
 
(Fix: remove --- horizontal lines (7 removed))
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Chrome remote debugging ==
{{Status
|status=Draft
|owner=Knowledge Agent
|last_update=2026-07-16
|review=Pending
}}
 
{{TOC}}
 
== Overview ==
 
Chrome remote debugging에 대한 기술 문서입니다.
 
=== Summary ===
 
* 무엇인가? - Chrome remote debugging
* 왜 필요한가? - HPC 및 서버 환경에서 필수 개념
* 언제 사용하는가? - 서버 구성, 성능 튜닝, 문제 해결 시
 
 
== Purpose ==
 
이 문서가 존재하는 이유
 
* Goal: Chrome remote debugging에 대한 기술 정보 제공
* Scope: Chrome remote debugging의 개념, 사용법, 설정
* Non-goals: 다른 주제로의 확장
 
 
== Key Concepts ==
 
{| class="wikitable"
! Concept
! Description
! Related
|-
| Chrome remote debugging
| HPC/서버 환경에서 중요한 기술 개념
| [[Linux]], [[Server]]
|}
 
 
== Detailed Explanation ==
 
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.
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"
{| class="wikitable"
|+
|+Step by Step guide
!Where
!Where
!What
!What
Line 16: Line 58:
|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 tunnel from 0.0.0.0:9223 to localhost(target):9222.
|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)
|-
|-
| rowspan="3" |On development system
| rowspan="3" |On development system
|<nowiki>- Open Chrome URL : http://<Target IP>:9223/</nowiki>
|<nowiki>- Open Chrome URL : http://<Target IP>:9223/</nowiki>
|It will show just white empty page
 
|-
 
| - Change URL to http://<Target IP>:9223/json
== Best Practices ==
|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": "<nowiki>http://192.168.1.61:8095/</nowiki>",
    "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
|}


== References ==
== References ==
<references />
 
* [https://wiki.hpcmate.com Chrome remote debugging]
 
 
== Related Pages ==
 
* [[Linux]]
* [[Server]]
* [[Hardware]]
* [[Network]]
 
 
[[Category:Server]]
== Knowledge Graph ==
 
Related
 
→ [[Linux]]
→ [[Server]]
→ [[Hardware]]
→ [[Network]]
 
[[Category:Reference]]

Latest revision as of 11:27, 17 July 2026

Template:Status

Template:TOC

Overview

Chrome remote debugging에 대한 기술 문서입니다.

Summary

  • 무엇인가? - Chrome remote debugging
  • 왜 필요한가? - HPC 및 서버 환경에서 필수 개념
  • 언제 사용하는가? - 서버 구성, 성능 튜닝, 문제 해결 시


Purpose

이 문서가 존재하는 이유

  • Goal: Chrome remote debugging에 대한 기술 정보 제공
  • Scope: Chrome remote debugging의 개념, 사용법, 설정
  • Non-goals: 다른 주제로의 확장


Key Concepts

Concept Description Related
Chrome remote debugging HPC/서버 환경에서 중요한 기술 개념 Linux, Server


Detailed Explanation

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.

Step by Step guide
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/


Best Practices

  • 최신 버전 사용 권장
  • 공식 문서 참고
  • 테스트 환경에서 먼저 검증


References


Related Pages

Knowledge Graph

Related

→ Linux → Server → Hardware → Network

Retrieved from "http://wiki.hpcmate.com/index.php?title=Chrome_remote_debugging&oldid=3268"