title: Debugging nextjs app in chrome and vscode
body: <p>I have inserted this snippet in my launch.json file. It always opens up chrome and is stuck at about:blank, and then vscode gives the timeout error. I built this launch.json file by following the steps here. 
  <a href="https://github.com/Microsoft/vscode-recipes/tree/master/Next-js" rel="noreferrer">https://github.com/Microsoft/vscode-recipes/tree/master/Next-js</a> and modified it to run for chrome canary. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Chrome Canary",
              "type": "chrome",
              "request": "launch",
              "url": "http://localhost:3000/",
              "runtimeExecutable": "C:/Users/myusername/AppData/Local/Google/Chrome SxS/Application/chrome.exe",
              "webRoot": "${workspaceFolder}"
          },
          {
              "type": "node",
              "request": "launch",
              "name": "Next: Node",
              "runtimeExecutable": "next",
              "runtimeArgs": [
                  "--inspect"
              ],
              "port": 9229,
              "console": "integratedTerminal"
          }
      ],
      "compounds": [
          {
              "name": "Next: Full",
              "configurations": [
                  "Next: Node",
                  "Chrome Canary"
              ]
          }
      ]
  }</code></pre>
  </div>
  </div>
  </p>