@evan-lab/devtools-sdk

브라우저에서 실행되는 Chrome DevTools Protocol(CDP) 클라이언트 SDK입니다. 웹페이지에 삽입하면 원격 디버그 서버와 WebSocket으로 연결되어, Chrome DevTools와 동일한 방식으로 페이지를 검사하고 디버깅할 수 있습니다.

지원 기능

• DOM - 문서 구조 탐색, 노드 편집, 속성 수정, 검색, DOM 변경 실시간 감지
• CSS - 매칭된 스타일 조회, 인라인 스타일 편집, computed style 조회, 스타일시트 생성 및 수정
• Network - XHR/Fetch 요청·응답 가로채기, 이미지 리소스 수집, 쿠키 관리
• Runtime - JavaScript 표현식 평가, 객체 속성 조회, 콘솔 API 후킹, 에러 추적
• Storage - localStorage/sessionStorage 읽기·쓰기·삭제 및 변경 이벤트 감지
• Overlay - 요소 하이라이트(margin/padding/content 영역 시각화), 인스펙트 모드
• Page - 페이지 리소스 트리 조회, 화면 캡처(screencast)
• Debugger - 페이지 내 스크립트 수집 및 소스 코드 조회

설치

npm install @evan-lab/devtools-sdk

사용법

모듈로 사용

import { Devtools } from '@evan-lab/devtools-sdk';

const devtools = new Devtools({
  host: 'http://your-debug-server:8080',
  toggle: true, // 토글 버튼 표시 (기본값: true)
});

// 수동으로 연결/해제
devtools.connect();
devtools.disconnect();

스크립트 태그로 사용

빌드된 번들(dist/devtools.js)을 페이지에 삽입하면 자동으로 디버그 서버에 연결됩니다.

<script src="https://your-cdn/devtools.js"></script>

API

new Devtools(options?)

| 옵션 | 타입 | 기본값 | 설명 | |------|------|--------|------| | host | string | http://localhost:8080 | 디버그 서버 주소 | | toggle | boolean | true | 화면에 연결 토글 버튼을 표시할지 여부. false로 설정하면 즉시 연결 |

메서드

• connect() - 디버그 서버에 WebSocket 연결
• disconnect() - 연결 해제
• toggle() - 연결 상태 토글

라이선스

MIT