@solid-devtools/logger

@solid-devtools/logger

For debugging only the pinpoint places parts of the Solid's reactivity graph you are concerned with, right in the console you use all the time.

Provides a variaty of debugging utilities for logging the state and lifecycle of the nodes of reactivity graph to the browser console.

API:

• debugComputation
• debugOwnerComputations
• debugSignal
• debugSignals
• debugOwnerSignals
• debugProps

Installation

The Logger package is currently not a part of the main solid-devtools library — it has to be installed on it's own.

npm i @solid-devtools/logger
# or
yarn add @solid-devtools/logger
# or
pnpm add @solid-devtools/logger

Usage guide

This package provides multiple different hooks to be used depending on the situation, and the information that you currently need.

Warning The hooks aren't being designed to be placed and forgotten about. They will actively spam your console. But I guess I cannot stop you.

Most of the hooks don't require any arguments to work and are very easy to use.

debugComputation

Debug the current computation owner by logging it's lifecycle state to the browser console.

Accepts following arguments:

• owner - The owner to debug. If not provided, the current owner will be used.
• options - Options for the debug. (optional)

Following information will be tracked and displayed in the console:

• The computation's initial state. (value, name, dependencies, execution time, etc.)
• The computation's state after each rerun. (value, previous value, dependencies, sources that have caused the rerun, execution time, etc.)
• The computation disposal.

import { debugComputation } from '@solid-devtools/logger'

createEffect(() => {
  debugComputation()
  // ...
})

debugOwnerComputations

Debug the computations owned by the provided owner by logging their lifecycle state to the browser console.

Accepts following arguments:

• owner - The owner to debug. If not provided, the current owner will be used.
• options - Options for the debug. (optional)

Following information will be tracked and displayed in the console:

• The computations initial state. (value, name, dependencies, execution time, etc.)
• The computations state after each rerun. (value, previous value, dependencies, sources that have caused the rerun, execution time, etc.)
• The computations disposal.

import { debugOwnerComputations } from "@solid-devtools/logger"

const Button = props => {
	debugOwnerComputations()
	createEffect(() => {...})
	return <button {...props} />
}

debugSignal

Debug the provided source by logging its lifecycle state to the browser console.

Accepts following arguments:

• source - The signal to debug. (a function that will be executed to get the signal node)
• options - Options for the debug. (optional)

Following information will be tracked and displayed in the console:

• The signal's initial state. (value, name, observers, etc.)
• The signal's state after each value update. (value, previous value, observers, caused reruns, etc.)

import { debugSignal } from '@solid-devtools/logger'

const [count, setCount] = createSignal(0)

debugSignal(count)

debugSignals

Same as debugSignal but for multiple signals.

The source argument can be an array of signals or a function that calls multiple signals. (Similar to Solid's on helper)

import { debugSignals } from '@solid-devtools/logger'

const [count, setCount] = createSignal(0)
const double = createMemo(() => count() * 2)

debugSignals([count, double])
// or
debugSignals(() => {
  count()
  double()
})

debugOwnerSignals

Debug the signals created under given reactive owner by logging their lifecycle state to the browser console.

Accepts following arguments:

• owner - owner to get the signals from.
• options - Options for the debug. (optional)

Following information will be tracked and displayed in the console:

• The signals initial state. (value, name, observers, etc.)
• The signals state after each value update. (value, previous value, observers, caused reruns, etc.)

import { debugOwnerSignals } from '@solid-devtools/logger'

const Button = props => {
  const [count, setCount] = createSignal(0)
  const double = createMemo(() => count() * 2)
  debugOwnerSignals()
  return <button onClick={() => setCount(p => ++p)}>{count}</button>
}

debugProps

Debug the provided props object by logging their state to the console.

Accepts following arguments:

• props - The component's props object to debug. (optional)

import { debugProps } from '@solid-devtools/logger'

const Button = props => {
  debugProps(props)
  const [count, setCount] = createSignal(0)
  return <button onClick={() => setCount(p => ++p)}>{count()}</button>
}

Demo video

https://user-images.githubusercontent.com/24491503/176549151-c06a1d14-2d99-4211-9f9e-74392be8890a.mp4

More hook ideas

There is still a lot of places this package could be extended or improved.

If you have any ideas or needs for features that might be helpful, let me know! :)

Changelog

See CHANGELOG.md.