CSS Selector & XPath Expression Browser Commands

CSS selectors and XPath expressions can be used to answer queries such as
- 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.