Salesforce Mobile SDK and Ionic - Debugging Part I
Salesforce Mobile SDK and Ionic - Debugging Part I
Brett M. Nelson - Wednesday, July 26, 2017
When last we left our intrepid little Contacts App it couldn't edit a Contact. Lets take a look at what is happening and see if we can figure out how to resolve it.
Keep in mind we are only doing Android right now so if you are using an iPhone we will have to get to that later.
Debug
First thing we will need to do is enable USB Debugging on your device. On the device go to Settings > Developer Options > Enable USB Debugging then plug your device into you computer with a USB cable. Now open up Chrome's Developer Tools, f12 on Windows or command + options + i on Mac, and go to the menu drop down => More Tools => Remote devices.
If you are using an emulator you may not need to Enable USB Debugging
Access Remote Devices
Now you should have a new tab open named Remote devices.
Remote Devices Tab
When you have the app running you will see a list of pages you can inspect. We are going to want to inspect the one that is titles with our app name, in this case "Ionic App". We can inspect it with the "inspect" button on the right hand side.
List of Inspect-able Pages
Once we inspect our app things will probably look familiar to people who have done web development before.
Inspected App
Now we can see the app view on the left had side and interact with the app through it.
App View
You can also see the same tabs you have when inspecting a webpage in Chrome. So we can look at the source files, set breakpoints, view the DOM and so on just as we would on a regular web page.
Chrome Tools
We also have the console.
Console
While developing I often log things to the console so I can see how things are progressing without using breakpoints. The console messages also include a link to the location in the source so you can quickly find where the message came from.
Conclusion
Now that we know how to look at what is happening we will be able to see what is going on next time.
