How to debug IONIC


Dear All,

Due to native plugin, some time the IONIC3 only could be run on Real devices or emulator, in this case how could I set break point and debug the code at ts file ?
where could i find console.log’s output in real devices for android?

Any hints will be more than welcome!


Reading console logs while running an emulator

You should use the chrome://inspect functionality for android devices. It will let you open up the device inspector, which looks exactly like the inspector in a normal browser window. You will need to enable usb debugging on your device before you can inspect it. Just run a normal build to your phone (without --prod, else your errors will get obfuscated and unreadable).

Here’s a tutorial on how to do all that stuff:


As @luukschoen said, use remode debugging:
Follow these instructions here to debug the problem in Safari dev tools:
Follow these instructions here to debug the problem in Chrome dev tools:


Thanks for your inputs… i tried remote debugging webview with chrome devtool. but I could not set breakpoint on the ts file.
i guess ionic apps on android is already compiled and build js file.
is there anyway to set breakpoint and debug against ts file ?

thanks and rgds


You can also just use the debugger command in your typescript to trigger a break in execution in chrome devtools. Simple but effective.


could you please a little bit more how to use debugger command to remote debug typescript for real device?

i try build with --dev , then run it on real android device. but still could not attach typescript source code. only see js files, see below screenshot and my package.json

“name”: “PicPrint”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “”,
“private”: true,
“scripts”: {
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”,
“ionic:build”: “ionic-app-scripts build --dev”,
“ionic:serve”: “ionic-app-scripts serve”
“dependencies”: {
@angular/common”: “4.1.3”,
@angular/compiler”: “4.1.3”,
@angular/compiler-cli”: “4.1.3”,
@angular/core”: “4.1.3”,
@angular/forms”: “4.1.3”,
@angular/http”: “4.1.3”,
@angular/platform-browser”: “4.1.3”,
@angular/platform-browser-dynamic”: “4.1.3”,
@ionic-native/core”: “3.12.1”,
@ionic-native/image-picker”: “^3.14.0”,
@ionic-native/splash-screen”: “3.12.1”,
@ionic-native/status-bar”: “3.12.1”,
@ionic/storage”: “2.0.1”,
“com.synconset.imagepicker”: “”,
“cordova-android”: “^6.2.3”,
“cordova-plugin-console”: “^1.0.5”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.2”,
“cordova-plugin-telerik-imagepicker”: “git+”,
“cordova-plugin-whitelist”: “^1.3.1”,
“ionic-angular”: “3.5.0”,
“ionic-native”: “^2.9.0”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.4.0”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.12”
“devDependencies”: {
@ionic/app-scripts”: “2.0.0”,
@ionic/cli-plugin-cordova”: “1.4.1”,
@ionic/cli-plugin-ionic-angular”: “1.3.2”,
“typescript”: “2.3.4”
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“com.synconset.imagepicker”: {},
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {}
“platforms”: [


What @intelinc means is that you could just type debugger; in your code before building. So for example:

myFunction() {
   for(let burger of burgerkingmenus) {

If you have opened chrome devtools and are inspecting your app, it will stop at debugger everytime it was hit.


Try this:

ionic cordova run android --prod --device --livereload


Use ‘cordova run android’ then open chrome ‘chrome://inspect’ click your device for inspect. I think it will help you. Use ‘debugger;’ where u want to check.


Thanks for this trick: ‘debugger;’

I used to debug Angular apps but I was not able to find the equivalent for Ionic. thanks a lot


Very Helpful tanks.
but where is “debugger”?