배경
최근까지 Chrome DevTools에서 지원한 WebAssembly 디버깅은 원시 WebAssembly 스택 트레이스를 보고, 분해된 WebAssembly 텍스트 형식으로 개별 명령을 스테핑하는 것이었습니다.
이 방법은 모든 WebAssembly 모듈에서 작동하고 작고 격리된 함수를 디버깅하는 데 다소 도움이 되지만, 분해된 코드와 소스 간의 매핑이 명확하지 않은 대규모 앱에서는 실용적이지 않습니다.
임시 해결 방법
이 문제를 해결하기 위해 Emscripten과 DevTools는 일시적으로 기존 소스 맵 형식을 WebAssembly에 맞춰 조정했습니다. 이를 통해 컴파일된 모듈의 바이너리 오프셋 간에 소스 파일의 원래 위치에 매핑할 수 있습니다.
그러나 소스 맵은 임의의 소스 언어, 유형 시스템 및 선형 메모리를 사용하는 WebAssembly와 같은 바이너리 형식이 아니라 JavaScript 개념과 값에 명확하게 매핑되는 텍스트 형식에 맞게 설계되었습니다. 이로 인해 통합이 어렵고 제한적이며 Emscripten 외부에서 널리 지원되지 않았습니다.
DWARF 입력
반면 많은 네이티브 언어에는 이미 디버거가 위치, 변수 이름, 유형 레이아웃 등을 확인하는 데 필요한 모든 정보를 제공하는 공통 디버깅 형식인 DWARF가 있습니다.
완전한 호환성을 위해 추가해야 하는 WebAssembly 관련 기능이 아직 몇 가지 남아 있지만, Clang 및 Rust와 같은 컴파일러는 이미 WebAssembly 모듈에서 DWARF 정보를 내보내는 기능을 지원하므로 DevTools팀이 DevTools에서 바로 사용할 수 있도록 했습니다.
첫 번째 단계로 DevTools는 이제 이 정보를 사용하여 네이티브 소스 매핑을 지원합니다. 따라서 개발자는 디스어셈블 형식을 사용하거나 맞춤 스크립트를 사용하지 않고도 이러한 컴파일러에서 생성된 Wasm 모듈의 디버깅을 시작할 수 있습니다.
대신 다른 플랫폼에서 일반적으로 하는 것처럼 디버그 정보를 포함하도록 컴파일러에 지시하기만 하면 됩니다. 예를 들어 Clang 및 Emscripten에서는 컴파일 중에 -g 플래그를 전달하여 이 작업을 실행할 수 있습니다.
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
Rust에서 동일한 -g 플래그를 사용할 수 있습니다.
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
또는 Cargo를 사용하는 경우 디버그 정보가 기본적으로 포함됩니다.
cargo build --target wasm32-unknown-unknown
이 새로운 DevTools와 DWARF의 통합에는 이미 소스 언어로 코드 스테핑, 중단점 설정, 스택 트레이스 해결에 대한 지원이 포함되어 있습니다.
앞으로
하지만 여전히 해야 할 일이 많습니다.
예를 들어 도구 측면에서 Emscripten (Binaryen) 및 wasm-pack (wasm-bindgen)은 수행되는 변환에 대한 DWARF 정보 업데이트를 아직 지원하지 않습니다. 현재로서는 이 통합의 이점을 누릴 수 없습니다.
또한 Chrome DevTools 측면에서는 다음과 같이 원활한 디버깅 환경을 보장하기 위해 향후 더 많은 통합을 발전시킬 예정입니다.
- 변수 이름 확인
- 예쁜 인쇄 유형
- 출발어로 표현식 평가
- 그 외 다양한 정보 제공
향후 업데이트 소식을 기다려 주세요.
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools팀에 문의하기
게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.
- crbug.com을 통해 제안 또는 의견을 제출하세요.
- DevTools에서 옵션 더보기
> 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다. - @ChromeDevTools로 트윗을 보냅니다.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.