9

The Motivation for this question is, that it took me about two hours to find out what I was doing wrong. How can I remotely debug my Dart-Webapp (may work for other kind of local websites as well) on my Android phone or emulator?

lucidbrot
  • 5,378
  • 3
  • 39
  • 68

1 Answers1

8

On the smartphone:

  1. Enable USB-Debugging on the phone. You can find it in the "Developer Settings" which are hidden on android 5.0. If you have android 5, go to the Device Information and tap the build number until something happens. If those instructions are too unclear, this link should help.

  2. Make sure your server is running :P

  3. Connect the phone per USB with your PC and wait until the drivers are installed - aka Windowsexplorer shows you a popup asking what to do with the phone. You can dismiss that.

  4. Open chrome on your Android phone

  5. Open chrome on your Computer and navigate to chrome://inspect

  6. There, you should see your phone listed. Now select the Button "port forwarding" and a popup will ... well ... pop up. There you enter in the left field named 'Port' some Port - 8080 works fine for me. This is a listening port that will be on the phone. That means after you set the port forwarding up, you can open the Url localhost://8080 on your phone (in chrome) to navigate to your website. Your website can you specify in the right field named 'ip and Port'. For the Chrome Extension "Chrome Dev Editor" I enter http://192.168.0.6:51792/which is the ip, port and path on my server. Chrome Dev Editor tells you what you can Enter there when you right-click your main.dart and select deploy to phone.

  7. select "Done" and navigate to the URI with your phone - that would be localhost:8080/MyNewDartTry/web/index.htmlif you followed my example. But I believe you could also enter in the port-forwarding popup the whole address and then only open localhost:8080 on your phone. The localhost:8080 is mapped to the link you entered.

  8. As soon as you close Chrome on either your Desktop or your phone, the port-forward will be stopped.

With the emulator

  1. Start your emulator

  2. find your server's port. e.g. 54321

  3. Open the browser in your emulator and enter 10.0.2.2:54321/MyNewDartTry/web/index.html(or whatever follows after your slashes, but make sure the IP is 10.0.2.2 - that refers to your computer on which the emulator runs

Hope this helps anybody

EDIT: If chrome does not find your device even though the phone has also opened chrome and you followed all the steps, consider Emmanuel Malacarne's answer.

C:\Users\YOUR_USERNAME\AppData\Local\Android\sdk\platform-tools && C: & adb.exe kill-server & adb.exe start-server" The directory depends on your installation of your ADT.

Community
  • 1
  • 1
lucidbrot
  • 5,378
  • 3
  • 39
  • 68
  • Any way to debug dart on android using webstorm? – Alon Amir Aug 06 '15 at 07:32
  • I don't know but have you tried doing exactly that but with your server? – lucidbrot Aug 06 '15 at 07:35
  • Have tried, the device connects to the web app, but a debugging session is not established because webstorm is debugging the desktop chrome as usual, with the jetbrains desktop chrome extension which has nothing to do with mobile. I can only debug through chrome's web inspector, not via webstorm (It was possible with dart editor AFAIK). Am I missing something? – Alon Amir Aug 06 '15 at 07:55
  • I am not at home so I can't try it out myself. Let's hope somebody else can answer your question soon... but depending on what reason you want to debug on your phone, you could maybe use a resized browser window instead of the phone until somebody has a solution. This should be good enough to check out the layout in a mobile-like screen. – lucidbrot Aug 06 '15 at 08:00
  • 1
    2 reasons: 1. Debugging a cordova contained app. 2. Even for running without cordova, on Android Chrome, there are inconsistencies, especially using different Android versions which ship with different browser versions, even if you use the "device mode" in desktop chrome which makes it feel like it's a mobile, it's still not always the same. – Alon Amir Aug 06 '15 at 08:03
  • Not familiar with cordova and I did not watch the mentioned video but [this Link](http://stackoverflow.com/questions/21332853/is-there-a-real-solution-to-debug-cordova-apps) might help you find a solution for your specific problem – lucidbrot Aug 06 '15 at 08:12