- How many scripts does this page have?
- How many are external? What are they?
- How many are inline? Show me the source.
CSS Selectors - W3
"Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code."
Firefox and Chrome support CSS and XPath commands in the console via the Firebug Command Line API.
Syntax
$$(selector) Returns an array of elements that match the given CSS selector. $x(xpath) Returns an array of elements that match the given XPath expression. $(id) Returns a single element with the given id.CSS Selector Examples
//scripts $$("script") //script tags $$("script").length //count $$("script[async]") //async scripts $$("script[src]") //external scripts with src $$("script:not([src])") //inline scripts with no src not $$("script:not([src])")[0].text //show inline script source code //list external scripts src url var x = $$("script[src]"); console.log("page: " + window.location.href + "\n" + x.length + " external scripts"); for(var i = 0;i < x.length; i++){console.log(x[i].src)} //list inline script source code var x = $$("script:not([src])"); console.log("page: " + window.location.href + "\n" + x.length + " internal scripts"); for(var i = 0;i < x.length; i++){console.log("script #" + (i + 1.0) + "\n" + x[i].text)} //************* //anchors $$("a") //anchor tags $$("a").length //count $$("a[class]") //anchors with class $$("a[href]") //anchors with hrefs $$("a:not([href])") //anchors with no hrefs not $$("a[href*=foo]") //anchors with href url containing "foo" $$("a[href*=\\?]") //anchors with href url containing querystring $$("a[onclick]") //anchors with onclick event $$("a[onclick^=foobar]") //anchors with onclick event name starts with foobar //list anchor link href urls var x = $$("a[href]"); console.log("page: " + window.location.href + "\n" + x.length + " anchor urls"); for(var i = 0;i < x.length; i++){console.log(x[i].href)} //************* //images //list image src urls var x = $$("img[src]"); console.log("page: " + window.location.href + "\n" + x.length + " image urls"); for(var i = 0;i < x.length; i++){console.log(x[i].src)} //************* //iframes //list iframe src urls var x = $$("iframe"); console.log("page: " + window.location.href + "\n" + x.length + " iframes"); for(var i = 0;i < x.length; i++){console.log("id: " + x[i].id +"\nsrc: "+ x[i].src)} //************* //meta tags $$("meta[name^=descr]")[0].content //description meta tag, meta tag with name starts with "descr" $$("meta[name$=words]")[0].content //keywords meta tag, meta tag with name ends with "words" //list meta tags var x = $$("meta"); console.log("page: " + window.location.href + "\n" + x.length + " meta tags"); for(var i = 0;i < x.length; i++){console.log(x[i])} //************* //all elements $$("[class]") //elements with class $$("[class=foo]") //elements with class name equal "foo" match $$("[id]") //elements with id //list element ids var x = $$("[id]"); console.log("page: " + window.location.href + "\n" + x.length + " ids"); for(var i = 0;i < x.length; i++){console.log(x[i].id)}
CSS Selector Syntax: www.w3.org/TR/css3-selectors/#selectors
Chrome Dev Tools Resources UI can be used to access image and external script info.
Don't even ask about ie just view source.