87 views

Using AngularJS Batarang Chrome extension for data inspection on the Service Portal widget



Overview


AngularJS Batarang is an extension that you can add to your Chrome developer tools to help debug all the data building an angular component. This extension is very helpful when troubleshooting the Service Portal widget.

 

Installation


  1. Navigate to this URL: https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk.
  2. Click the ADD TO CHROME button to add this Chrome extension to your install.
    You will see the confirmation ADDED TO CHROME.

After the installation, a new tab called "$scope" is added to your Chome developer tools next to the Styles tab, as shown in the screenshot below. This will print all the scope of the component.

 

Service Portal Usage demonstration


  1. Select the DIV Element containing “widget=widget” parameter in your Chrome developer tools.
    This is the HTML component that loads the widget.
  2. Once you click on the “$scope” tab, you will see all the data building the widget.

For ubiquitous Service Portal widget objects:

  • data – Data used to represent the widget, this is usually populated by the server script fetching the data from the database
  • options – Configuration options specified in the Widget Instance record
  • page – Page on which the widget is contained
  • user – Currently logged in user information
  • Widget -  Raw data building the widget including HTML template, client script, etc.

 

Article Information

Last Updated:2018-02-01 23:49:18
Published:2018-02-02