To debug or troubleshoot your web integration, Streamroot has developed three tools, which are detailed blow:
- DNA graph,
- DNA graph bookmarklet,
- DNA stats in console logs bookmarklet.
1. DNA graph
Streamroot DNA 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 Streamroot DNA 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 Streamroot DNA 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. DNA graph bookmarklet
To use the Streamroot DNA 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. DNA 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()}();
