How do you debug in Ionic2?
Since it is concatenated from the App folder to the www folder, my console log with google dev tools is showing app.bundle.js.65893.
I want to know where the error is inside my App folder quickly. Is this possible?
Thanks
Cameron
I’m using visual studio as IDE and was struggling with debugging for a while but I just got my environment working as I want.
Since I want to use the IDE:s IntelliSense for TypeScript I decided to use TS-files (–ts on project creation in the console). My problem was that since we are writing in TypeScript that is transpiled into Javascript, debugging was tricky since the code that was running was not the same code I was writing.
Then I added “sourcemap” to my project after reading this thread: https://github.com/Microsoft/vscode-cordova/issues/25
Now when I run my project I can inspect the code in Chrome dev tools (Sources->webpack://) and set breakpoints directly in the TypeScript-code directly in the dev tools.
Or if you don’t use an IDE with IntelliSense for TypeScript you could always place a good old debugger statement inside your code. If on execution you hit that specific piece of code, the debugger will stop there
ionic serve -l -s -c
How is this solution affected by the fact that Webpack is no longer used in the Ionic 2 build process? Still struggling to get debugging Typescript working properly. I feel like debugging is such a key part of development that making it easy (and having all of this set up by default) should be a high priority for the Ionic team – at the very least maintaining documentation on how to enable source maps in every version of Ionic 2 with Typescript.
Thanks,
Marc
Hi Marc,
Trying to transition to ionic2 too but the debugging is a mess for a noob. Any insights from your end?
Thanks,
EL
Not a whole lot of insight yet. I’ve been relying on command line feedback from the build process to isolate typescript errors and then I use chrome debugging with a live device for general script stuff. Involves a lot of console logs.
One frustrating thing is that a large part of my app is reliant on a 3rd-party cordova plug-in, which means that I can really only test on the device, even for simple things. It’s frustrating to have to do a build for every small change I want to test. I tried --livereload on the build process, but that doesn’t seem to do anything when I write changes to .ts files (or even .js files) for that matter. Not sure what the development workflow is supposed to be on that one.
Let me know if you have any ideas/successes with debugging – I’m still definitely looking for answers.
Thanks,
Marc
I was messing around with templates and the configuration of this project https://github.com/tsubik/ionic2-geofence allows to easily debug in chrome.
I am not sure of what changes he made though…
It is in fact difficult to debug ionic, especially on device (ios for sure, safari is not that good), so I rely on a LogService that I created (where I can switch on/off for production) and log anything that is worth logging.
If there are issues, errors… I then try to locate the log value and to isolate the problem by logging more in that special area of code…
ionic serve with chrome is nice tho, but in the end you have to test your app on a device…
One question is – has anyone gotten the “source maps” workflow to work with RC2? I have sourcemaps enabled but don’t really know how to get it working with chrome, and don’t know if it will work at all with a live device, so I’ve delayed putting in the effort…
Can you describe more about your “LogService”? How do you set it up? I tend to just pepper my code with console.log() statements and then comment some out when I’ve solved a problem, leave others that provide useful (but not overwhelming) feedback.
Marc
Its simply a injectable component/service and by using that, i call
logService.log whenever i need to.
In the Service or in appsettings i Set enableLog to true, when going
Production to false… more kb in the end but I do not habe to remove every
console.log when going productive.
Additionally, I use it to Log errors and i Send them to a Server…
So upgrading to rc3 broke typescript debugging for me… in Chrome I cannot see my ts files
Each rc have the same problem(debugging doesn’t work). Nothing helps of http://blog.ionic.io/improvements-to-ionic-build-process/. Pity… very good framework. I downgrade “@ionic/app-scripts”: to ver. “0.0.36” and I can see generated ts pages.
How do you downgrade? Does downgrading really allow you to debug the real source?
I would strongly recommend against doing that. Any possible other problems you ever have going forward are instantly going to be met with “upgrade your app-scripts and see if the problem persists”.
@rapropos
Understood, sure. But I really need a debugging environment. Why is this so difficult to enable with TS and Ionic2?
Set “@ionic/app-scripts”: “0.0.36” in package.json and make “npm install” in your project folder.
With app-scripts 0.0.46 and webpack, I have sourcemaps with per-class transpiled JavaScript. I actually find that easier to work with than the original TypeScript in some aspects, because you can see what is actually being executed. Breakpoints work fine.
I am new to ionic2 and Typescript. Can you please explain what webpack and sourcemaps do and how you integrate them to your project? Thank you @rapropos