Add Chrome DevTools section (#17)

Author: kateinoigakukun

src/SUMMARY.md

@@ -9,6 +9,7 @@
     - [Creating a browser app](getting-started/browser-app.md)
     - [JavaScript interoperation](getting-started/javascript-interop.md)
     - [Testing your app](getting-started/testing.md)
+    - [Debugging](getting-started/debugging.md)
 - [Examples](examples/index.md)
     - [Importing function](examples/importing-function.md)
     - [Exporting function](examples/exporting-function.md)

src/contribution-guide/tips.md

@@ -24,12 +24,3 @@ Compilation time of LLVM and the Swift toolchain is very long, so we recommend t
 
 - [mozilla/sccache](https://github.com/mozilla/sccache)
 - [Use sccache to cache build artifacts](https://github.com/apple/swift/blob/master/docs/DevelopmentTips.md#use-sccache-to-cache-build-artifacts)
-
-## Debugging
-
-When you want to debug a WebAssembly binary, [wasminspect](https://github.com/kateinoigakukun/wasminspect) 
-can help in the investigation if the debugged binary does not rely on integration with JavaScript.
-We recommend splitting your packages into separate executable targets, most of which shouldn't 
-assume the availability of JavaScript to make debugging easier.
-
-![demo](https://raw.githubusercontent.com/kateinoigakukun/wasminspect/master/assets/demo.gif)

src/getting-started/chrome-devtools.png

@@ -0,0 +1,34 @@
+# Debugging
+
+Debugging is one of the most important parts of application development. This section describes debugging tools compatible with SwiftWasm.
+
+These tools are DWARF-based, so you need to build your application with DWARF sections enabled.
+If you are using `carton bundle`, you can use the `--debug-info` flag to enable debugging with optimized application.
+If you are using `swift build`, it is enabled by default.
+
+## Chrome DevTools
+
+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.
+
+Please follow the steps below to configure Chrome DevTools for SwiftWasm:
+
+1. Install [`C/C++ DevTools Support (DWARF)`](https://goo.gle/wasm-debugging-extension) extension in your Chrome
+2. Enable `WebAssembly Debugging: Enable DWARF support` in `Experiments` pane of DevTools settings
+
+See [the DevTools team's official introduction](https://developer.chrome.com/blog/wasm-debugging-2020) for more details about the extension.
+
+![](./chrome-devtools.png)
+
+Note that the function names in the stack trace are mangled. You can demangle them using `swift demangle` command.
+
+Unfortunately, variable inspection is unavailable since Swift depends on its own mechanisms to do that instead of DWARF's structure type feature. (See [this thread](https://github.com/swiftwasm/swift/issues/593) for more details)
+
+## [wasminspect](https://github.com/kateinoigakukun/wasminspect)
+
+[wasminspect](https://github.com/kateinoigakukun/wasminspect)
+can help in the investigation if the debugged binary does not rely on integration with JavaScript.
+We recommend splitting your packages into separate executable targets, most of which shouldn't 
+assume the availability of JavaScript to make debugging easier.
+
+![demo](https://raw.githubusercontent.com/kateinoigakukun/wasminspect/master/assets/demo.gif)