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.
Usage
To register a new device, paste this snippet into the <head>
of your web.
<script type="text/javascript" src="https://domscope.com/1234567890-test-device/inspector.js"></script>
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).
API
Logging
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(location.href);
Visual inspection
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 elementScope.getComputedStyle(CSSselector)
: Get a list of styles computed by the device’s browserScope.getElementProperties(CSSselector)
: Get a list of element’s propertiesScope.getElementStyles(CSSselector)
: Get a list of element’s styles from document’s stylesheetsScope.getElementEvents(CSSselector)
: Get a list of events attached to the elementScope.highlightElement(CSSselector)
: Highlight an element in the device’s browserScope.getMediaQueries(CSSselector)
: Get a list of element’s styles applied in media queriesScope.takeScreenshot(CSSselector)
: Take a screenshot for the whole page, or a single element using a selector (thanks to html2canvas).
Getting information
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.getNavigator()
: Returnswindow.navigator
.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).