How to debug Typescript in Ionic Apps using VS Code and App Scripts 0.0.46

???
2. …delete the .vscode folder in your project directory
3. …find a folder called .vscode

Am I missing something? How can I find the folder if I just deleted it??

Ok, i restored the .vscode folder and changed the launch.json as you describe and it works! :smile:

Thank you very much for these instructions!!

@chrisjpalmer - just want to say thank you so much for this - it was hugely helpful! :slight_smile:

Excellent guys! Im so glad. This is something I have been wanting to do for a while myself and I knew there were a bunch of people googling it. When I discovered the solution after some hours of testing I thought I had to put it up haha!

1 Like

Yes so in response to that, you would have discovered that I was getting you delete the old .vscode folder which may have had some prior configuration in it. Clicking the settings cog and choosing “Chrome” option will regenerate the .vscode folder. I am anticipating that some users will come having tried Cordova tools and so they will have to delete their old .vscode.

Thanks!

Thanks for the exposition! First time I’ve had vscode working with Ionic in months.

Just a note that you can run Chrome Canary (and possibly chromium) alongside chrome as a separate chrome instance if (like me) you use Chrome as your daily driver browser and don’t relish reloading 28,000 tabs in order to start debugging. :wink:

Ah, I understand! Thanks for the explanation!

I also experience that once I edit a file and the browser reloads, I cannot connect the debugger any more. I have to close the chrome instance, open it again through the cmd window and only then I can connect. Is there a more elegant way?

Hi Joachim

Here’s what I’m doing. I change a file in VSCode and click the green reconnect button.

image

Give this a try and see if it works. If still no luck, try completely disconnecting by use of the red disconnect button - then reconnect using the normal debug play button.

Let me know if you still have issues.

Chris

Hi Chris,

thanks for your help. Yes, it works now and i have a debugging experience like never before :slight_smile:

regards
Joachim

1 Like

Hi @chrisjpalmer and thank you for your input about VSCode debugging. There’s one thing I’ve found when trying to debug ionic2 code project. My launch.json looks like this atm:

    {
      "name": "Canary Attach",
      "diagnosticLogging": true,
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:8100",
      "webRoot": "${workspaceRoot}",
      "port": 9222,
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///tabs.ts" : "${webRoot}/src/pages/tabs/tabs.ts"
      },
      "runtimeExecutable": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
      "runtimeArgs": [
        "--disable-web-security",
        "--user-data-dir",
        "--remote-debugging-port=9222"
      ]
    },

First few explanations:

  • i’m using Canary in this case, however, it doesn’t make a difference.
  • changing webRoot to ${workspaceRoot}/src WILL trigger breakpoint.
  • removing sourceMapPathOverrides doesn’t make any difference either

package.json entry:


As soon as you change your TS code file, the ionic watcher triggers and replaces .map files, of course. However, in this time, VSCode breaks with this error:

******** Unhandled error in debug adapter: TypeError: Cannot read property 'toLowerCase' of undefined
    at SourceMaps.mapToAuthored (/Users/gregorpapez/.vscode/extensions/msjsdiag.debugger-for-chrome-2.3.0/node_modules/vscode-chrome-debug-core/out/src/sourceMaps/sourceMaps.js:32:42)
    at BaseSourceMapTransformer.breakpointResolved (/Users/gregorpapez/.vscode/extensions/msjsdiag.debugger-for-chrome-2.3.0/node_modules/vscode-chrome-debug-core/out/src/transformers/baseSourceMapTransformer.js:203:45)
    at ChromeDebugAdapter.onBreakpointResolved (/Users/gregorpapez/.vscode/extensions/msjsdiag.debugger-for-chrome-2.3.0/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeDebugAdapter.js:394:36)
    at Client.chrome.Debugger.onBreakpointResolved.params (/Users/gregorpapez/.vscode/extensions/msjsdiag.debugger-for-chrome-2.3.0/node_modules/vscode-chrome-debug-core/out/src/chrome/chromeDebugAdapter.js:142:66)
    at emitOne (events.js:96:13)
    at Client.emit (events.js:188:7)
    at Client.processMessage (/Users/gregorpapez/.vscode/extensions/msjsdiag.debugger-for-chrome-2.3.0/node_modules/noice-json-rpc/lib/noice-json-rpc.js:64:18)
    at LoggingSocket.Client.socket.on.message (/Users/gregorpapez/.vscode/extensions/msjsdiag.debugger-for-chrome-2.3.0/node_modules/noice-json-rpc/lib/noice-json-rpc.js:28:46)
    at emitTwo (events.js:111:20)
    at LoggingSocket.emit (events.js:191:7)

Which makes perfect sense (I hope). The issue probably being ionic removes the previous temp files (including Maps) and creates new. In exact same time, debugger doesn’t find the maps and outputs the error.

Versions of ionic used:
ionic 2.1.14
ionic-app-scripts 0.0.46

The issue has been posted also on VSCode chrome debugging issue tracker here.

Hi Lord Greg

This is a tricky one and I haven’t been able to reproduce the error on my machine.

I am going to show you what tests I have done and also just clarify some stuff with the launch.json.

launch.json

The launch.json you posted looked like this:

