CODEWITHSUNDEEP
javascriptangulargoogle-chromedebuggingionic3
user3006967
user3006967

Reputation: 3545

how to debug ionic3 typescript code in chrome dev tool

I found it is very difficult to debug ionic code in chrome debugger. Actually, it is only angular2 project, but with ionic component. When I open chrome dev tool and select "go to file", I can not find the .ts file that I want to debug at all. This is strange to me. I can easily debug any angular2 project, why not in ionic? I want to use ionic3/angular4 to develop a mobile web. Is ionic also using webpact, if so, I think I just need to enable sourcemap and then debug it in chrome dev tool. Have you ever successfully debugged ionic .ts file in chrom?

Upvotes: 1

Views: 1076

Answers (2)

Abhijit Chakra
Abhijit Chakra

Reputation: 3236

Very simple Open package.json add below code . 

"config": {
        "ionic_bundler": "webpack",
        "ionic_source_map_type": "#inline-source-map"
    }

do chrome://inspect you can see the source file

Upvotes: 1

Will de la Vega
Will de la Vega

Reputation: 554

If you are using Visual Studio Code you can install the Cordova Tools extension, which will let you debug on the device, it is a very powerful tool for VSCode which is also the best Editor/IDE that I have found to develop Ionic 3 and Angular 4 apps.

The procedure is straight forward:

  • Delete existing launch.json file from .vscode directory and go to Debugger and click on the little gear icon.

  • Select Cordova as the debugger.

  • The extension will create 12 configs for you actually, we need the first one which is 'Run Android on device'

  • Now, this is what I do (Mac OS X Sierra), depending on how and what components you have installed in your system this may change. I open Android Studio and then connect my usb cable which is attached to my android test device.

  • Once I see my device listed in the Android Monitor Panel and the debug processes running in the Logcat tab, I switch to my VSCode Window and issue in the terminal: ionic cordova android run, then wait for the app to launch on the phone.

  • Once the app is showing in the device, click the debug button in VSCode and the debugger should attach.

  • Now your the debugger should hit your breakpoints and let you debug your typescript code with the app running on your test device.

I guess you could also debug directly from the Chrome Developer Tools, but it may require you to configure some more additional options regarding location of your source map files within tsconfig.json. I rather recommend you vscode as it has tons of useful features, it's free and also has extensions for Ionic 3 snippets, autocompletion and CLI commands from the UI.

Upvotes: 0

Related Questions