Better debugging with Console Utilities API

Sarsa Murmu — Sat, 05 Sep 2020 14:52:07 +0000

There are some built-in console utilities to improve JavaScript debugging. These utilities make debugging faster. Let's learn about these utilities.

NOTE: All these utility things only work on dev tools console. They will not work in scripts.

The page used is https://example.com

`$_`

You can use $_ to get the last evaluated value.

`$0`, `$1`, `$2`, `$3` and `$4`

You can use these to reference recently accessed elements in the console. You can access elements using the "Elements" tab. $0 returns the most recently accessed element, $1 returns the second most recently accessed variable, the rest of these works in the same way.

Example

Accessing an element
Referencing the element in the console

`$()` and `$$()`

You can use these utility functions to find an element in the document. $() is basically an alias for document.querySelector(), and $$() is for document.querySelectorAll().

For both of these function, the first parameter is the selector you want to find, i.e. - $('.sel') basically means document.querySelector('.sel') and $$('.sels') means document.querySelectorAll('.sels').

There is also an optional second parameter, this should be a Node or Element in which the selector should be searched. Like before, $('.sel', element) basically means element.querySelector('.sel') and $$('.sels', element) means element.querySelectorAll('.sels').

Example

`$()`

`$$()`

`copy()`

You can use this utility function to copy the string representation of any object to the clipboard.

Example

`keys()` and `values()`

keys() is just an alias for the Object.keys method and values() is alias for the Object.values method.

Example

Bonus tricks

Saving a logged object in the console

Multiline text with `Shift` + `Enter` key combination

That's all for now. See you next time!

How to save data for a HTML element in JavaScript

Sarsa Murmu — Fri, 04 Sep 2020 07:02:06 +0000

If you've worked with vanilla DOM manipulation, you've probably found yourself in a situation when you have to save data associated with an element. Let's see how we can do this.

For the first time, you probably came up with the idea to save the data on the element object itself, like this

const setElementData = (el, data) => {
  el.$dataKey = data;
}

const getElementData = (el) => {
  return el.$dataKey;
}

// Usage
setElementData(document.querySelector('#some-el'), {
  prop1: 'val',
  prop2: someComplexValue
});

// Somewhere
const elData = getElementData(document.querySelector('#some-el'));

Even if this method works, it's not good. Adding custom props to an element object is not recommended and it can cause memory leaks if not done correctly.

So, what's the correct way to do it?

The correct way is to use a WeakMap to store data for an element. The code will look like this

const elementDataMap = new WeakMap();

const setElementData = (el, data) => {
  elementDataMap.set(el, data);
}

const getElementData = (el) => {
  return elementDataMap.get(el);
}

// Usage
setElementData(document.querySelector('#some-el'), {
  prop1: 'val',
  prop2: someComplexValue
});

// Somewhere
const elData = getElementData(document.querySelector('#some-el'));

This way we are able to save data for an element without causing memory leaks. If you don't know what WeakMap is, check out the MDN docs.

See ya!

DEV Community: Sarsa Murmu

Better debugging with Console Utilities API

$_

$0, $1, $2, $3 and $4

Example

$() and $$()

Example

$()

$$()

copy()

Example

keys() and values()

Example

Bonus tricks

Saving a logged object in the console

Multiline text with Shift + Enter key combination

How to save data for a HTML element in JavaScript

`$_`

`$0`, `$1`, `$2`, `$3` and `$4`

`$()` and `$$()`

`$()`

`$$()`

`copy()`

`keys()` and `values()`

Multiline text with `Shift` + `Enter` key combination