November 26, 2014

Debugging S1 Lightning & Visualforce Apps via Chrome Remote Debugging (Part 1)

If you are a Mobile developer, you know that mobile and desktop browsers are not same for developers, all beauty and smoothness of desktop browsers go away on mobile, when you go beyond a "Hello World" mobile web app.

This blog post tries to help mobile developers using HTML5, Javascript to develop mobile web pages using Lightning, Visualforce for S1 or Salesforce Mobile SDK. This post is targeted towards Android based devices only, in next post we will cover iOS and Safari based remote debugging as well.



How to start ? 

1. Please go thru this official article from Google to understand remote debugging requirements, and how to enable it on your mobile device.

2. Once you have done that, please watch this video to see how Salesforce 1 or Hybrid apps can be debugged on Android via remote debugging.



Key steps

  1. Connect your Android device via USB Cable to your machine.
  2. Enabled USB Debugging (as explained in this guide).
  3. Goto this URL in Chrome : chrome://inspect/#devices.
  4. Open Salesforce 1 in chrome browser, not the Salesforce 1 app.
  5. If you are debugging Salesforce Mobile SDK hybrid app, add following line to MainActivity of your generated app, ad indicated below:
    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
                android.webkit.WebView.setWebContentsDebuggingEnabled(true);
            }
    

    Full Source
    public class CordovaApp extends CordovaActivity
    {
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            super.init();
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
                android.webkit.WebView.setWebContentsDebuggingEnabled(true);
            }
            
            // Set by <content src="index.html" /> in config.xml
            loadUrl(launchUrl);
        }
    }
    

  6. You will see your chrome browser app or hybrid app in this tab now : chrome://inspect/#devices
  7. Please follow steps in video to debug further.

Upvote this idea

This idea asks for a settings option in S1 app to enable this flag on Android devices, so that remote debugging of S1 web views could be done:
https://success.salesforce.com/ideaView?id=08730000000DgijAAC

Part 2

We will explore remote debugging via Safari for iOS.