Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 24 Next »

With Pulsar running on Android and Windows, you can 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.

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!

Local Development Setup

Video - Windows Local Development

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).

    • NOTE: If you are building a React or Angular app to run within Pulsar, these frameworks already have an HTTP server component for your app during the development process, you just need to make sure the port is set to 3002 so that Pulsar can reach it. Again, make sure you can reach the http://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 will also need to ensure that the Pulsar app has loopback exemption:

    • 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

Pulsar Setup

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

  • From the Settings page, toggle the development server on

    • 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)

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

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, Pulsar will load the document/bundle that is synced from your org (the org version)

    • Next, Pulsar will load from your development server (http://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 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 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.

    • 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.

    • 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>, such as http://localhost:50080, and then click Connect to Device.

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

    • 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 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.

  • No labels