웹 디버거로 Bun 디버깅하기

Bun 은 WebKit Inspector Protocol 을 사용합니다. Bun 으로 코드를 실행할 때 디버깅을 활성화하려면 --inspect 플래그를 사용하세요. 데모 목적으로 다음 간단한 웹 서버를 고려하세요.

Bun.serve({
  fetch(req) {
    console.log(req.url);
    return new Response("Hello, world!");
  },
});

--inspect 플래그를 사용하여 이 파일을 실행해 보겠습니다.

이는 실행 중인 Bun 프로세스를 검사하는 데 사용할 수 있는 사용 가능한 포트에서 WebSocket 서버를 자동으로 시작합니다. 다양한 디버깅 도구가 이 서버에 연결하여 대화형 디버깅 경험을 제공할 수 있습니다.

Bun 은 debug.bun.sh 에서 웹 기반 디버거를 호스팅합니다. 이는 Safari 사용자에게 익숙할 WebKit 의 Web Inspector Interface 의 수정된 버전입니다.

bun --inspect server.ts

txt

------------------ Bun Inspector ------------------
Listening at:
  ws://localhost:6499/0tqxs9exrgrm

Inspect in browser:
  https://debug.bun.sh/#localhost:6499/0tqxs9exrgrm
------------------ Bun Inspector ------------------

브라우저에서 제공된 debug.bun.sh URL 을 열어 디버깅 세션을 시작하세요. 이 인터페이스에서 실행 중인 파일의 소스 코드를 보고 중단점을 설정하며 내장 콘솔을 사용하여 코드를 실행할 수 있습니다.

중단점을 설정해 보겠습니다. Sources 탭으로 이동하면 이전의 코드가 보일 것입니다. console.log(req.url) 문에 중단점을 설정하려면 줄 번호 3 을 클릭하세요.

그런 다음 웹 브라우저에서 http://localhost:3000 을 방문하세요. 이는 localhost 웹 서버에 HTTP 요청을 보냅니다. 페이지가 로드되지 않는 것처럼 보일 것입니다. 왜일까요? 프로그램이 이전에 설정한 중단점에서 실행이 일시정지되었기 때문입니다.

UI 가 어떻게 변경되었는지 주목하세요.

이 시점에서 현재 실행 환경을 검사하기 위해 많은 작업을 수행할 수 있습니다. 하단의 콘솔을 사용하여 프로그램의 컨텍스트에서 임의의 코드를 실행할 수 있으며 중단점에서 범위에 있는 변수에 완전히 액세스할 수 있습니다.

Sources 패널의 오른쪽에서 현재 범위에 있는 모든 로컬 변수를 보고 속성과 메서드를 자세히 살펴볼 수 있습니다. 여기서는 req 변수를 검사하고 있습니다.

Sources 패널의 왼쪽 상단에서 프로그램 실행을 제어할 수 있습니다.

다음은 제어 흐름 버튼의 기능을 설명하는 치트 시트입니다.

Continue script execution — 다음 중단점이나 예외가 발생할 때까지 프로그램 실행 계속
Step over — 프로그램이 다음 줄로 계속 실행
Step into — 현재 문에 함수 호출이 있으면 디버거가 호출된 함수로 "들어감"
Step out — 현재 문이 함수 호출이면 디버거가 호출 실행을 완료한 후 함수에서 "나와" 호출한 위치로 이동