https://github.com/webreflection/basic-devtools

Exports `$`, `$$`, and `$x` utilities as described in Chrome Console Utilities API reference
https://github.com/webreflection/basic-devtools

Last synced: over 1 year ago
JSON representation

Exports `$`, `$$`, and `$x` utilities as described in Chrome Console Utilities API reference

• Host: GitHub
• URL: https://github.com/webreflection/basic-devtools
• Owner: WebReflection
• License: isc
• Created: 2022-10-04T13:37:50.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-26T10:17:24.000Z (over 3 years ago)
• Last Synced: 2025-03-27T14:11:09.574Z (over 1 year ago)
• Language: JavaScript
• Size: 81.1 KB
• Stars: 21
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# basic-devtools

[![Coverage Status](https://coveralls.io/repos/github/WebReflection/basic-devtools/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/basic-devtools?branch=main) [![build status](https://github.com/WebReflection/basic-devtools/actions/workflows/node.js.yml/badge.svg)](https://github.com/WebReflection/basic-devtools/actions)

**Social Media Photo by [Basic Moto France](https://unsplash.com/@basic_moto) on [Unsplash](https://unsplash.com/)**

Exports `$`, `$$`, and `$x` utilities as described in [Chrome Console Utilities API reference](https://developer.chrome.com/docs/devtools/console/utilities/), all in 242 bytes once "*minzipped*" or 206 bytes once "*minbrotlied*".

```js

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**](https://webreflection.github.io/basic-devtools/test/).

As example, let's consider this **Question**:

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

**Answer**

```js

// 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](https://devhints.io/xpath).