Qt, Linux 그리고 모든 것: Qt WebAssembly 디버깅

Source: Hacker News

Introduction

개발자가 가장 지루하게 느끼는 작업 중 하나는 끈질긴 버그를 디버깅하는 일입니다. 웹 앱일 때는 더 힘들고, WebAssembly 웹 앱이면 더욱 그렇습니다.

Qt WebAssembly를 디버깅하는 가장 쉬운 방법은 빌드 시 -g 옵션이나 CMAKE_BUILD_TYPE=Debug를 지정하는 것입니다. Emscripten은 wasm 바이너리에 DWARF 심볼을 삽입합니다.

Note: DWARF가 포함된 wasm 파일 디버깅은 Chrome 브라우저와 브라우저 확장 프로그램을 사용해야만 작동합니다.

• C/C++ DevTools Support (DWARF) – browser extension.
  Safari나 Firefox를 사용하거나 브라우저 확장 프로그램을 설치할 수 없는 경우, 소스 맵을 생성해야 합니다(다음 포스트에서 다룸).

DWARF debugging

브라우저 개발자 도구 설정에서 DWARF를 활성화해야 합니다. 소스 맵과 달리 전체 디렉터리 경로가 바이너리에 포함되어 있기 때문에 소스 디렉터리의 심링크가 필요하지 않습니다.

Emscripten은 기본적으로 -g 옵션으로 빌드된 바이너리에 DWARF 심볼을 삽입하므로, Qt 또는 애플리케이션을 디버그 모드로 다시 빌드하기만 하면 됩니다.

Qt는 기본적으로 최적화 옵션 -g2를 사용해 디버그 라이브러리를 빌드합니다. -g2는 디버깅 정보가 적게 포함되지만 링크 시간이 더 빠릅니다. 전체 디버그 심볼을 보존하려면 Qt 디버그 빌드 시 -g 또는 -g3를 사용하십시오. 두 옵션은 동일한 효과를 가집니다.

Using DWARF debugger

1. 확장 프로그램이 설치된 Chrome을 열고 DevTools 콘솔을 엽니다.
2. 디버깅이 필요한 Qt for WebAssembly 웹 애플리케이션으로 이동합니다.
3. 모든 심볼과 파일이 파싱될 때까지 몇 초 기다립니다(Qt 내부 디버깅은 더 오래 걸릴 수 있습니다).
4. 콘솔에 소스 파일 경로가 표시됩니다. 디버깅하려는 파일을 찾아 브레이크포인트를 설정합니다.
5. 페이지를 새로 고칩니다; 실행이 브레이크포인트에 도달하면 멈추고 소스 뷰에서 현재 라인이 강조 표시되며 변수 이름과 값이 표시됩니다.
6. 데스크톱 애플리케이션을 디버깅할 때와 동일하게 코드를 단계별로 진행합니다.