To debug or troubleshoot your web integration, Streamroot has developed three tools, which are detailed below:
- DNA graph,
- DNA graph bookmarklet,
- DNA stats in console logs bookmarklet.
1. DNA graph
A CDN Mesh Delivery graph can be added to and shown on any page that is running our technology. The graph provides you with information about how much of the stream is being provided via the CDN versus via DNA 
. The CDN Mesh Delivery graph also allows you to see the number of users you are connected to 
and how many megabytes were uploaded from your device to other users 
. On the right-hand side, you can see an offload percentage, which corresponds to the percentage of data that has been sourced from the DNA network 
. You can simulate new users locally for testing purposes by clicking on the simulate a user button 
.
Integrate the graph within your test page
To include the CDN Mesh Delivery graph in your test page, add the following HTML code.
In the <head> tag
<Head>
<script src="//tools.streamroot.io/usage-graphs/stable/graphs.js"></script>
</Head>
In the <body> tag
<body>
<div id="streamroot-graphs"></div>
</body>
If you see an error message, please visit this FAQ article.
2. Mesh Delivery graph bookmarklet
To use the CDN Mesh Delivery graph on any page, add a bookmarklet in your browser.
Bookmarklet Code
javascript:!function(){var t=document.getElementById("streamroot-graphs");if(t)t.remove(),document.getElementById("streamroot-graphs-script").remove();else{var e=document.createElement("script");t=document.createElement("div"),e.src="https://tools.streamroot.io/usage-graphs/latest/graphs.js",e.setAttribute("id","streamroot-graphs-script"),t.setAttribute("id","streamroot-graphs"),t.style.padding="10px",t.style.position="fixed",t.style.bottom="0%",t.style.width="100%",t.style.zIndex="2147483647",document.body.appendChild(e),document.body.appendChild(t)}}();To add the bookmarklet in Chrome:
- Go to you bookmark manager: chrome://bookmarks/
- Right click on the list and select
Add Page - Then enter a name for you bookmarklet in the first input, copy paste the bookmarklet code in the second one
- Save it, you're set!
If you see an error message, please visit this FAQ article.
3. Mesh Delivery stats in console logs bookmarklet
To display basic DNA stats in your browser, you can copy paste the following snippet:
!function(){function n(){if(Streamroot.instances.length){var n=Streamroot.instances[0].stats,t=n.allContents.dnaDownload?n.allContents.dnaDownload/(n.allContents.dnaDownload+n.allContents.cdnDownload)*100:0,a={upload:o(n.allContents.dnaUpload),dna:o(n.allContents.dnaDownload),cdn:o(n.allContents.cdnDownload),efficiency:`${t}%`,peers:n.realtime.dnaSources};console.table(a)}else console.warn("Streamrooot not initialized")}function o(n,o=10){if(0===n)return"0B";var t=o+1||1,a=Math.floor(Math.log(n)/Math.log(1e3));return parseFloat((n/1e3**a).toFixed(t))+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][a]}setInterval(()=>{n()},1e4),n()}();
