Getting Started with Debugging OSX Node Apps on Mobile Devices

I recently ran into an issue where I could not replicate some rendering problems we had with our Careers page on iOS. I’d like to share a small collection of notes that I took about accessing my local machine’s instance of the app with some physical test devices. I will first go over how to enable your device to access the Node app via a proxy, and then I will include a set of links to get you started with remote debugging using the Chrome and Safari dev tools.

Setting up your proxy on Mac OSX

I’ll outline how to set up a proxy using SquidMan

  1. Ensure your mobile device is connected to the same network as your OSX device.

  2. In the SquidMan preferences, set the port to 8888 (or any unused port)

  1. Go to “Clients”, click “New” and enter your device’s IP address.
  • Check these guides for finding your phone’s IP address for Android and iOS
  1. Go to “Template”. Find the line “http_access deny to_localhost” and comment it out using “#”
  1. Save your preferences, and start the SquidMan proxy:

Configuring the proxy on your phone

Here are some references:

  • Android: http://www.phonearena.com/news/How-to-set-up-a-proxy-server-connection-in-Android_id70310
  • iOS: http://www.amsys.co.uk/2012/05/how-to-setup-proxy-servers-in-ios/
  1. In your phone’s wifi settings, select the network that your desktop is connected to, and set up a manual proxy.

  2. Use your Mac’s IP address as the host (Android) / server (iOS)
    • To find your Mac’s IP address go to the Apple Menu -> System Preferences -> Network
    • The IP address is listed under the “Status” in the network settings window.
  3. Use the SquidMan port number as your “Proxy Port”

Accessing the Node app on the phone

  1. Make sure your Node app is running on your desktop

  2. Access your app on your phone using lvh.me:{portNumber}. (For example, lvh.me:8080, if you are serving your app on port 8080)

Normally, you would probably access your app using localhost:{portNumber} but this won’t work properly, as your phone will try and access it’s own localhost. Instead, using lvh.me as a proxy will target the requesting machine’s localhost, in this case, your desktop where the proxy is running.

Porch's FAQ

Enable debugging on your devices:

Android:

http://www.greenbot.com/article/2457986/how-to-enable-developer-options-on-your-android-phone-or-tablet.html

  • Enable your developer tools. Go to settings -> about phone/device/tablet -> click on the “Build Number” 7 times. (no joke)
  • Then settings -> developer tools -> enable remote debugging

iOS:

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

  • Settings -> Safari -> advanced -> turn on web inspector Safari (desktop):

On Safari desktop, you need to enable the dev tools.

  • Preferences -> advanced -> show develop menu in menu bar

Congrats! You are now able to access, and debug your local web app on your phone!

Debugging:

For iOS/Safari, I’ve found this guide to be helpful: https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari–webdesign-8787

For Android/Chrome I’ve found this to be helpful: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

You can use the same Safari and Chrome debugging tools for the mobile browsers as you use for the desktop browsers.

Here is a little careers page debugging action:

Clean up

It is important to remove the proxy settings from your phone after you are done, otherwise you won’t be able to use your wifi connection normally

  • For Android, follow the guide outlined here until you get to the step where you select a proxy type, and select “none”
  • For iOS, follow the guide outline here, and also set your proxy type to “none”

Feel free to email me with any questions,

Chris Jimenez

chrisj@porch.com