Skip to content

Commit b2e4b3f

Browse files
Update debugging.md
1 parent 00f323c commit b2e4b3f

File tree

1 file changed

+4
-57
lines changed

1 file changed

+4
-57
lines changed

src/getting-started/debugging.md

Lines changed: 4 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,72 +3,19 @@
33
Debugging is one of the most important parts of application development. This section describes debugging tools compatible with SwiftWasm.
44

55
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.
76
If you are using `swift build`, it is enabled by default.
87

9-
## Chrome DevTools
8+
## Debugging in JavaScript environments
109

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.
1311

14-
### Official DWARF Extension
12+
## Standalone debugging tools
1513

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-
![](./chrome-devtools.png)
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-
![](./chrome-devtools-swift.png)
46-
47-
## [wasminspect](https://github.com/kateinoigakukun/wasminspect)
14+
### [wasminspect](https://github.com/kateinoigakukun/wasminspect)
4815

4916
[wasminspect](https://github.com/kateinoigakukun/wasminspect)
5017
can help in the investigation if the debugged binary does not rely on integration with JavaScript.
5118
We recommend splitting your packages into separate executable targets, most of which shouldn't
5219
assume the availability of JavaScript to make debugging easier.
5320

5421
![demo](https://raw.githubusercontent.com/kateinoigakukun/wasminspect/master/assets/demo.gif)
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

Comments
 (0)