# web-debug-box

> A draggable float window for dev to debug (especially for mobile)

Latest version **1.0.2** (published 2020-04-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install web-debug-box
pnpm add web-debug-box
yarn add web-debug-box
bun add web-debug-box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-04-29 |
| First published | 2020-04-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 164.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Mark |
| Maintainers | evilrescuer |
| Keywords | dev, mobile, html, debug |

## Links

- npm: https://www.npmjs.com/package/web-debug-box
- Repository: https://github.com/evilrescuer/web-debug-box
- Homepage: https://github.com/evilrescuer/web-debug-box#readme
- Issues: https://github.com/evilrescuer/web-debug-box/issues
- npm.io page: https://npm.io/package/web-debug-box

## Dependencies (1)

- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-04-29
- 1.0.1 — 2020-04-29
- 1.0.0 — 2020-04-28
- 0.0.1 — 2020-04-28

## README

# web-debug-box
A draggable float window for dev to debug (especially for mobile)

Sometimes you need to show html on your mobile, and you want to see the runtime JavaScript variable.
This box will help you to show the data.

#### usage
* install
    * `yarn add web-debug-box --dev`
    * OR `npm install web-debug-box --save-dev`
* init
    ```
        import WebDebugBox from 'web-debug-box'
        // after the body loaded
        WebDebugBox.init()
    ```
* show data on the `box` to debug
    ```
        const data = {
            name: 'Mark',
            age: 20
        }
        WebDebugBox.showData(data)
    ```
DONE !
---
  
##### Set Style
you can also set style or set class for the `box`

    ```
        // set style
        WebDebugBox.setStyle({
          'width': '90vw',
          'height': '50vh',
          'left': '20px'
        })
        // set class
        WebDebugBox.setClass('class1 class2 ...')
    ```
  Note that this box has a `absolute` position to the `body` of html
  
#### Draggable
    You can drag the box to the suitable place during debugging

#### Example

![example](/example.png)

---
_Source: https://npm.io/package/web-debug-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._