basic-devtools

basic-devtools

^{Social Media Photo by Basic Moto France on Unsplash}

Exports $, $$, and $x utilities as described in Chrome Console Utilities API reference, all in 242 bytes once "minzipped" or 206 bytes once "minbrotlied".

import {$, $$, $x} from 'basic-devtools';

// single node
$('nope') === null;                 // true
$('body') === document.body;        // true

// list of nodes
$$('body').length === 1;            // true
$$('body')[0] === document.body;    // true

// list of evaluated nodes
$x('//body').length === 1;          // true
$x('//body')[0] === document.body;  // true

What's the deal with XPath?

It's extremely powerful but also generally faster than a TreeWalker, as you can test live.

As example, let's consider this Question:

"How would I grab all data-* attributes and reach their element with a single-pass query?"

Answer

// grab all nodes with data-* attributes
const allDataAttributes = $x('//@*[starts-with(name(), "data-")]');

// loop all returned attributes and do something
for (const {name, value, ownerElement} of allDataAttributes) {
  // ownerElement is the element using data-* attribute
  // name is the data-* attribute name
  // value is its value
}

You can have a gist of various other features via this awesome Xpath cheatsheet.