The poor state of Android JavaScript debugging

Cross-platform mobile web development is heating up and the the performance level is continuing to increase as new an more powerful devices are released. One of the allures to this style of mobile development is the single code base you can use across multiple platforms. With wrappers like Cordova and modern web frameworks you can get up and running super quick, but you incur a technical debt in debug time that you won’t know you need until it breaks in an unexpected way. It will break if you work on a sufficiently complex application.

When you start in cross-platform you’re probably thinking about hitting the most devices possible with the least amount of development time. Google reports, as of this posting, that Ice Cream Sandwich and KitKat account for 17.7% of Android installs (http://developer.android.com/about/dashboards). Those devices have it easy because they are coming with Chrome for Android installed. Chrome for Android features the future of debugging mobile web applications with the new remote debugger you can read about https://developers.google.com/chrome-developer-tools/docs/remote-debugging. That is wonderful for the future, but the other 82.3% of devices don’t get this new browser, and that means you don’t get those fancy new debugging features.

88294The first option for debugging on Android is a hosted JavaScript file that is served by a tool called Weinre. The quick way to give Weinre a try is to use the version hosted by PhoneGap at http://debug.phonegap.com. Just load up the script on that page in your app, but you’ll have to use Safari, Chrome didn’t work for me though it did for my colleague. Again poor planning for the extra Android debug efforts lead to confusion and short patience. From here you can see current CSS, DOM and execute JavaScript, but you can’t set any breakpoints. It is very slow, think slower to use than the Android ARM emulator is, and will cause frustration for developers.

Another option that you can use is jsHybugger which is an instrumentation library. This is the solution for proper JavaScript debugging, but the instrumentation does change your code when enabled and deployed to your device. I was personally met with race conditions when the JavaScript files were loaded in a large application and felt uneasy about relying on it for accurate debugging. We suffered from the same poor planning I am advising you don’t do in your project. By the time we needed to debug the app our patience was short, and we didn’t give it enough time or planning.

In the end, to debug your cross-platform mobile web application I would use a combination of both jsHybugger and Weinre. When you start your project and are thinking about all the speed of development improvements just don’t forget about debugging your program. You’ll want to allow for more time debugging your application on Android than you would on iOS. Eventually this won’t be as much of an issue, and it isn’t an issue at all of you only support Chrome for Android, but for now you’ll need to work with more than one debugging solution to deploy a successful cross-platform mobile web app.

My Experience Earning a MCSD for Windows Store Apps Using C#

This summer I had been having fun working on a Windows 8 RT C# application. I decided to take the momentum of learning a new language and platform and apply that to getting certified. To earn a Microsoft Certified Solutions Develop for Windows Store Apps Using C# you need to pass three tests of increasing specialization, 70-483, 70-484, and 70-485.

Exam 70-483: Programming in C#

microsoft-specialistThe first of three exams was 70-483 on programming in C# which I felt pretty good about already. A few other developers had written a few Microsoft 70-483 exam preparation guides and more than one suggestion to read Pro C# 5.0 and the .NET 4.5 Framework which was a intimidating tome to start with. This was easily the most difficult test to prepare for because C# is an enormous language when you start looking under the covers and getting into the details. After reading the book cover to cover and going back through a few times I felt pretty confident about passing the test. Needless to say I was really disappointed to fail it the first time out. They don’t leave you blind and told me the general areas I needed to brush up on. I spent another two weeks going back over everything an hour or two each night before psyching myself up to take another stab at the exam. It was quite a relief to pass the first of three exams. I didn’t realize it before taking the test but passing also gave me my first certification step. In three months of work over the summer I became a Microsoft Specialist in Programming using C# complete with a logo I can use.

Exam 70-484: Essentials of Developing Windows Store Apps Using C#

I took a well deserved break for a week before starting my studies for the next exam, 70-484 on the Essentials of Developing Windows Store Apps Using C#. Here it started to get a lot more interesting as this is what I had already been working on for the last few months. It was at this time I found the Microsoft Virtual Academy and my study methods changed drastically. I did continue reading on the bus and picked up Exam Ref 70-484: Essentials of Developing Windows Store Apps Using C#, but I also started watching Jerry Nixon and Daren May present the video training Windows Store App Development Essentials with C#. As an aside, the MVA is an incredible resource, and I really enjoyed watching and learning from both Jerry and Daren over many hours of video. After finishing up both the book and video I went on to pass this exam on my first try. The sum of knowledge I was building up was obviously cumulative. Understanding what to expect, the exam conditions, familiarity with the facility I think all helped to make this happen in just a couple of months.

Exam 70-485: Advanced Windows Store App Development Using C#

MCSD_2013(rgb)_1484

Feeling like I was on a roll at this point I dove right in to prepare for the final test, 70-485 on Advanced Windows Store App Development Using C#. I started reading on the recommended book Exam Ref 70-485: Advanced Windows Store App Development Using C# and MVA video training Advanced Windows Store App Development Using C# immediately. There was a sense of urgency at this point because the reading material and videos (at the time I was watching them) were about to be out of date! Microsoft was updating the series for the new Windows 8.1 release and additional features. Before I was done with any of the study material I signed myself up for a November 30th test date. It was going to be all or nothing because if I didn’t pass then it would set me back another month to go over new material. I spent all my free time studying to cram it all in before the test and my effort was well rewarded. I passed that morning, and I was elated that I had completed my personal challenge to become a Microsoft Certified Solutions Developer. I’m excited to share with you my new certification logo as well, so shiny.

MCSD and the Future

No certification process covers every piece of possible material, and I am not coming out the other side of this experience knowing all the answers in Windows Store app development. I would do the process again for sure, and I’m probably going to get re-certified in two years. This was a long standing dream of mine that I was able to seize this year and I’m now I’ve got to make my next step. Thanks MVA, Daren May, and Jerry Nixon for putting together the videos and my wife for giving up so much free time.

Using SciTech Memory Profiler for Windows 8 Store Apps

Heading toward the app submission finish line with our new Windows 8 Store App I was wrapping up the remaining functional bugs and we had a moment to breath. Of course with that extra time I started to poke around at performance and asked about our expected usage. They didn’t have an idea so we pull some heavy usage tests out of thin air and threw them at the application. It buckled, taking just over a minute to start the main process after connecting to a server. The Visual Studio tools for profiling and performance analysis are awesome, but were grayed out for my application! I could only do CPU profiling using the build in performance wizard so I started looking elsewhere. Specifically it would not let me do the Visual Studio Performance Wizard for Implementation or Memory profiling. I downloaded every application that was recommended on StackOverflow but SciTech Memory Profiler was what did it for me.

Installation was pretty simple, it integrated right into Visual Studio. I built my application and pulled it up on one window with the profiler on the other. I loved using the real-time profiling, watching the memory usage rise was fun, and disconcerting. I looked through the function calls, seeing where all my time was being used and it ended up being an inefficiency in how I spooled up a pool of WebViews. There was a still a lingering memory leak though, and after a few more hours of digging around I found out I made a very newbie mistake of not removing my event listeners, which prevented old pages from being garbage collected completely.

I could not get the build in Visual Studio tools to provide any of this functionality, so SciTech was a savior in that respect. One improvement I would like to see however is the ability to debug my application from within the Surface Simulator which I couldn’t figure out how to get working.