# console-next

> This allows you to do some weird and useless in the browser's devtools

Latest version **0.1.10** (published 2023-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install console-next
pnpm add console-next
yarn add console-next
bun add console-next
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2023-04-03 |
| First published | 2022-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Pom Joy |
| Maintainers | flippedround |
| Keywords | console, log, devtools, debug, npm |

## Links

- npm: https://www.npmjs.com/package/console-next
- Repository: https://github.com/FliPPeDround/console-next
- Homepage: https://github.com/FliPPeDround/console-next#readme
- Issues: https://github.com/FliPPeDround/console-next/issues
- npm.io page: https://npm.io/package/console-next

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 0.1.10 (latest) — 2023-04-03
- 0.1.9 — 2022-09-17
- 0.1.7 — 2022-05-21
- 0.1.6 — 2022-05-21
- 0.1.5 — 2022-02-19
- 0.1.3 — 2022-01-12
- 0.1.2 — 2022-01-11
- 0.1.1 — 2022-01-11
- 0.1.0 — 2022-01-08

## README

<h1 align=center>console-next</h1>


This allows you to do some weird and useless in the browser's devtools.

# Installation
#### Simply load it from a CDN:
```html5
<script src="https://unpkg.com/console-next"></script>
```

#### use npm:
```
npm i console-next
```

# Usage

```javascript
import 'console-next'
```

### console.npm

This methods help to you install npm packages in the devtools
```javascript
console.npm('module_name',{
  type?: 'module'
})
```


#### Import specific version:
```javascript
console.npm('loadsh@0.0.4')
```
#### use URL:
```javascript
console.npm('https://unpkg.com/loadsh@0.0.4/lodash.js')
```
#### 🌰 example：
```javascript
(async function () {
  await console.npm("loadsh")
  console.log(_.random(5)) //2
})()
```
### console.color()

It can help you print out color information in the devtools

```typescript
console.color([
  {
    color?: string,
    content?: any,
    backgroundColor?: string
  }
])
```

#### 🌰 example：
```javascript
console.color([
  {
    color: 'red',
    content: 'red',
    backgrounColor: 'rgb(0, 255, 0)'
  },
  {
    color: 'rgb(0, 255, 0)',
    content: 'green'
  },
  {
    color: '#000FFF',
    content: 'blue'
  }
])
```
### console.img
if you want to print images in the devtools, let's use it
```javascript
console.img(url, {
  width?: number,
  height?: number
})
```

Example:
```js
console.img('https://static.npmjs.com/58a19602036db1daee0d7863c94673a4.png', { width: 40, height: 40 })
```

### console.video
If you still want to watch video in devtools, you must try it

```javascript
console.video(url, {
  width?: number,
  height?: number,
  loop?: boolean
})
```

Example: Play "Big Buck Bunny" in console!

```js
console.video(
  // from https://en.wikipedia.org/wiki/Big_Buck_Bunny
  'https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.480p.vp9.webm',
  { width: 400, height: 200 }
)
```


### console.edit

This methods allows you webpage as editor

If no arguments are passed, all webpage will as editor
```javascript
console.edit()
```

Of course, you can also pass parameters and select a DOM as the editor
```javascript
console.edit('#app')
```

### console.dom

This methods will print dom elements in devtools

If no arguments are passed, will print 'document.body'
```javascript
console.dom()
```

Of course, you can also pass parameters and select a DOM to print
```javascript
console.dom('#app')
```

### console.loading

a loading gif
```javascript
console.loading('loading...')
```

### console.progress

just a progressbar in devtools

```javascript
console.progress(percentage: number, callback: () => percentage, ms: number)
```

Example: The progress bar increases by 5 every 200 milliseconds

```javascript
{
  let i = 5
  console.progress(i, () => i += 5, 200)
}
```

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