WebAssembly를 사용하면 웹에서 C/C++ 코드를 기본 속도에 가깝게 그리고 자바스크립트와 함께 실행할 수 있습니다. 이 문서에서는 Chrome DevTools를 설정하고 사용하여 이러한 애플리케이션을 더 효과적으로 디버그하는 방법을 보여줍니다.
DevTools를 설정하면 다음 작업을 할 수 있습니다.
- 소스 >에서 원본 코드 검사 편집자.
- 코드 줄 중단점을 사용하여 실행을 일시중지하고 컴파일된
.wasm
바이너리 파일이 아닌 원본 C/C++ 소스 코드를 단계별로 진행합니다.
일시중지 상태에서 다음과 같은 작업을 할 수 있습니다.
- 원본 소스 파일의 변수 위로 마우스를 가져가 변수 값을 확인합니다.
- 호출 스택의 함수 이름과 범위의 변수를 이해합니다.
- 복잡하게 중첩된 속성과 복잡한 객체를 Console에 출력합니다.
- Memory Inspector를 사용하여 객체 메모리를 검사합니다.
설정
DevTools에서 C/C++ WebAssembly 디버깅을 사용 설정하려면 다음 단계를 따르세요.
포함된 DWARF 디버그 정보로 애플리케이션을 컴파일합니다. 최신 Emscripten 컴파일러를 실행하고
-g
플래그를 전달합니다. 예를 들면 다음과 같습니다.emcc -g source.cc -o app.html
자세한 내용은 디버그 정보를 사용하여 프로젝트 빌드를 참고하세요.
디버그
DevTools를 설정한 상태에서 코드를 디버그합니다.
- DevTools를 열고 웹사이트를 검사합니다. 이 튜토리얼에서는 필수
-g
플래그로 컴파일된 이 데모 페이지에서 테스트해 볼 수 있습니다. - 원하는 경우 작성한 파일을 그룹화하여 더 쉽게 탐색할 수 있습니다. 소스에서 를 확인합니다. 페이지 > > 작성됨/배포됨별로 그룹화 .
- 파일 트리에서 원본 소스 파일을 선택합니다. 이 경우
mandelbrot.cc
입니다. 코드 줄 중단점을 설정하려면 편집기 왼쪽 열(예: 38행)에서 줄 번호를 클릭합니다.
코드를 다시 실행합니다. 중단점이 있는 줄 앞에서 실행이 일시중지됩니다.
일시중지 상태에서 다음을 시도해 보세요.
- 소스 > 편집기에서 변수 위로 마우스를 가져가면 도움말에 해당 값이 표시됩니다.
- 소스 > 호출 스택: 소스에 있는 함수 이름을 확인합니다.
- 소스 > 범위를 지정하고 로컬 및 전역 변수와 변수의 유형, 값을 확인합니다.
콘솔에서 범위에서 이동하기 어려운 출력 변수 및 객체는 다음과 같습니다.
- 깊이 중첩된 변수(예: 큰 배열의 색인이 생성된 항목)
- 포인터 (
->
)로 액세스할 수 있는 객체를 포함한 복잡한 객체 펼쳐서 확인하세요.
- 소스 > 범위에서 아이콘을 클릭하여 Memory Inspector를 열고 객체 메모리의 원시 바이트를 검사합니다. 자세한 내용은 WebAssembly 메모리 검사를 참고하세요.
프로필 실적
DevTools를 설정하고 연 상태에서는 Chrome에서 실행하는 코드가 최적화되지 않습니다. 더 나은 디버깅 환경을 제공하기 위해 계층형으로 제공됩니다.
이 경우 코드에서 console.time()
및 performance.now()
를 사용하여 성능을 프로파일링할 수 없습니다. 대신 Performance 패널을 사용하여 프로파일링합니다.
또는 DevTools를 열지 않고 프로파일링 코드를 실행한 다음 열어 콘솔에서 메시지를 검사할 수 있습니다.
디버그 정보 분리
로드 속도를 높이면서도 디버깅 환경을 개선하려면 디버그 정보를 별도의 .wasm
파일로 분할하면 됩니다. 자세한 내용은 WebAssembly 빠르게 디버깅을 참조하세요.
이 파일을 로컬에 보관하거나 별도의 서버에서 호스팅할 수 있습니다. Emscripten을 사용하여 이 작업을 실행하려면 -gseparate-dwarf=<filename>
플래그를 전달하고 파일 경로를 지정합니다.
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
다양한 머신에서 빌드 및 디버그
Chrome을 실행하는 시스템과 다른 운영체제 (컨테이너, VM 또는 원격 서버)를 사용하는 머신에서 빌드하는 경우 디버그 파일 경로를 수동으로 매핑해야 할 수도 있습니다.
예를 들어 프로젝트가 로컬에서 C:\src\project
에 있지만 경로가 /mnt/c/src/project
인 Docker 컨테이너에서 빌드되었다면 다음을 수행합니다.
chrome://extensions/
로 이동하여 C/C++ DevTools 지원 (DWARF) 확장 프로그램을 찾아 세부정보 >를 클릭합니다. 확장 프로그램 옵션.- 이전 파일 경로와 새 파일 경로를 지정합니다.
자세히 알아보기
WebAssembly 디버깅에 대한 자세한 내용은 Chrome DevTools 엔지니어링 블로그를 확인하세요.