📝 Document debugging

docs/tutorial/application-debugging.md

@@ -0,0 +1,38 @@
+# Application Debugging
+
+Whenever your Electron application is not behaving the way you wanted it to,
+an array of debugging tools might help you find coding errors, performance
+bottlenecks, or optimization opportunities.
+
+## Renderer Process
+
+The most comprehensive tool to debug individual renderer processes are the
+Chromium Developer Tools. They are available for all renderer processes,
+including instances of `BrowserWindow`, `BrowserView`, and `WebView`. You
+can open them programmatically by calling the `openDevTools()` API on the
+`webContents` of the instance:
+
+```javascript
+const { BrowserWindow } = require('electron')
+
+let win = new BrowserWindow()
+win.webContents.openDevTools()
+```
+
+Google offers [excellent documentation for their developer tools][devtools].
+We recommend that you make yourself familiar with them - they are usually one
+of the most powerful utilities in any Electron Developer's tool belt.
+
+## Main Process
+
+Debugging the main process is a bit trickier, since you cannot simply open
+developer tools for them. The Chromium Developer Tools can [be used
+to debug Electron's main process][node-inspect] thanks to a closer collaboration
+between Google / Chrome and Node.js, but you might encounter oddities like
+`require` not being present in the console.
+
+For more information, see the [Debugging the Main Process documentation][main-debug].
+
+[node-inspect]: https://nodejs.org/en/docs/inspector/
+[devtools]: https://developer.chrome.com/devtools
+[main-debug]: ./debugging-main-process.md