How do you configure vsCode to debug ionic2 in chrome


#1

i’m starting with a new project so TS source maps are working correctly in ChromeDevConsole. My packgage.json includes:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build --dev --debug",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "angular2-google-maps": "^0.15.0",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.36",
    "typescript": "^2.0.3"
  },

I’m trying to launch the chrome debugger from vscode. my launch.json looks like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8100",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/www"
    },
    {
      "name": "Attach to Chrome, with sourcemaps",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/www",
      "url": "http://localhost:8100"
    }
  ]
}

I run ionic serve and I can open the app on http://localhost:8100 and successfully set a manual breakpoint in the ChromeDevConsole. but when I try to launch "Launch Chrome against localhost, with sourcemaps" I get:

Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222).

I also tried opening a chrome window via

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Then navigating to http://localhost:8100 and "Attach to Chrome, with sourcemaps" but I get the same error.


#2

Check this might help you

Debug your JavaScript code running in Google Chrome from VS Code https://github.com/Microsoft/vscode-chrome-debug#debug-your-javascript-code-running-in-google-chrome-from-vs-code

vscode-chrome-debug-example https://github.com/Microsoft/vscode-chrome-debug/wiki/Examples

ionic2-vscode https://marketplace.visualstudio.com/items?itemName=jgw9617.ionic2-vscode

Debugging JS & TS with Visual Studio Code https://johnpapa.net/debugging-with-visual-studio-code/


#3

I added the following 2 lines to my launch.json and now I can launch a debug session successfully:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8100",
      "sourceMaps": true,
// add next 2 lines
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "diagnosticLogging": true,
      "webRoot": "${workspaceRoot}/www"
    },

But breakpoints are still not working correctly. I see this in my logs and I’m wondering if If have my config setup correctly:

SourceMaps.setBP: SourceMaps are enabled but /[...]/www/build/main.js is a runtime script
Paths.setBP: Resolved /[...]/www/build/main.js to http://localhost:8100/build/main.js

#4

Hi @mixofia - did you ever get this working? I’m trying to do similar. With the recent build updates it seems like this is also a moving target…


#5

not yet. it would hang once I launched the debugger…


#6

Hi, it seems it is fixed on github . I have the same situation here.


#7

install the latest appscripts & Vscode
try the following configuration

{
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src/",
            "userDataDir": "${workspaceRoot}/chrome/"
 }

still have the same problem