Page Comparison

With Pulsar running on Android and Windows, you can run/debug your HTML/Javascript code from a local server running on your own development machine. This productivity feature allows you to bypass the time-consuming process of uploading a new .pulsarapp bundle to Salesforce servers and resyncing the Pulsar app.

Anchor
OrgDevSetup OrgDevSetup

Salesforce Org Setup

• pulsar.developer.enableDevelopmentServer – Pulsar Setting must be set to TRUE

• pulsar.developer.users{.DocId} – List of developer usernames (e.g., you@yourorg), separated by comma, semicolon, or newlines for a specific document.  Note that {.DocId} can be empty, in which case this is an org-global list of developers (for all documents!)

• We recommend that you only have these setup for your testing orgs, and never for your production orgs!

...

Video - Android Local Development

First make sure your local development server (HTTP only) is running on port 3002 of your development machine. You may wish to use or extend the simple example server scripts that are published in https://github.com/luminixinc/PulsarForSalesforceJSExamples. Once the server is running, verify in your browser that you can reach the server at http://127.0.0.1:3002 – (NOTE of course, that Javascript calls into Pulsar will fail when your server is accessed from your browser).

...

Serving your code

You can serve your code to the Pulsar app via an HTTP server running on your development PC. One option is to use http-party/http-server to serve the contents of a directory, or if you are building a React or Angular app to run within Pulsar, these frameworks already have their own way to run an HTTP server

...

.

Android Local Development Setup

• Your local HTTP server must be running on localhost (127.0.0.1) port 3002 of your development machine.

• Your Android device must have Developer Options enabled and ADB debugging enabled. And of course you must be connected to your device over ADB either via Wifi or USB cable.

• Set up reverse port forwarding from your development machine: adb reverse tcp:3002 tcp:3002

• Note that the ADB client/server can sometimes gets disconnected (and the reverse rule purged).  You will need to recreate the rule after re/connection to the device. You can double-check that you have reverse port-forwarding of 3002 in place: adb reverse --list

Windows Local Development Setup

• You local HTTP server must be running on your development machine.

• New in Pulsar version 12, you can connect to a local development server running on your wifi – you aren’t restricted to just localhost (127.0.0.1

  :3002 location from your desktop browser first, to verify the server itself is working!

  For development with Pulsar on Windows, you must be running the Pulsar app on the same Windows machine as your local server. You ) port 3002 like for Android development. Just type the appropriate ipaddr:port configuration into the configuration block on the Settings page.

• NOTE that you can also still connect to a local development server running on localhost (127.0.0.1) port 3002. In this case you will also need to ensure that the Pulsar app has loopback exemption on your Windows machine:

  • Via a PowerShell or CMD shell prompt, run CheckNetIsolation.exe LoopbackExempt -a -n="E3D1A000.PulsarforSalesforce_ta6n8xy84gcpg" – You should only need to do this step once, per installation of Pulsar, per machine.

  • Now verify that Pulsar is showing in the exemption list: CheckNetIsolation.exe LoopbackExempt -s

• For development with Pulsar on an Android emulator or device, you must have that device connected to your development machine via Android Debug Bridge – ADB (either USB cable or via network) with reverse port forwarding set up.

  • Your Android device must have Developer Options and USB Debugging enabled

  • Your development machine (can be macOS, Linux, or Windows) should have Android Studio (or at least the CLI tools, in particular ADB) – https://developer.android.com/studio#downloads

  • Set up reverse port forwarding from your development machine: adb reverse tcp:3002 tcp:3002

  • Note that the ADB client/server can sometimes gets disconnected (and the reverse rule purged).  You will need to recreate the rule after re/connection to the device. You can double-check that you have reverse port-forwarding of 3002 in place: adb reverse --list

...

iOS Local Development Setup

• You local HTTP server must be running on your development machine.

• From the configuration block on the Settings Page, you canfigure configure an ipaddr:port from the configuration block on the Settings Page

Pulsar App Setup

• Login to Pulsar and make sure your organization is fully synced at least once, including your Content Library documents.

• From the Settings page, advanced section, toggle the development server on, and change the ipaddr:port as needed

  • If you do not see the toggle, then it is likely that your org is not configured correctly for development mode (for your specific username) – you might need to Refresh Settings if you just added your account to the developers list.

