How it works?

With DOMScope you can debug and inspect a mobile web application, in any platform and any browser.

You must add two <script> tags to let DOMScope work for you:

  1. Inside <head>, before any <script> tag:

    <script src="https://domscope.com/inspector.js"></script>
  2. And before closing <body> (identifier can change):

    <script>
      Scope.register({
      identifier: 'sample-device',
      group: 'sample-device-group',
      clientKey: 'abcdef123456'
      });
      </script>

DOMScope can communicate with your web app in two ways: from the web app itself (to send information to the dashboard), and from the DOMScope dashboard (to send instructions to your mobile web app). In both ways, you must use the Scope object.

Scope has the following methods:

  • Scope.log
  • Scope.info
  • Scope.warn
  • Scope.error

Those methods send information, in the same way that window.console does.

For example, to send the current location, you must send the following instruction:

Scope.log(document.location.href);

Likewise, there are other methods that show visual information about any existing element in the current view of your web app:

  • Scope.boxModel(CSSselector): Get a visual box model from the element
  • Scope.getComputedStyle(CSSselector): Get a list of styles computed by the device's browser
  • Scope.getElementProperties(CSSselector): Get a list of element's properties
  • Scope.getElementStyles(CSSselector): Get a list of element's styles from document's stylesheets
  • Scope.getElementEvents(CSSselector): Get a list of events attached to the element
  • Scope.highlightElement(CSSselector): Highlight an element in the device's browser
  • Scope.getMediaQueries(CSSselector): Get a list of element's styles applied in media queries

Finally, there are two methods that give general information about your web app:

  • Scope.trackLocation(): Returns current URL
  • Scope.getCookies(): Returns cookies
  • Scope.getLocalStorage(): Returns data stored in Local Storage
  • Scope.getSessionStorage(): Returns data stored in Session Storage
  • Scope.getDOM(): Returns entire HTML document
  • Scope.getNavigator(): Returns window.navigator
  • Scope.getScripts(): Returns scripts running in the document
  • Scope.getStyleSheets(): Returns stylesheets applied to the document