(DevNotes) Visual Studio Code

devnotes-vscode.md

Application Debugging

1. On VS Code's Extensions' Marketplace, download Debugger for Chrome

2. Once downloaded, create a launch configuration file.

   2.1 On workspace root directory, create .vscode folder

   2.2 Under the said folder, create a launch.json This file will contain all your debug configurations

   2.3 Paste the following config on launch.json

   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome against localhost",
               "url": "http://localhost:3000",
               "webRoot": "${workspaceFolder}/src",
               "timeout": 50000
           }
       ]
   } 
   

   You can also let VS Code create it for you. Just launch the debug mode and if VS Code can't find any debug configurations on your workspace, it will create one for you.

3. Build the development files by executing below command:

   npm start
   

4. Back on the IDE, start the debug session.
   To do this, select Debug from the side bar, then click on the Start Debugging button. Make sure to select the debug configuration you just created. In this case, the debug definition is Launch Chrome against localhost

5. Happy Debugging!

Keyboard shortcuts:

• F5 - start debugging
• F9 - add breakpoints
• F10 - step over
• F11 - step into
• Shift + F10 - step out
• Shift + F5 - stop debugging

VSCode Extensions

• Bracket Pair Colorizer 2
• Babel JavaScript
• Debugger for Chrome
• ES7 React/Redux/GraphQL/React-Native snippets
• ESLint
• JavaScript (ES6) code snippets
• Todo Tree