• Note that once the development server toggle is on, it is sticky per-session.  You will need to re-toggle it if your restart logout of the session and/or restart the Pulsar app.

Image Added	Image Added

HTML/CSS/JS Development Flow in Pulsar

• In the Pulsar app, Find the the specific HTML/.pulsarapp document (in your Content Library) you want to debug and download/open it

  • First, With development server OFF, of course Pulsar will load the document/bundle that is synced from your org (the org version)

  • NextWith development server ON, Pulsar will load from your development server (http://the ipaddr:port specified (on Android this is always 127.0.0.1:3002 ); on Android this is forwarded over ADB.NOTE that this means you can move backward and forward using the window history buttons to switch between the org and development versions (if desired)

• If you make a change to your HTML/JS code being served by your local development server, simply hit the page refresh button in Pulsar to reload

Debugging your Javascript running in Pulsar

Debugging on Android

On Android, by design, Google fully restricts access to embedded WebViews running in released apps. What this means is that you cannot attach a debugger to the Pulsar app to debug your Javascript.

Fortunately, you can turn on WebView Javascript console logging to the Android logcat to perform log (printf)-style debugging. On your Android emulator or device, (which you already should have in developer mode with USB debugging enabled), you need to launch the Android WebView DevTools and enable the webview-log-js-console-messages flag. Once enabled, all Javascript console logging will be sent to the Android logcat. Among other tools, you can use the ADB CLI to view the logcat.

...

Debugging on Windows

• If you prefer debugging with log statements, you have direct access to the Pulsar logs at the following location on disk: C:\Users\<YourUserName>\AppData\Local\Packages\E3D1A000.PulsarforSalesforce_ta6n8xy84gcpg\LocalState\Library\Application Support\log.txt

• On Windows Pulsar versions before 11.0.0.0 , you can fully debug your Javascript running in Pulsar by using the Edge Developer Tools. Video link: Video - Debugging on Windows

• New for Windows Pulsar versions 11.0.0.0+ - use Edge Browser Developer Tools: With Pulsar version 11 on Windows, you should debug your code using the built-in Edge browser developer tools, which will be available for any user/document combination authorized for local development server use (via pulsar.developer.users setting). The older Edge Developer Tools preview application will no longer work with Pulsar. To use the built-in Developer Tools with Pulsar, be sure to enable remote debugging (click to see Microsoft documentation). In summary :

  • Before you start:

    • Ensure your Salesforce user is added to the pulsar.developer.users Pulsar Setting in the org where you will be debugging.

    • Ensure that Pulsar has loaded the content you wish to debug.

  • Enable Developer Mode: Open Windows Settings, select Privacy & security > For developers, and then turn on the Developer Mode toggle.

  • In the same Settings page, turn on the Device Portal toggle (follow prompts to install developer packages if necessary).

  • After the installation is complete, note the Device Portal URL that will be used for the remote debugging connection. To find this URL, expand the Device Portal dropdown on the same Settings page, and a list or URLs will appear. Choose the local URL, for example, http://localhost:50080.

  • Install Remote Tools for Microsoft Edge from the Microsoft Store. Note that it is not necessary to open the application.

  • In the Edge browser, navigate to the following URL: edge://inspect.

  • In the Connect to a remote Windows device text box, enter http://<Device Portal URL> (the url from the step above), such as http://localhost:50080, and then click Connect to Device.

    • TIP: if nothing appears to happen, try opening another browser tab and navigating to http://localhost:50080 on that tab. Then come back to your edge://inspect tab and Connect to a remote Windows device again.

  • Verify that you can successfully connect, and a section named Edge is listed. Click inspect to load the DevTools window and debug your content:

...

Debugging on

...

iOS

On AndroidiOS, by design, Google Apple fully restricts access to embedded WebViews running in released apps. What this means is that you cannot attach a debugger to the Pulsar app to debug your Javascript.Fortunately, you can turn on WebView Javascript console logging to the Android logcat to perform log (printf)-style debugging. On your Android emulator or device, (which you already should have in developer mode with USB debugging enabled), you need to launch the Android WebView DevTools and enable the webview-log-js-console-messages flag. Once enabled, all Javascript console logging will be sent to the Android logcat. Among other tools, you can use the ADB CLI to view the logcat.

...