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.

YUI Compressor for JavaScript and CSS

The YUI Compressor can be used to compress JavaScript and CSS files. It also offers a low-security JavaScript obfuscation option via local symbol renaming - it does not rename functions.

The tool requires the Java SDK 1.4 or later and can be run from the command line. The command line is useful because formatted, commented JavaScript can be used for development and compressed versions can be easily generated for test and prod.

To avoid compression build errors, verify your file text encoding. For Visual Studio UTF-8, make sure to select the "Unicode UTF-8 without signature" encoding from the File - Advanced Save Options menu. Then include the charset UTF-8 option in the command.

Example - run as one line

java -jar c:\lib\yui\yuicompressor-2.4.2.jar
c:\code\web\scripts\file.js
-o c:\code\web\scripts\file.min.js
--charset utf-8