|
3 | 3 | Debugging is one of the most important parts of application development. This section describes debugging tools compatible with SwiftWasm. |
4 | 4 |
|
5 | 5 | These tools are DWARF-based, so you need to build your application with DWARF sections enabled. |
6 | | -If you are using `carton bundle`, you can use the `--debug-info` flag to enable debugging with optimized application. |
7 | 6 | If you are using `swift build`, it is enabled by default. |
8 | 7 |
|
9 | | -## Chrome DevTools |
| 8 | +## Debugging in JavaScript environments |
10 | 9 |
|
11 | | -When you are debugging a web browser application, Chrome DevTools is a good tool to use. It allows you to |
12 | | -put breakpoints and step through at Swift source code level. |
| 10 | +If you're debugging a SwiftWasm app that runs in JavaScript environments (browsers or Node.js), please refer to the [JavaScriptKit Debugging documentation](https://swiftpackageindex.com/swiftwasm/javascriptkit/documentation/javascriptkit/debugging) for detailed information on how to set up and use debugging tools in JavaScript environments. |
13 | 11 |
|
14 | | -### Official DWARF Extension |
| 12 | +## Standalone debugging tools |
15 | 13 |
|
16 | | -Install [`C/C++ DevTools Support (DWARF)`](https://goo.gle/wasm-debugging-extension) extension in your Chrome |
17 | | - |
18 | | -See [the DevTools team's official introduction](https://developer.chrome.com/blog/wasm-debugging-2020) for more details about the extension. |
19 | | - |
20 | | - |
21 | | - |
22 | | -Note that the function names in the stack trace are mangled. You can demangle them using `swift demangle` command. |
23 | | - |
24 | | -Unfortunately, variable inspection is unavailable since Swift depends on its own mechanisms to do that instead of DWARF's structure type feature. If you need this feature, you can use the enhanced extension below. |
25 | | - |
26 | | -### Enhanced DWARF Extension for Swift |
27 | | - |
28 | | -For a better Swift debugging experience, there's also an enhanced version of the DWARF extension specifically for Swift. This extension enables: |
29 | | - |
30 | | -- Breakpoint setting and Swift code inspection |
31 | | -- Human-readable call stack frames |
32 | | -- Swift variable value inspection |
33 | | - |
34 | | -To install this enhanced extension: |
35 | | - |
36 | | -1. First, uninstall the official "C/C++ DevTools Support (DWARF)" extension if you have it installed |
37 | | -2. Download the extension ZIP file from [GitHub Releases](https://github.com/GoodNotes/devtools-frontend/releases/tag/swift-0.2.3.0) |
38 | | -3. Go to `chrome://extensions/` and enable "Developer mode" |
39 | | -4. Drag and drop the downloaded ZIP file into the page |
40 | | - |
41 | | -When you close and reopen the DevTools window, DevTools will suggest reloading itself to apply settings. |
42 | | - |
43 | | -Note: There is a known issue where some JavaScriptKit types like `JSObject` and `JSValue` are not shown in pretty format in the variables view. |
44 | | - |
45 | | - |
46 | | - |
47 | | -## [wasminspect](https://github.com/kateinoigakukun/wasminspect) |
| 14 | +### [wasminspect](https://github.com/kateinoigakukun/wasminspect) |
48 | 15 |
|
49 | 16 | [wasminspect](https://github.com/kateinoigakukun/wasminspect) |
50 | 17 | can help in the investigation if the debugged binary does not rely on integration with JavaScript. |
51 | 18 | We recommend splitting your packages into separate executable targets, most of which shouldn't |
52 | 19 | assume the availability of JavaScript to make debugging easier. |
53 | 20 |
|
54 | 21 |  |
55 | | - |
56 | | -## [wasm-memprof](https://github.com/kateinoigakukun/wasm-memprof) |
57 | | - |
58 | | -If you are debugging memory leaks, [wasm-memprof](https://github.com/kateinoigakukun/wasm-memprof) can help you. |
59 | | -It is a tool to profile memory usage of WebAssembly applications with a few lines of setup code: |
60 | | - |
61 | | -```javascript |
62 | | -import { WMProf } from "wasm-memprof"; |
63 | | -import { SwiftDemangler } from "wasm-memprof/plugins/swift-demangler.js"; |
64 | | - |
65 | | -const swiftDemangler = SwiftDemangler.create(); |
66 | | -const WebAssembly = WMProf.wrap(globalThis.WebAssembly, { |
67 | | - demangler: swiftDemangler.demangle.bind(swiftDemangler), |
68 | | -}); |
69 | | -``` |
70 | | - |
71 | | -Check the repository for more details. |
72 | | - |
73 | | -<img width="1000" alt="swift-wmprof" src="https://github.com/user-attachments/assets/c1da4582-e721-45b9-9bca-ce320711f72d"> |
74 | | - |
0 commit comments