Updated README for June 2021

Author: abartho

README.md

@@ -5,11 +5,10 @@ The aim of this repository is to help setting up Visual Studio Code for developm
 Visual Studio Code comes with Electron support and Typescript support out of the box, but bringing the two together requires some advanced knowledge of the available configuration options. The repository contains a README with step by step instructions and an example project to demonstrate how Visual Studio Code, Node, Electron and Typescript must be configured to work together.
 
 The latest example project has been created and tested on Linux with 
-- Node v16.1.0
-- Electron v12.0.7
-- Typescript v4.2.4
-- Visual Studio Code v1.56.0
-- Debugger for Chrome extension v4.12.12
+- Node v16.3.0
+- Electron v13.1.2
+- Typescript v4.3.2
+- Visual Studio Code v1.57.0
 
 ## Install application
 ```sh
@@ -28,35 +27,37 @@ npm start
 
 ## Set up Visual Studio Code and start debugging
 
-1) Install the "Debugger for Chrome" extension. 
-
-    It is required for debugging renderer processes.
-
-    ![Debugger for Chrome](./docs/media/install_debugger_for_chrome.png)
+1) Set a breakpoint in `src/main.ts` and `src/renderer.ts`
 
 1) In the Run view, select the "Electron: All" configuration. 
 
     This is a compound configuration that will start both the "Electron: Main" and "Electron: Renderer" configurations.
 
     ![Select configuration](./docs/media/select_configuration.png)
-    
-1) Set a breakpoint in `src/main.ts` and `src/renderer.ts`
 
-1) Run the "Run" -> "Start Debugging" command (<kbd>F5</kbd>)
+1) Click the green arrow next to the "Electron: All" configuration, or run the "Run" -> "Start Debugging" command (<kbd>F5</kbd>)
 - The breakpoint in the `main.ts` will be hit.
 - Click Continue (<kbd>F5</kbd>)
 - In the Electron example app, click the "Turn page red" button.
-- The breakpoint in `renderer.ts` should be hit.
-  
-- If the breakpoint is not hit and marked as unbound instead:
+- The breakpoint in `renderer.ts` will be hit.
+
+---
+**Troubleshooting**
+
+  If you are using Visual Studio Code v1.56.x or older, you may find that the breakpoint in `renderer.ts` is not hit and marked as unbound instead:
   ![Unbound Breakpoint](./docs/media/unbound_breakpoint.png)
 
-     you have likely come across a [bug](https://github.com/microsoft/vscode/issues/123420) in the new JavaScript debugger for Node.js and Chrome, which is currently in preview and enabled by default. The bugfix will probably be released in Visual Studio Code v1.57. As a temporary workaround, disable the preview debugger.
-  - Open Settings (<kbd>Ctrl+,</kbd>)
-  - Search for `debug.javascript.usePreview`
-  - Set option to false
-  ![Disable Preview JavaScript Debugger](./docs/media/disable_preview_javascript_debugger.png)
-  - Run the "Electron: All" configuration again
+  This is because of a [bug](https://github.com/microsoft/vscode/issues/123420) in the internal JavaScript debugger. As a workaround, you can either update to the latest version of Visual Studio Code, or use the "Debugger for Chrome" extension:
+  - Install the "Debugger for Chrome" extension v4.12.12
+    ![Debugger for Chrome](./docs/media/install_debugger_for_chrome.png)
+  - In `.vscode/launch.json`, change the renderer configuration type from `pwa-chrome` to `chrome`
+  - Change settings to prevent the "Debugger for Chrome" extension from using the internal Javascript debugger:
+    - Open Settings (<kbd>Ctrl+,</kbd>)
+    - Search for `debug.javascript.usePreview`
+    - Set option to false
+    ![Disable Preview JavaScript Debugger](./docs/media/disable_preview_javascript_debugger.png)
+
+When you run the "Electron: All" configuration the next time, the breakpoint should be hit.
 
 
 
@@ -65,7 +66,7 @@ npm start
 Electron has two kinds of processes: a main process and renderer processes (one for each tab). They need different launch configurations, which are shown below. The code snippets are taken from the [launch configuration](.vscode/launch.json).
 
 ### Main process
-The main process can be debugged with the pwa-node debugger that ships with Visual Studio Code.
+The main process can be debugged with the pwa-node debugger, that ships with Visual Studio Code.
 
 The launch configuration looks like this:
 
@@ -94,12 +95,12 @@ In the `sourceMaps` and `resolveSourceMapLocations` sections, we enable the crea
 In the `runtimeArgs` section, we open a port for the renderer process. There is a counterpart defined in the renderer process configuration as shown below. 
 
 ### Renderer process
-Debugging a renderer process requires the "Debugger for Chrome" extension.
+A renderer process can be debugged with the pwa-chrome debugger, that ships with Visual Studio Code.
 
 ```jsonc
 {
   "name": "Electron: Renderer",
-  "type": "chrome",       //use the Debugger for Chrome (extension)
+  "type": "pwa-chrome",   //use the Chrome debugger that comes with VS Code
   "request": "attach",
   "port": 9223,           //use debug port opened in Electron: Main configuration
   "webRoot": "${workspaceFolder}",