How it works?
With DOMScope you can debug and inspect a web application or web site in any platform and any browser.
DOMScope allows bidirectional communication (from your web to the dashboard and vice versa) using Faye. In both ways, you must use the
Scope global object.
DOMScope also inserts
data-loggid attributes on each DOM element of your web to enable DOM inspection. This way, DOMScope can identify each DOM element and differentiate from another element.
To register a new device, paste this snippet into the
<head> of your web.
And that’s it!
Scope.register will send a request to our server to register your device, add
data-loggid attributes and send your web’s current location into your device’s dashboard.
Remember: You need to put this code in every page you’ll navigate (except that ones called with AJAX).
Scope has the following methods:
Those methods send information, in the same way that
For example, to send the current location, you must send the following instruction:
Also, 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
Scope.takeScreenshot(CSSselector): Take a screenshot for the whole page, or a single element using a selector (thanks to html2canvas).
Finally, there are 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.getScripts(): Returns scripts running in the document.
Scope.getStyleSheets(): Returns stylesheets applied to the document.
Scope.getFeatures(): Returns a list with all features support for the browser (thanks to Modernizr).