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!
Y.W
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: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
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
Y.W
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”: “http://ionicframework.com/”,
“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”: “https://github.com/Telerik-Verified-Plugins/ImagePicker.git”,
“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+https://github.com/Telerik-Verified-Plugins/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”: [
“android”
]
}
}
What @intelinc means is that you could just type debugger; in your code before building. So for example:
myFunction() {
for(let burger of burgerkingmenus) {
debugger;
console.log(burger);
}
}
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”?
I don’t understand your question exactly.Debugger can be placed Like this 
Thank You. OK I understand.
Excelent!! I didn’ know about that… Thanks.