Revisiting Chrome’s Command Line API

As I was preparing for a 20 minute talk on Acceptance Testing with Headless Browsers for a Dev Day Conference, I realised that not enough developers are familiar with Chrome’s Command Line API.

DISCLAIMER: There is a lot more to Chrome’s Command Line API than what is discussed in this article. I am merely touching on some useful functions that have helped me, excluding some obvious favourites like (dir, table, copy etc).

What is Chrome’s Command Line API?

At it’s core, it’s just a collection of functions; functions for common tasks such as selecting DOM elements, triggering events, monitoring events, adding and removing elements in DOM etc. In a nutshell think Chrome with JQuery (and more) in your console.

How to use it?

Well, you’re probably already familiar with Chrome’s Console. Pretty simple. Open up a web page, right click on the page and click “inspect element” and there you go!

Query Selector Functions

These are easily my favourite and most used functions in my Chrome console.

$(selector)

An alias for document.querySelector(), this function returns a reference of the first element which matches the specified css selector.

$('a').href;

For some developers, something like this might strike a cord

$('[test-id="logo-img"]').src;

This is especially useful for debugging when you’re struggling to find the right element to trigger events on.

For example, as I wrote this article, I had Brent Faiyaz playing on YouTube. I wanted to pause the song but the geek in me didn’t want to use the normal convention (click pause or hit the spacebar) to do so. Nope, I used the $ query selector to find the element I needed then called the click event. See below.

Find Player Container

Invoke Click Handler to Pause

Not quite what I expected

You’ll notice calling the click function on the player isn’t stopping the player.

Now it’s working

The actual query could have just as easily been this

$('#movie_player').click();

I intentionally used the #player attribute to convey how we can often try trigger events on the wrong element and debugging in your console can be useful.

$$(selector)

An alias for document.querySelectorAll(selector); returns an array of references to elements matching the css selector.

$$('.button')

Finding all input types with the name attribute of “PropertyTypes”

Clicking every input with the name attribute of “PropertyTypes”

Misc Functions

inspect(object/function)

As the name suggests, running this function opens and selects a specified element in the elements panel.

inspect(document.body.firstChild);

This is particularly helpful when debugging elements that are not visible on a web page but still present in the DOM e.g. hidden input, elements with none as a display property value or zero opacity.

debug(function) + undebug(function)

The debug function allows you to step through a specified function with Chrome’s debugger while the undebug function stops/cancels any further debugging when the function is invoked next.

const sum = (a, b) => a + b;
debug(sum);
sum(5,8); // -> chrome debugger invoked
undebug(sum); // stops debugging sum

getEventListeners(object)

Returns an object of registered events on a given object.

getEventListeners(document);

Google Search Landing Page Event Listeners

Do not underestimate the value of this function. When combined with debug() it can be a powerful tool for debugging or reverse engineering web applications.

Debugging Google’s Click Event

When you’ve gotten the hang of things you’ll quickly pick up that you can combine a lot of functions to get what you want. In the GIF above I use 3 combinations to debug Google Search’s click event. Though, I did it all in one line, the following would also achieve the same thing.

const searchInput = $('[name="q"]'); // 1. Query Selector
const events = getEventListeners(searchInput); // 2. get events
const onClickEventListener = events.click[0].listener;
debug(onClickEventListener); // 3. start debugging onClick listener

monitorEvents(object, [events]) + unmonitorEvents(object, [])

When a specified event occurs on a given object, the event object is written to the console.

monitorEvents(window, ["resize", "scroll"])

In certain instances, this would be preferred over placing console.log in all your listeners in code. For example, I would use this to distinguish keyup and keydown events when dealing with input elements.

Monitoring Google’s Input Event

It’s just as easy to stop monitoring events by using unmonitorEvents function.

monitorEvents(window, ["resize", "scroll"]);
unmonitorEvents(window); // removes all events
unmonitorEvents(window, ["resize"]); //removes a specified event

Thank you for getting this far. I hope this article proves to be helpful when developing web applications.