madrobby / dom-monster Goto Github PK

Location: https://www.youtube.com/watch?v=0VIqi4RcJAg
User agent: Mozilla/5.0 (X11; CrOS x86_64 15183.69.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Error: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
at JR.webfontTips (https://mir.aculo.us/dom-monster/dommonster.js?19356:354:20)
at JR.performanceTips (https://mir.aculo.us/dom-monster/dommonster.js?19356:745:8)
at https://mir.aculo.us/dom-monster/dommonster.js?19356:777:48

It would be nice if the used Javascript frameworks wouldn't appear somewhere in the log, but in a more prominent spot (e.g. left column), maybe similar to the way the WTFramework bookmarklet presents this information.

Apparently DOM Monster is counting CSS conditional comments.

In my site the only comment is a hack for IE

And DOM Monster reports it as a regular comment.

Should DOM Monster ignore this kind of comment when counting?

If so, how?

Regards.

and don't confuse users. If head.js or another async loader is found, DOM Monster shouldn't say "For better perceived loading performance move script tags to end of document". Of course, most developers aren't so stupid, but, well, this tip is :)

Location: http://www.bbc.co.uk/news/uk-england-43881389
User agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Error: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
at Object.JR.webfontTips (http://mir.aculo.us/dom-monster/dommonster.js?17653:48:120)
at Object.JR.performanceTips (http://mir.aculo.us/dom-monster/dommonster.js?17653:125:193)
at http://mir.aculo.us/dom-monster/dommonster.js?17653:129:145

It would be awesome if we could move the DOM-Monster box on the window.

I wanted to have a look at something under it (regarding transparent items) and had to close then reopen it.

Location: https://shopkey.doyustudio.com/
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Error: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
at Object.JR.webfontTips (https://mir.aculo.us/dom-monster/dommonster.js?17936:354:20)
at Object.JR.performanceTips (https://mir.aculo.us/dom-monster/dommonster.js?17936:745:8)
at https://mir.aculo.us/dom-monster/dommonster.js?17936:777:48

Error [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "http://mir.aculo.us/dom-monster/dommonster.js?1294939288381 Line: 252"] while analyzing page.

Location: http://www.betsybermuda.com/
User agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-GB; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1
{anonymous}()@http://mir.aculo.us/dom-monster/dommonster.js?15006:11
{anonymous}()@http://mir.aculo.us/dom-monster/dommonster.js?15006:11
{anonymous}(13)@http://mir.aculo.us/dom-monster/dommonster.js?15006:11

I know that empty elements are used on purpose, being abused for background images or spacers. Would it be an idea to take this into consideration in the console log? As in, this element may be used as spacer/background element.
Also, it shows my polygon & canvas elements from which it isn't weird that they are empty.

Run Dom Monster on

http://toronto2015.org

And see that it outlines a bunch of elements in red, then the console reports all those elements as having inline styles, making finding the real inline styles hard to find.

Got this error at media.io.

Error [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "http://mir.aculo.us/dom-monster/dommonster.js?14991 Line: 252"] while analyzing page. Please let the DOM Monster know about this problem!

:-)

if (element.nodeType == 8) comments++;
if (element.nodeType == 3 && /^\s+$/.test(element.nodeValue)) {
// if(JR._firebug) console.warn('Whitespace-only text node', element);
whitespace++;
}
if (element.nodeType == 3) textnodes++;

Just started getting this error while analyzing groupon.com. Worked fine last time I tried it a few days ago. http://cl.ly/0D3I2T331b2V2i09020u

if (nodes[i].src && nodes[i].src !== '') {
if (nodes[i].src.indexOf('dommonster.js') === -1 && nodes[i].src.indexOf('google-analytics.com/ga.js') === -1 && nodes[i].src.indexOf('getclicky.com/in.php') === -1) {
if (nodes[i].parentNode === head) {
headcount = headcount + 1;
sources.push(nodes[i].src);
}
count = count + 1;
}
} else {
if (nodes[i].parentNode === head) {
headcount = headcount + 1;
}
count = count + 1;
}

I think since SVG is graphical markup language, I would hazard a guess that most of the time the elements are "empty." Working with large SVGs can make all those warnings a pain to wander through. But DOM-Monster is still great for pointing out duplicate IDs on SVGs, so it should ignore them completely.

To reproduce:

1. Click once on bookmarklet and remember the results.
2. Close overlay.
3. Click bookmarklet again and see that dom stats changed (e.g. +2 scrpt tags...)

I didnt look at the code but I imagine that it should be pretty easy to clean up some if not all changes that bookmarklet makes to dom.

Just added the bookmark for the first time and it's not working at all in Chrome build 14.0.835.186. Cleared my cache, removed bookmark, re-added bookmark and still no luck.

In console I get the following error.
Uncaught SyntaxError: Unexpected token %

Any ideas?

Hi,

just wanted to ask if it is possible to make it working on https:// sites.

Best regards and i Love it :)

When using in IE 8, this goes boom.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
Timestamp: Wed, 16 Mar 2011 16:51:58 UTC

Message: JScript object expected
Line: 11
Char: 827
Code: 0
URI: http://mir.aculo.us/dom-monster/dommonster.js?15049

Message: JScript object expected
Line: 11
Char: 827
Code: 0
URI: http://mir.aculo.us/dom-monster/dommonster.js?15049

I recently enabled an "extension" mode for the weinre debugger - http://pmuellr.github.com/weinre/ - and have built an extension which runs DOM Monster. What happens is that I run DOM Monster in one window (say on a mobile device) and then display the results in another window (weinre web app running on a desktop / laptop).

I did the minimal amount of work to do this split, and a couple other little things, in the project https://github.com/pmuellr/weinre-ext-dom-monster . The file dom-monster-agent.js is the hacked version of dommonster.js.

Clearly, something better should be done. :-) Technically, from the desktop I can ship a wad of JS code down the mobile device, and get the result back. The result can be an object, it's JSON-ified before sending, and then un-JSON-ified when it arrives at the desktop. I'm essentially wrapping a function around the existing dommonster.js, executing it, having it return the HTML it would otherwise write back into the page. I then get that HTML on the desktop, and insert it into the debugger's page.

The code for the plugin bits isn't out yet, so you can't run this extension yourself - right now - should be up next week.

You can see what it (will) look like here: http://www.flickr.com/photos/pmuellr/5692972464/ - I just love the adorable mini DOM Monster in the panel icon bar at the top!

Thanks for the work on DOM Monster, and for making it open source!

This doesn't mean anything at all to me, but it wanted me to report it:

Location: http://localhost/
User agent: Mozilla/5.0 (X11; Linux x86_64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2 Iceweasel/10.0.2
d()@http://mir.aculo.us/dom-monster/dommonster.js?15401:11
{anonymous}()@http://mir.aculo.us/dom-monster/dommonster.js?15401:11
{anonymous}()@http://mir.aculo.us/dom-monster/dommonster.js?15401:11
{anonymous}(0)@http://mir.aculo.us/dom-monster/dommonster.js?15401:11

just an FYI, DOM Monster is reporting that there is a newer jquery version than 1.7

When reporting elements with duplicate ids, putting the text of the id on the console would make it easier to find and fix.

Just used DOM Monster on my SVG project and I get alot off Empty nodes, but SVG is build with empty nodes so DOM Monster should ignore empty nodes inside ...

Location: https://www.collegeatlas.org/best-christian-colleges
User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Error: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
at Object.JR.webfontTips (https://mir.aculo.us/dom-monster/dommonster.js?17662:354:20)
at Object.JR.performanceTips (https://mir.aculo.us/dom-monster/dommonster.js?17662:745:8)
at https://mir.aculo.us/dom-monster/dommonster.js?17662:777:48

The rule:

Nesting depth is very high. Some of the nodes are nested more than 15 levels deep (these are marked with a dashed red border).

adds style="border: 1px dashed rgb(255, 0, 0);" to deep DOM nodes. These are then picked up by the rule:

Reduce the number of tags that use the style attribute, replacing it with external CSS definitions

Could either the order of the rules be changed, or could any rules that add a style change to adding class instead?

Browser: Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.9.2.13) Gecko/20101206 Ubuntu/10.10 (maverick) Firefox/3.6.13

If you run dom-monster again on the same page (not that you would intentionally, but sometimes can be by accident), it doesn't remove it's old nodes / elements, and reports on them as empty / duplicates - "jr_result"

Error [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "http://mir.aculo.us/dom-monster/dommonster.js?14987 Line: 252"] while analyzing page.

Analyzing - http://www.web.com
Browser - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 GTB7.1 ( .NET CLR 3.5.30729; .NET4.0E)

Let me know if you need more info.

FYI, I tried running the bookmarklet on the home feed of twitter.com and the last "info" item was this:

"Error TypeError: Cannot read property 'length' of null while analyzing page. Please let the DOM Monster know about this problem!"

Using Chome 8 on Windows:

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.224 Safari/534.10

Makes it easier to set targets and see improvements over time

Whilst checking the latest version (1.2.2) I encountered the above error applying it to a page that happened to be open, the mcurtis fork of DOMmonster.

(URI: http://github.com/mcurtis/dom-monster)

I am submitting this ticket as per the message shown next to the error.

For complete clarity I have added a screenshot here

I receive such message from DOM Monster 1.3.1:
You are using the Prototype JavaScript framework v1.7. There's a newer version available, which potentially includes performance updates.

Is this a bug or not?

Dom Monster stopped working in Google Chrome (8.0.552.237). When clicking on the bookmark or on the link at homepage I get the following error in javascript console:

Uncaught SyntaxError: Unexpected token (

at dommonster.js:1

Ps. It's still working both in IE and Firefox.

The console reported:

Nodes with duplicate ids found [
    <input type=​"text" name=​"departure" id=​"departure9223" value=​"22-01-2011" readonly>​
    , 
    <input type=​"text" name=​"arrival" id=​"arrival9223" value=​"21-01-2011" readonly>​
    , 
    <form id=​"frm-setdate9223" action=​"#prices" method=​"post" accept-charset=​"utf-8" enctype=​"multipart/​form-data" class=​"set-dates clear no-set-dates">​…​</form>​
    , 
    <input type=​"text" name=​"departure" id=​"departure5850" value=​"22-01-2011" readonly>​
    , 
    <input type=​"text" name=​"arrival" id=​"arrival5850" value=​"21-01-2011" readonly>​
    , 
    <form id=​"frm-setdate5850" action=​"#prices" method=​"post" accept-charset=​"utf-8" enctype=​"multipart/​form-data" class=​"set-dates clear no-set-dates">​…​</form>​
    , 
    <input type=​"text" name=​"departure" id=​"departure5849" value=​"22-01-2011" readonly>​
    , 
    <input type=​"text" name=​"arrival" id=​"arrival5849" value=​"21-01-2011" readonly>​
    , 
    <form id=​"frm-setdate5849" action=​"#prices" method=​"post" accept-charset=​"utf-8" enctype=​"multipart/​form-data" class=​"set-dates clear no-set-dates">​…​</form>​
]

But there are no elements with double id's

Controle check code:
var elemens = document.getElementsByTagName('*'), i = elemens.length, cache = {}; while(i--){ cache[ elemens[i].id ] = cache[ elemens[i].id ] ? cache[ elemens[i].id ] + 1 : 1 }; console.log( cache );

Result:

: 1986
[object HTMLInputElement]: 1
arrival: 1
arrival5838: 1
arrival5838_label: 1
arrival5842: 1
arrival5842_label: 1
arrival5843: 1
arrival5843_label: 1
arrival5844: 1
arrival5844_label: 1
arrival5845: 1
arrival5845_label: 1
arrival5846: 1
arrival5846_label: 1
arrival5847: 1
arrival5847_label: 1
arrival5848: 1
arrival5848_label: 1
arrival5849: 2
arrival5849_label: 1
arrival5850: 2
arrival5850_label: 1
arrival5851: 1
arrival5851_label: 1
arrival5852: 1
arrival5852_label: 1
arrival9001: 1
arrival9001_label: 1
arrival9042: 1
arrival9042_label: 1
arrival9218: 1
arrival9218_label: 1
arrival9223: 2
arrival9223_label: 1
arrival9429: 1
arrival9429_label: 1
arrival9430: 1
arrival9430_label: 1
arrival9551: 1
arrival9551_label: 1
arrival11974: 1
arrival11974_label: 1
arrival11975: 1
arrival11975_label: 1
arrival12343874: 1
arrival12343874_label: 1
arrival_label: 1
arrivalhotel_details: 1
arrivalhotel_details_label: 1
arrivalhotel_pictures: 1
arrivalhotel_pictures_label: 1
arrivalhotel_reviews: 1
arrivalhotel_reviews_label: 1
autosuggest: 1
autosuggest_id: 1
autosuggest_link: 1
complete: 1
cto_se_7711816_ac: 1
date_tooltip: 1
departure: 1
departure5838: 1
departure5838_label: 1
departure5842: 1
departure5842_label: 1
departure5843: 1
departure5843_label: 1
departure5844: 1
departure5844_label: 1
departure5845: 1
departure5845_label: 1
departure5846: 1
departure5846_label: 1
departure5847: 1
departure5847_label: 1
departure5848: 1
departure5848_label: 1
departure5849: 2
departure5849_label: 1
departure5850: 2
departure5850_label: 1
departure5851: 1
departure5851_label: 1
departure5852: 1
departure5852_label: 1
departure9001: 1
departure9001_label: 1
departure9042: 1
departure9042_label: 1
departure9218: 1
departure9218_label: 1
departure9223: 2
departure9223_label: 1
departure9429: 1
departure9429_label: 1
departure9430: 1
departure9430_label: 1
departure9551: 1
departure9551_label: 1
departure11974: 1
departure11974_label: 1
departure11975: 1
departure11975_label: 1
departure12343874: 1
departure12343874_label: 1
departure_label: 1
departurehotel_details: 1
departurehotel_details_label: 1
departurehotel_pictures: 1
departurehotel_pictures_label: 1
departurehotel_reviews: 1
departurehotel_reviews_label: 1
description: 1
details: 1
email: 1
facilities: 1
fd-but-arrival: 1
fd-but-arrival5838: 1
fd-but-arrival5842: 1
fd-but-arrival5843: 1
fd-but-arrival5844: 1
fd-but-arrival5845: 1
fd-but-arrival5846: 1
fd-but-arrival5847: 1
fd-but-arrival5848: 1
fd-but-arrival5849: 1
fd-but-arrival5850: 1
fd-but-arrival5851: 1
fd-but-arrival5852: 1
fd-but-arrival9001: 1
fd-but-arrival9042: 1
fd-but-arrival9218: 1
fd-but-arrival9223: 1
fd-but-arrival9429: 1
fd-but-arrival9430: 1
fd-but-arrival9551: 1
fd-but-arrival11974: 1
fd-but-arrival11975: 1
fd-but-arrival12343874: 1
fd-but-arrivalhotel_details: 1
fd-but-arrivalhotel_pictures: 1
fd-but-arrivalhotel_reviews: 1
fd-but-departure: 1
fd-but-departure5838: 1
fd-but-departure5842: 1
fd-but-departure5843: 1
fd-but-departure5844: 1
fd-but-departure5845: 1
fd-but-departure5846: 1
fd-but-departure5847: 1
fd-but-departure5848: 1
fd-but-departure5849: 1
fd-but-departure5850: 1
fd-but-departure5851: 1
fd-but-departure5852: 1
fd-but-departure9001: 1
fd-but-departure9042: 1
fd-but-departure9218: 1
fd-but-departure9223: 1
fd-but-departure9429: 1
fd-but-departure9430: 1
fd-but-departure9551: 1
fd-but-departure11974: 1
fd-but-departure11975: 1
fd-but-departure12343874: 1
fd-but-departurehotel_details: 1
fd-but-departurehotel_pictures: 1
fd-but-departurehotel_reviews: 1
footer: 1
frm-newsletter: 1
frm-setdate5838: 1
frm-setdate5842: 1
frm-setdate5843: 1
frm-setdate5844: 1
frm-setdate5845: 1
frm-setdate5846: 1
frm-setdate5847: 1
frm-setdate5848: 1
frm-setdate5849: 2
frm-setdate5850: 2
frm-setdate5851: 1
frm-setdate5852: 1
frm-setdate9001: 1
frm-setdate9042: 1
frm-setdate9218: 1
frm-setdate9223: 2
frm-setdate9429: 1
frm-setdate9430: 1
frm-setdate9551: 1
frm-setdate11974: 1
frm-setdate11975: 1
frm-setdate12343874: 1
frm-setdatehotel_details: 1
frm-setdatehotel_pictures: 1
frm-setdatehotel_reviews: 1
header: 1
hotel: 1
jr_results: 1
jr_results_prognosis: 1
jr_results_prognosis_container: 1
jr_results_tips: 1
jr_results_warnings: 1
jr_results_warnings_container: 1
jr_stats: 1
lang: 1
loadtime: 1
logo-footer: 1
lowestprice: 1
map: 1
misspell: 1
misspelled: 1
no-depart: 1
parsetime: 1
persons: 1
pictures: 1
review46860 hreview: 1
review49946 hreview: 1
review61995 hreview: 1
review75083 hreview: 1
review102641 hreview: 1
review118086 hreview: 1
review129399 hreview: 1
review179281 hreview: 1
review188614 hreview: 1
review194973 hreview: 1
review200150 hreview: 1
review248667 hreview: 1
review256748 hreview: 1
room_dates: 1
rooms: 1
search: 1
show: 1
social_share: 1
statements: 1
suggestions: 1
tooltip: 1
type: 1

Hey, i found out that the DOM-Size Calculation is triggering too late.

When i trigger
document.body.innerHTML.length/1024*100/100 on my Page the result is 100K

now i am using the DOM-Monster and the DOM-Size is growing (for the Javascript and Calculating and of course for the inline styles which mark the red and blue boxes in the page) like hell + 180% (now i have 280K on my page).

So trigger the Calculation before modifying the DOM.

DOM Monster currently reports when it finds duplicate element IDs, however, it would also be useful to report duplicate names used within the same form.

DOM Monster is suggesting to remove empty <td></td> nodes (tables sometimes can have empty cells). How is this possible?

Hi Thomas,

unfortunately I missed your Dom Monster! presentation yesterday at the jsvienna meeting. So I'm sending my feedback via github: DomMonster is a really neat idea! Do you plan to extend it with a plugin interface? If e.g. jQuery is detected on the page, dom monster could lazy-load a jquery specific introspection plugin.

This module could analyze jQuery.cache and state the number of jQuery event handlers assigned or the total amount of bytes stored in jquery.data. It could warn the user if too many direct event handlers were assigned and e.g. recommend the use of jQuery.delegate.

Or it could detect the most popular jQuery plugins and check if the most recent version was used.