README

web-page-monitor

Try it

Create a bookmarklet on your browser (and then try it where policies allows you to) using the following:

click here to show the ready to use bookmarklet (no options)

javascript:void(function(){(function()%20%7B'SecurityPolicyViolationEvent'%20in%20window%20%26%26%20window.addEventListener('securitypolicyviolation'%2Cfunction(e)%7Bswitch(e.type)%7Bcase%20'securitypolicyviolation'%3Aalert('Impossible%20to%20inject%20the%20monitor%20due%20to%20CSP%20(content%20security%20policy)')%3Bbreak%3B%7D%7D)%3Bvar%20url%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fweb-page-monitor%400.0.16%2Fdist%2Findex.js%22%2Cscript%3Ddocument.createElement('script')%3Bscript.onload%3Dfunction()%7Bvar%20already%3Ddocument.querySelectorAll('.monitor-panel%2C.monitor-panel-hidden').length%3Bif(!already)%7BWebPageMonitor.showNET().showFPS().showMEM(%7Bheight%3A30%7D).showTAGS(%7Bfrequency%3A10%7D).showEVENTS(%7Bfrequency%3A10%2Cexclude%3A%5B'onmousemove'%5D%7D).showVIEW().render(%7Bcollapsible%3Atrue%7D)%3B%7D%7D%3Bscript.setAttribute('src'%2Curl)%3Bdocument.getElementsByTagName('head').item(0).appendChild(script)%3B%7D)()%3B}())

which comes from the following:

(function() {
    'SecurityPolicyViolationEvent' in window
        &&
        window.addEventListener('securitypolicyviolation', function(e) {
            switch (e.type) {
                case 'securitypolicyviolation':
                    alert('Impossible to inject the monitor due to CSP (content security policy)');
                    break;
            }
        });

    var url = "https://cdn.jsdelivr.net/npm/web-page-monitor@0.0.16/dist/index.js",
        script = document.createElement('script');
    script.onload = function() {
        WebPageMonitor
            .showNET()
            .showFPS()
            .showMEM({
                height: 30,
            })
            .showTAGS({
                frequency: 10,
            })
            .showEVENTS({
                frequency: 10,
                exclude: [
                    'onmousemove',
                ]
            })
            .showVIEW()
            .render({
                collapsible: true
            });
    };
    script.setAttribute('src', url);
    document.getElementsByTagName('head').item(0).appendChild(script);
})();

Install it

yarn add web-page-monitor

Use it

import 'web-page-monitor'

WebPageMonitor
    .showFPS(/* options */)
    .showMEM(/* options */)
    .showTAGS(/* options */)
    .showEVENTS(/* options */)
    .showNET(/* options */)
    .showVIEW()
    .render({where: document.body /* default is body */, collapsible: true /* default false */});

if You want to render elsewhere just pass {where: YourTargetNode} when calling render.

Available panels

network monitor

NETWORK options (still NOT working as it should)

Shows the overall data network flow in MB. Options available:

{
    height: int // in px the height of the panel
}

memory monitor

FPS options

Shows the current rendering frames per seconds. Options available:

{
    height: int, // in px the height of the panel
    color: '#fede76' // the color fo the graph, default is `rgba(0,256,0, 0.5)`
}

memory monitor

MEMORY options

Shows the total and used instant memory in MB. Options available:

{
    height: int // in px the height of the panel
    color: '#fede76' // the color fo the graph, default is `rgba(0,256,0, 0.5)`
    frequency: 10 // the frequency of the update, default is 1
}

tags monitor

TAGS options

Shows how many nodes are in the page. Options available:

{
    height: int // in px the height of the panel
    color: '#fede76' // the color fo the graph, default is `rgba(0,256,0, 0.5)`
    frequency: 10 // the frequency of the update, default is 1
}

GitHub Logo

EVENTS options

Shows the instant number of occurring events whithin the period . Options available:

{
    height: int // in px the height of the panel
    color: '#fede76' // the color fo the graph, default is `rgba(0,256,0, 0.5)`
    frequency: 10 // the frequency of the update, default is 1,
    exclude: ['onmousemove'] // exclude one or more events, there are a lot
}

just to have an idea tehe following are those possible on webkit

onsearch, onappinstalled, onbeforeinstallprompt, onabort, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformdata, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting, onwebkitanimationend, onwebkitanimationiteration, onwebkitanimationstart, onwebkittransitionend, onwheel, onauxclick, ongotpointercapture, onlostpointercapture, onpointerdown, onpointermove, onpointerup, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, onselectstart, onselectionchange, onanimationend, onanimationiteration, onanimationstart, ontransitionrun, ontransitionstart, ontransitionend, ontransitioncancel, onafterprint, onbeforeprint, onbeforeunload, onhashchange, onlanguagechange, onmessage, onmessageerror, onoffline, ononline, onpagehide, onpageshow, onpopstate, onrejectionhandled, onstorage, onunhandledrejection, onunload, ondevicemotion, ondeviceorientation, ondeviceorientationabsolute, onpointerrawupdate

tags monitor

VIEW options

Shows viewport size, body size and scrolling values.

fedegheATgmailDOTcom