Sample Google Chrome Console Code

January 31, 2017 by cryan.com

The neat thing about Google Chrome Console in the Developer Tools section, is that you can apply any JavaScript so that it would impact the page that your viewing.

For example, you could change the background color of the page to:

Google has a Command Line API which gives you some additional functions to help modify the page.

Useful Chrome Command Line Code2

Here's some useful commands to see the power of Google's Command Line:

List Cookies that the site is using

This generates a list of the Cookies that your browser is using for this site. You can use it to verify the currect active cookies.

function listCookies() {
    var theCookies = document.cookie.split(';');
    var aString = '';
    for (var i = 1 ; i <= theCookies.length; i++) {
        aString += i + ' ' + theCookies[i-1] + "n";
    }
    return aString;
}
listCookies();

List all Anchors on the Page

Listing all the Anchors on a page is a great way to verify that the anchor tags are displaying the correct values.

  var links = $$('a');
    for (each in links) {
        console.log(links[each].href);
    }

Change Certain Links to Red

If the page is using jQuery. You can use a simple command to change some links to 'red.' This is useful if you want to verify external/internal links.

$("a[href*='cryan.com']").css({'color':'red'});