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


#1

Hi there.

Here is a way I found to get debugging working with App Scripts 0.0.46.

Prerequisites

  • Google Chrome

  • Latest VS Code

  • Latest Ionic CLI + Latest package.json and tsconfig.json - simplest way to get these I have found is to use npm install ionic@latest -g. Then create a new project and copy the package.json, tsconfig.json and the node_modules folder over to your existing project. If you’ve been keeping up to date, the quick way is this: http://blog.ionic.io/rc3-error-reporting-final-oh-my/

  • The Chrome Remote Debugger extension (Go to extensions in VS Code and search Chrome. After installing restart VS Code)


Config

  • Typescript Sourcemaps

1.Go to your package.json and add
"config": { "ionic_source_map": "source-map" }
after the ‘description’ entry.

  • Sourcemap Mappings

1.In VS Code click on the debugger panel. Ensure that your project is currently in VS Code.
2.Click the settings Cog and choose the Chrome option. Don’t use Cordova Tools. If clicking the settings cog only brings up the launch.json, delete the .vscode folder in your project directory.
3.In the project file viewer find a folder called .vscode
4.Find launch.json under .vscode
5.Make your launch.json look like mine except under the source map overrides. Here, specify your own typescript files which you want to be able to debug. Anything not specified here wont be accessible by the debugger:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}",
        "url":"http://localhost:8100/",
        "sourceMapPathOverrides": {
            "webpack:///helper.ts": "${webRoot}/src/directory1/helper.ts",

            "webpack:///link.ts": "${webRoot}/src/directory2/link.ts",

            "webpack:///my-page.ts" : "${webRoot}/src/pages/report-fault/my-page.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"
        }
    }
]
}

NOTE: We are interested in the “Attach to Chrome” entry.
NOTE: Since the ionic serve build process removes the directories that all your ts files are in, you have to show VSCode where each file maps to within your project.
NOTE: When I drop-dragged my project onto VSCode, I used the folder which had all these files in it:


If you put a ‘higher’ folder in, the launch.json won’t point to the right stuff.


Debugging

Now the fun bit.

  1. Close all instances of Google Chrome. On windows sometimes Chrome runs in the background so be thorough.

  2. On a Mac, open the terminal and type:
    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
    (on a windows, launch chrome with the same flag)

  3. cd to your project directory and run ionic serve

  4. Once the build process is complete and chrome is displaying your app, got to VS Code and start the debugger. You do this by going into the debugging tab and clicking the green play button. (NOTE: Make sure the mode is set to “Attach to Chrome, with sourcemaps”).

  5. Set some breakpoints (You can do this earlier) in your .ts files and refresh the browser by clicking the address bar and hitting enter. (For some reason the Ionic CLI has got rid of the ‘r’ command, not sure why - could someone clarify!)

You are done!
I hope this has been helpful

Thanks
Chris


#2

???
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??


#3

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!!


#4

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


#5

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!


#6

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!


#7

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:


#8

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?


#9

Hi Joachim

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

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


#10

Hi Chris,

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

regards
Joachim


#12

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.


#13

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


#14

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


#15

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


#16

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


#17

Thank you so much!! It works!

Joachim


#18

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.


#19

IMPORTANT UPDATE:

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


#20

OMG think you so much :slight_smile:


#21

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