Debugging Ionic Apps using Chrome Developer Tools

posted in: Uncategorized | 2

Chrome Developer Tools have gotten amazing over the years and are one of the main reasons I am an avid Chrome user. There are so many great tools built in that help you figure out exactly what is going on with your app, especially in the case of errors or unexpected behavior. This can be super helpful when debugging Ionic apps in the browser.

This article will discuss some of the basics of using the Developer Tools to figure out what is going on with your Ionic App.

Developer Tools?

Before we get into it, let’s start with a really basic question. What ARE the developer tools and how do you access them?

Developer Tools are a set of tools (duh) available to developers (duh) that allow you to debug whatever is going on in your browser including seeing errors, network requests, what is stored in localStorage, and much more.

The developer tools can be accessed by pressing F12 (if you’re on windows or Cmd + Opt + I on Mac) on your keyboard. This will open a whole new interface that you can dock or have as it’s own window. Here you will find all of the tools we’ll be discussing in this article.

Console Introduction

The console is the developers best friend. Here you will find errors and messages that you can put there to help yourself figure out what is going on. In the early days of the web before developer tools, the cavemen of the web used to use alert boxes for debugging (Oh, the memories).

alerts

These days, we use console commands instead. The most basic console command is console.log.

console.log("Hello World!");

We can output string like above or.. pretty much anything (Objects, arrays, etc).

var a = {name: "Andrew"};
var b = [1,2,3];
console.log(a);
console.log(b);

Example 1 Developer Tools Output

If we console.log something more complicated, like an array of objects, it becomes less helpful (giving us something like [object, object, object], however we can expand this log statement and see the contents of the array.

var people = [
	{
		firstName: "Andrew",
		lastName: "McGivery",
		age: 24
	},
	{
		firstName: "Jack",
		lastName: "Daniels",
		age: 59
	},
	{
		firstName: "Abbey",
		lastName: "Normal",
		age: 42
	}
];

console.log(people);

Example 2 Developer Tools Output

However, what is even more helpful is that we can call console.table on something like this (An array of tabular data) and see our array of objects similar to how you might expect to see it in a database tool like SQL Management Studio or MySQL Workbench.

console.table(people);

Example 3 Developer Tools Output

We also have a couple more methods available for logging to display visually different messages such as error, info, and warn.

console.error("Hello World");
console.info("Hello World");
console.warn("Hello World");

Example 4 Developer Tools Output

Debugging Factories/Services

Have you ever been using a factory to talk to a web service and could not figure out what was going on? Why was your data not binding as expected to your template? Were you even sure you were getting data?

Developer Tools is amazing for this process as we can see what happens along each step of the way using the Network tab and the Console tab and see what is happening from the sending of the request to seeing what response we are getting back.

Say we have a PersonService object enclosed in a factory. (I’ll be using the example from Creating a Feed in Ionic if you want to follow along.)

.factory('PersonService', function($http){
	var BASE_URL = "http://api.randomuser.me/";
	var items = [];
	
	return {
		GetFeed: function(){
			return $http.get(BASE_URL+'?results=10').then(function(response){
				items = response.data.results;
				return items;
			});
		},
		GetNewUsers: function(){
			return $http.get(BASE_URL+'?results=2').then(function(response){
				items = response.data.results;
				return items;
			});
		},
		GetOldUsers: function(){
			return $http.get(BASE_URL+'?results=10').then(function(response){
				items = response.data.results;
				return items;
			});
		}
	}
})

Let’s break this down into two steps.

  1. Is the request being sent successfully?
  2. Is the response received successfully and is our factory getting data?

For the first question, let’s take a look at our Example on CodePenand open the Network panel is Developer Tools. We’ll ignore some of the extra requests sent by CodePen and filter by XHR requests (Where our $http.get request can be found). Here, we can see all of the details of our request to the API including the URL we sent the request to and the status code of the request (did we get an error?).

Developer Tools network panel

But, lets say we aren’t getting a response.. something went wrong… for example, lets say we typoed and accidentally typed api.randomuseer.me. What might the Network Monitor show?

network error

The console has something to say about this too.

Developer Tools network error 2

Now that we know if the request is sending or not, and we know the first half of question two (we are getting a response), how do we know what data is getting to the factory? Let’s add a console.log statement in our .then method of our $http.get call.

GetFeed: function(){
			return $http.get(BASE_URL+'?results=10').then(function(response){
				console.log(response);
			
				items = response.data.results;
				return items;
			});
		},

Example 5 Developer Tools Output

So, we’re getting a response… let’s expand the data property and see what is in there.

Example 5 Developer Tools Expanded Output

There’s our data! As per the original function, we can get the data from the response from response.data.results array.

Debugging Markup and Styles

Ever having trouble figuring out what markup is being generated by a directive, controller, etc? Not sure what styles or classes are being applied? The Elements pane in the Developer Tools is your friend. You can find out all kinds of information about your markup including what CSS classes are being applied to an element, what those classes do, and which classes are overriding other classes due to specificity.

Using the Tabs And Navigation example on CodePen, let’s say we want to know what class is being applied to the tab buttons to make the active tab stand out. For example, if we’re on the home tab, it appears to be a solid white color while the others appear to be washed out with lower opacity. Let’s inspect element on the home tab button. Right click on the tab and then click inspect element.

Developer Tools HTML Element Inspector

As I’ve highlighted in the above screenshot, you’ll notice the home button has both the tab-item class and the tab-item-active class. On the right Styles panel for the element, we can see that the .tab-item class has a opacity set of 0.7, however it is crossed out. Why? Because above it, we have .tab-item.tab-item-active setting the opacity to 1, which is using a more specific selector.

Debugging a Blank/Broken Screen

Sometimes when developing, especially when first starting on an app, you may get a White Screen of Death… you refresh the page and it is blank, empty nothingness. What happened?

Again, the console is your friend. Using an , we have an app which isn’t quite a blank screen, but it definitely isn’t doing what we want it to do. Let’s open the console.

Developer Tools error

What we’re seeing here is that the controller HomeTabCtrl is not defined. Double checking the source code, we can see why. Spelling mistake in the controller name.

.controller('HomeTabCtrll', function($scope) {
  console.log('HomeTabCtrl');
});

In all cases where you are getting a blank screen, check your console! Angular and Ionic do a very good job of exposing errors when they happen.

Conclusion

When developing apps in your browser using the Ionic Framework, the Chrome Developer Tools can be a live saver, helping you understand exactly why your app isn’t working. Try them, learn them, use them. You won’t regret it.

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

2 Responses

  1. John Hanam

    Thanks! I didn’t know about console.table()!

    One other thing that’s incredibly helpful: being able to use the Chrome dev tools against your app built and running on an Android device. If you follow these steps: (http://www.adamwadeharris.com/remote-debugging-in-phonegap-with-chrome-devtools/), you can use the full suite of Chrome dev tools to inspect the app actually running on the device. You can then play with the layout/CSS live, debug network calls, etc. I use it all the time!

    Cheers–

  2. […] NEWDebugging Ionic Apps using Chrome Developer Tools […]

Leave a Reply