deploy: e8cc6dd

Author: kateinoigakukun

getting-started/chrome-devtools-swift.png

@@ -166,7 +166,8 @@ <h1><a class="header" href="#debugging" id="debugging">Debugging</a></h1>
 If you are using <code>swift build</code>, it is enabled by default.</p>
 <h2><a class="header" href="#chrome-devtools" id="chrome-devtools">Chrome DevTools</a></h2>
 <p>When you are debugging a web browser application, Chrome DevTools is a good tool to use. It allows you to
-put breakpoints, step through at Swift source code level.</p>
+put breakpoints and step through at Swift source code level.</p>
+<h3><a class="header" href="#official-dwarf-extension" id="official-dwarf-extension">Official DWARF Extension</a></h3>
 <p>Please follow the steps below to configure Chrome DevTools for SwiftWasm:</p>
 <ol>
 <li>Install <a href="https://goo.gle/wasm-debugging-extension"><code>C/C++ DevTools Support (DWARF)</code></a> extension in your Chrome</li>
@@ -175,7 +176,24 @@ <h2><a class="header" href="#chrome-devtools" id="chrome-devtools">Chrome DevToo
 <p>See <a href="https://developer.chrome.com/blog/wasm-debugging-2020">the DevTools team's official introduction</a> for more details about the extension.</p>
 <p><img src="./chrome-devtools.png" alt="" /></p>
 <p>Note that the function names in the stack trace are mangled. You can demangle them using <code>swift demangle</code> command.</p>
-<p>Unfortunately, variable inspection is unavailable since Swift depends on its own mechanisms to do that instead of DWARF's structure type feature. (See <a href="https://github.com/swiftwasm/swift/issues/593">this thread</a> for more details)</p>
+<p>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.</p>
+<h3><a class="header" href="#enhanced-dwarf-extension-for-swift" id="enhanced-dwarf-extension-for-swift">Enhanced DWARF Extension for Swift</a></h3>
+<p>For a better Swift debugging experience, there's also an enhanced version of the DWARF extension specifically for Swift. This extension enables:</p>
+<ul>
+<li>Breakpoint setting and Swift code inspection</li>
+<li>Human-readable call stack frames</li>
+<li>Swift variable value inspection</li>
+</ul>
+<p>To install this enhanced extension:</p>
+<ol>
+<li>First, uninstall the official &quot;C/C++ DevTools Support (DWARF)&quot; extension if you have it installed</li>
+<li>Download the extension ZIP file from <a href="https://github.com/GoodNotes/devtools-frontend/releases/tag/swift-0.2.3.0">GitHub Releases</a></li>
+<li>Go to <code>chrome://extensions/</code> and enable &quot;Developer mode&quot;</li>
+<li>Drag and drop the downloaded ZIP file into the page</li>
+</ol>
+<p>When you close and reopen the DevTools window, DevTools will suggest reloading itself to apply settings.</p>
+<p>Note: There is a known issue where some JavaScriptKit types like <code>JSObject</code> and <code>JSValue</code> are not shown in pretty format in the variables view.</p>
+<p><img src="./chrome-devtools-swift.png" alt="" /></p>
 <h2><a class="header" href="#a-hrefhttpsgithubcomkateinoigakukunwasminspectwasminspecta" id="a-hrefhttpsgithubcomkateinoigakukunwasminspectwasminspecta"><a href="https://github.com/kateinoigakukun/wasminspect">wasminspect</a></a></h2>
 <p><a href="https://github.com/kateinoigakukun/wasminspect">wasminspect</a>
 can help in the investigation if the debugged binary does not rely on integration with JavaScript.

getting-started/debugging.html

@@ -761,7 +761,8 @@ <h1><a class="header" href="#debugging" id="debugging">Debugging</a></h1>
 If you are using <code>swift build</code>, it is enabled by default.</p>
 <h2><a class="header" href="#chrome-devtools" id="chrome-devtools">Chrome DevTools</a></h2>
 <p>When you are debugging a web browser application, Chrome DevTools is a good tool to use. It allows you to
-put breakpoints, step through at Swift source code level.</p>
+put breakpoints and step through at Swift source code level.</p>
+<h3><a class="header" href="#official-dwarf-extension" id="official-dwarf-extension">Official DWARF Extension</a></h3>
 <p>Please follow the steps below to configure Chrome DevTools for SwiftWasm:</p>
 <ol>
 <li>Install <a href="https://goo.gle/wasm-debugging-extension"><code>C/C++ DevTools Support (DWARF)</code></a> extension in your Chrome</li>
@@ -770,7 +771,24 @@ <h2><a class="header" href="#chrome-devtools" id="chrome-devtools">Chrome DevToo
 <p>See <a href="https://developer.chrome.com/blog/wasm-debugging-2020">the DevTools team's official introduction</a> for more details about the extension.</p>
 <p><img src="getting-started/./chrome-devtools.png" alt="" /></p>
 <p>Note that the function names in the stack trace are mangled. You can demangle them using <code>swift demangle</code> command.</p>
-<p>Unfortunately, variable inspection is unavailable since Swift depends on its own mechanisms to do that instead of DWARF's structure type feature. (See <a href="https://github.com/swiftwasm/swift/issues/593">this thread</a> for more details)</p>
+<p>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.</p>
+<h3><a class="header" href="#enhanced-dwarf-extension-for-swift" id="enhanced-dwarf-extension-for-swift">Enhanced DWARF Extension for Swift</a></h3>
+<p>For a better Swift debugging experience, there's also an enhanced version of the DWARF extension specifically for Swift. This extension enables:</p>
+<ul>
+<li>Breakpoint setting and Swift code inspection</li>
+<li>Human-readable call stack frames</li>
+<li>Swift variable value inspection</li>
+</ul>
+<p>To install this enhanced extension:</p>
+<ol>
+<li>First, uninstall the official &quot;C/C++ DevTools Support (DWARF)&quot; extension if you have it installed</li>
+<li>Download the extension ZIP file from <a href="https://github.com/GoodNotes/devtools-frontend/releases/tag/swift-0.2.3.0">GitHub Releases</a></li>
+<li>Go to <code>chrome://extensions/</code> and enable &quot;Developer mode&quot;</li>
+<li>Drag and drop the downloaded ZIP file into the page</li>
+</ol>
+<p>When you close and reopen the DevTools window, DevTools will suggest reloading itself to apply settings.</p>
+<p>Note: There is a known issue where some JavaScriptKit types like <code>JSObject</code> and <code>JSValue</code> are not shown in pretty format in the variables view.</p>
+<p><img src="getting-started/./chrome-devtools-swift.png" alt="" /></p>
 <h2><a class="header" href="#a-hrefhttpsgithubcomkateinoigakukunwasminspectwasminspecta" id="a-hrefhttpsgithubcomkateinoigakukunwasminspectwasminspecta"><a href="https://github.com/kateinoigakukun/wasminspect">wasminspect</a></a></h2>
 <p><a href="https://github.com/kateinoigakukun/wasminspect">wasminspect</a>
 can help in the investigation if the debugged binary does not rely on integration with JavaScript.