Skip to content

fedeghe/web-page-monitor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.20%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,
            })
            .showLOAD({
                elements: [
                    'domInteractive',
                    'domContentLoadedEventStart',
                    'domComplete',
                ]
            })
            .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 */)
    .showLOAD(/* 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 the 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.

tags monitor

Load options
Shows browser metrics from `performance.timing`.

all the following are available

navigationStart, unloadEventStart, unloadEventEnd, redirectStart, 
redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, 
connectEnd, secureConnectionStart, requestStart, responseStart, 
responseEnd, domLoading, domInteractive, domContentLoadedEventStart, 
domContentLoadedEventEnd, domComplete, loadEventStart, loadEventEnd
        

fedegheATgmailDOTcom