{
  "name": "Canary Attach",
  "diagnosticLogging": true,
  "type": "chrome",
  "request": "attach",
  "url": "http://localhost:8100",
  "webRoot": "${workspaceRoot}",
  "port": 9222,
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:///tabs.ts" : "${webRoot}/src/pages/tabs/tabs.ts"
  },
  "runtimeExecutable": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
  "runtimeArgs": [
    "--disable-web-security",
    "--user-data-dir",
    "--remote-debugging-port=9222"
  ]
},

I understand why you have done this, its because you have been switching between attach and launch modes to test debugging. However for the sake of clarity (for those who are watching this thread) you dont need the runtimeExecutable or runtimeArgs parameters for “attach”. This is because you are “attaching” to an already running instance of Chrome. You run chrome from the command line with those flags, type “localhost:8100” into the url bar, then start the debugger. Alternatively you can keep your launch.json entirely the same as what you had except changing the request type to “launch”. This will launch Chrome for you but Chrome will disappear when you stop debugging.

Tests

Okay I have done some considerable testing and i was unable to reproduce the error. Here is what I have tried:

OS: Mac OSX Sierra 10.12.1

TEST 1
IONIC APP SCRIPTS 0.0.46
IONIC CLI 2.1.13
CHROME DEBUGGER EXTENSION 2.2.2
VS CODE: 1.7.2
CHROME CANARY: 57.0.2939.0

Pass

TEST 2
IONIC APP SCRIPTS 0.0.46
IONIC CLI 2.1.14
CHROME DEBUGGER EXTENSION 2.2.2
VS CODE: 1.7.2
CHROME CANARY: 57.0.2939.0

Pass

TEST 3
IONIC APP SCRIPTS 0.0.46
IONIC CLI 2.1.14
CHROME DEBUGGER EXTENSION 2.3.2
VS CODE: 1.7.2
CHROME CANARY: 57.0.2939.0

Pass

TEST 4
IONIC APP SCRIPTS 0.0.46
IONIC CLI 2.1.14
CHROME DEBUGGER EXTENSION 2.3.2
VS CODE: 1.7.2
CHROME: 54.0.2840.98

Pass

ANALYSIS

  • I notice that you are using Chrome Debugger 2.3.0
  • Each test involved both using the attach mode and the launch mode as I outlined above.
  • I debugged the ionViewDidLoad event in one of my views, then added the line console.log("Hello World"); to simulate a change. This caused the ionic app to rebuild and restart. The breakpoint hit again without any failure.
  • I even tested with normal Chrome and still couldn’t reproduce the error.

I also examined your stack trace to see if I could make sense of it. I have had no involvement in the Chrome Debugger Extension code but I thought I’d take a look at it anyway. It seems that a string called “pathToGenerated” is undefined for some reason. If you trace it back, the string should get set in chromeDebugAdapter.js ln 393 as const scriptPath. If you lookup how it gets set, you can work out that scriptPath should actually be getting set directly to script.url in the same function.

Thats as far as I got. I am not well versed with any of this code at all, but I implore some other smart people to take a look too.

Im so sorry you can’t get it working… its so very frustrating when you cant do such a simple thing as debug your application!

Hope this helps!

Chris

Hi guys,
I followed this http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html explainations, works well !

Hi Chris,
I was able to set up debugging in vs studio code thanks to your instructions.

However, I updated recently to rc.4 and scripts 0.0.47 and now I still can attach the debugger and get the console output, but can´t set a breakpoint. It gives me the error message "breakpoint ignored because generated code not found (source map problem?)

Do you have any idea what I have to do?

thanks
Joachim

Hi

I had to add /www to webroot to get the breakpoints working

        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/www",
            "url":"http://localhost:8100/"          
        }

hth
Tim

4 Likes

Thank you so much!! It works!

Joachim

Running RC6, I want to use launch in browser as I don’t understand the concept/benefit of attach. Why am thrown in garbage polyfills.js and the like ?, I also get in chrome a tooltip like pop that says “Paused in Visual Studio Code” as soon as I launch in browser from vscode, why is that.

Is there any hope for the old debugging behavior to return back or ionic 2.0 has lost it forever? Do I really have to provide a paired list of where each .ts maps into the src/ folder in order for the debugger to find it, this is ridiculously insane.

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

, "sourceMapPathOverrides": {
"webpack:///AMSView.ts": "${webRoot}/src/components/AMS/AMSView.ts",
"webpack:///MediaListComponent.ts": "${webRoot}/src/components/UMS/MediaListComponent.ts",
"webpack:///tabs.ts": "${webRoot}/src/pages/tabs/tabs.ts",
"webpack:///app.component.ts": "${webRoot}/src/app/app.component.ts",
"webpack:///app.module.ts": "${webRoot}/src/app/app.module.ts"
}

Thank you.

IMPORTANT UPDATE:

My new tutorial for the new version of Ionic 2 is here:

OMG think you so much :slight_smile:

Hi Nakun. This thread is probably depreciated by now. Debugging has just worked straight out of the box for me. The only case is if you are running an old version of ionic.

Kind Regards

Chris

unfortunately not and this is what is recommended to me :
image