@alpine-collective/toolkit-dbg

1.0.2 • Public • Published

$dbg

GitHub tag (latest by date) npm bundle size

A magic helper to assist in debugging Alpine.js components.

Usage

The helper automatically unwraps the alpine properties and prints them to the browser console.

<div x-data="{ foo: 'bar', baz: { bob: 'qux' } }">
    <button @click="$dbg(foo, baz)">Debug</button>
</div>

Installation

This helper is part of alpine-collective/toolkit. If you have already installed the main library, you won't need to do anything else. If you desire to install the helper as a standalone packacage, follow the steps below.

CDN

Include the following <script> tag in the <head> of your document, before Alpine:

<script src="https://unpkg.com/@alpine-collective/toolkit-dbg@1.0.2/dist/cdn.min.js" defer></script>

or

<script src="https://cdn.jsdelivr.net/npm/@alpine-collective/toolkit-dbg@1.0.2/dist/cdn.min.js" defer></script>

NPM

If you would like to bundle the plugin yourself, install it via NPM:

npm install @alpine-collective/toolkit-dbg --save-dev

You can then register the plugin with Alpine:

import Alpine from 'alpinejs'
import Dbg from '@alpine-collective/toolkit-dbg'

Alpine.plugin(Dbg)

Alpine.start()

Readme

Keywords

none

Package Sidebar

Install

npm i @alpine-collective/toolkit-dbg

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

3.51 kB

Total Files

6

Last publish

Collaborators

  • simotod