Debug Your Web App (Amazon Fire TV)

You can use Chrome DevTools on your development machine to debug a web app that is running on a Fire TV device, Fire tablet or other Android device.

Connect the development machine and host device using either a USB cable or a WiFi network.

Note: The Chrome DevTools, the Chrome Browser installation tool, the Android SDK and certain other development tools referenced on this page are provided by third parties, not by Amazon. Our links for these tools will take you to third-party sites to download and install them.

Pre-requisites

  • Connect your device and computer using ADB. See [Connect to fire-tv through ADB][fire-tv/connecting-adb-to-device].
  • Install and setup the Web App Tester. See [Install and Use the Amazon Web App Tester][fire-tv/webapp-app-tester].
  • USB or WiFi connection between development machine and host device.

Install Chrome DevTools

To use the Chrome DevTools to debug your web app, you must first install the Chrome Browser (version 32 or later) on your computer. Visit http://www.google.com/chrome for download instructions.

The Chrome DevTools use the Android Debug Bridge (adb), part of the Android SDK tools, to communicate with the web app from your computer. For more information on using the Chrome DevTools, see Discover Chrome DevTools on the Chromium blog.

On your development machine, open Chrome. You should be signed in to Chrome with one of your Google accounts. Remote debugging does not work in Incognito Mode or Guest Mode.

Set Up the Debug Environment Using USB

Follow these steps to connect Chrome DevTools on your development machine to the Web App Tester on your host device:

  1. Connect your host device directly to your development machine using a USB cable. Don’t use any intermediate USB hubs.
  2. From Web App Tester, click Test to start up the app.
  3. On your development machine, enter chrome://inspect in the URL input line. The Chrome browser will display the host device and the running apps. Click inspect to open the developer tools window.

You can now use the features of Chrome DevTools to debug and test your web app.

Set Up the Debug Environment Using WiFi

To connect the Chrome DevTools and the web app for debugging using wireless:

  1. Connect your host device directly to your development machine using a USB cable.
  2. On your host device, tap and open the Web App Tester.
  3. On your computer, open a command prompt window or terminal shell and navigate to your Android SDK platform-tools directory.
  4. Run the following command:

    On Windows:

    adb tcpip 5555
    

    On OS X:

    ./adb tcpip 5555
    
  5. Disconnect your host device and your computer.
  6. Ensure that your development machine and device are connected to the same network.
  7. Connect to your device by running the following command, with the IP Address specified in Web App Tester here:

    On Windows:

    adb connect 192.168.1.133
    

    On Mac OS X:

    ./adb connect 192.168.1.133
    
  8. On your development machine, enter chrome://inspect in the URL input line. The Chrome browser will display the host device and the running apps. Click inspect to open the developer tools window.

The Chrome DevTools will then open a Chrome window in which you can view the code for your web app and debug it as it runs.

Set Up the Debug Environment on 1st Generation Kindle Fire

Chrome DevTools are not available on Android devices that are incompatible with Chromium, which includes 1st Generation Kindle Fire. For these devices the JavaScript console provides limited debugging capabilities over WiFi. It enables you to send JavaScript commands to the device. Before you can connect to the JavaScript Console, you must setup the Web App Tester. See [Amazon Web App Tester][fire-tv/tester] to learn more. To set up a debugging environment on devices those do not support Chrome DevTools:

  1. On your divide tap and open the Web App Tester app.
  2. Use the full screen handle at the bottom of the screen to open the Status Bar. This step is necessary only on Fire tablets.
  3. From the top of the screen, swipe down on the Status Bar to open the Quick Settings. You get a single notification to enable the JavaScript Console.
  4. Tap the notification to enable the JavaScript Console. A new notification appears with the URL to access the JavaScript console on your computer.
  5. On your computer, make sure you are connected to the same network as the device. Open the browser and enter the URL specified in the previous step.