7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Testing and Debugging a NativeScript App

In this lesson, I’ll show you how to test and debug a NativeScript app. There are lots of options, but I’ll share the configuration that works best for me.

Related Links

2.4 Testing and Debugging a NativeScript App

Hello everyone, I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tuts+. In this video we will talk about the options that we have to test and debug our apps. Unlike hybrid mobile app development platforms such as Ionic, with NativeScript we cannot test our app on our browser. That is because a NativeScript app does not have a DOM like a web page. As we build our app we often need a way to test it. With NativeScript we actually have to compile our app to preview it. Fortunately, we have a way to watch our compiled app with LiveSync which will allow our changes to be reflected immediately in our app. Since our app is compiled, we have two options for testing our app. The first is to use the default emulator that comes with their platform. From my perspective I have never had success with the Android emulator, so I don't use it. The second option is to use the Genymotion emulator or an actual device connected to USB. Genymotion is a third-party emulator that runs much better than the stock Android emulator. It is free for personal use and really works great. The reason I have grouped this emulator with the physically connected device is the way that Genymotion works. Both the Android emulator and Genymotion are virtual devices but they appear much different to the computer they are installed on. Genymotion runs inside a virtual box and appears the same as a physical device connected to your computer. Now for this course I will just use my actual device since I only have the personal Genymotion. I am also using a nice Chrome app called Visor that mirrors my phone display. Now before we can view our project, we first have to add the Android platform. Make sure you are inside of your project folder in a command line and run the TNS platform add command. Now take note that we can only add platforms for the SDKs that we have installed. For example, if I try to add iOS I will get an error. After that we can use the tns run command. Truthfully, we could have used the run command without adding the platform, but I wanted you to be aware of the command. If we didn't add Android, the platform would have been added by the run command. Now, if we were using the emulator, we would need to add the emulator flag. Now, if you're using Genymotion, just make sure that you have the emulator running and then use the tns run Android command. Eventually our project is built and actually pushed to our device. Bear in mind, I cut a lot of the footage off, but it took around eight minutes to launch the app on my device. It normally doesn't take this long and probably was affected by me recording my screencast, but the problem with this is, what if we make a change to our project? Then we have to stop the preview and recompile. Fortunately, we can use LiveSync. First, hit Ctrl+C in your command line to stop the preview. Then after that we will run the tns livesync command. This is similar to the run command, except we are also passing in the watch flag. As you can see, LiveSync launched much faster than our run command. Now let's go to our app.component.ts file and make a change. After you make the change go ahead and save the project. Then if we go back to our command line, we will notice that the LiveSync has recognized this change and is recompiling our project. Once we make a change and save it, the project will be pushed back to our device. When developing, it is advisable to use LiveSync so your changes will be reflected in the project immediately. We also have the capability of using the tns debug command. This will launch the app in our device as well as launching the browser and stopping at the first breakpoint. This works fine, but since I used the VS Code Editor, I have added the NativeScript extension. I have included the link in the course notes. This allows you to debug directly inside of the editor. Once I have the extension installed, first I will go to the Debug menu. If I click on the cog for settings it will show a list. Then we will choose NativeScript, after that we can choose our desired preview method. I will choose launch on a device. After that we can launch our debugging from the VS code editor. Then we can open the debug console to see what's going on. Once that launches it will stop at the first breakpoint. Once we click on Continue, the app will start to display console messages in the debug console. That's all you need to know for now to test and debug your apps. In the next video, we will learn how to use some of the NativeScript components.

Back to the top