Skip to content

Commit 50906a5

Browse files
nichothnichoth
committed
fix bugs
1 parent 864a0d4 commit 50906a5

File tree

2 files changed

+25
-121
lines changed

2 files changed

+25
-121
lines changed

‎README.md‎

Lines changed: 24 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ A tiny JavaScript debugging utility that works in Node.js and browsers. Use envi
1010

1111
This is based on [debug](https://github.com/debug-js/debug). It's been rewritten to use contemporary JS.
1212

13+
In the browser, this should work well with [vite](https://vite.dev/). As is
14+
convention, this will look for an env variable prefixed with `VITE_`. So pass
15+
env variables like `VITE_DEBUG="foo"`.
16+
1317
**Featuring:**
1418
* Use [exports](https://github.com/substrate-system/debug/blob/main/package.json#L31) field in `package.json` to choose node JS or browser version
1519
* ESM only
@@ -32,132 +36,47 @@ Plus, [see the docs](https://substrate-system.github.io/debug/) generated by typ
3236

3337
<!-- tocstop -->
3438

35-
## install
39+
## config
3640

37-
```sh
38-
npm i -D @substrate-system/debug
39-
```
40-
41-
Use this with [vite](https://vitejs.dev/) in the [browser](#browser), or
42-
in [node](#node-JS).
43-
44-
------------------------------------------------------------------
45-
46-
## TL;DR
47-
48-
There are two env variables to work with, `VITE_DEBUG` and `VITE_DEBUG_MODE` in the browser, and `DEBUG` and `NODE_ENV` in node.
49-
50-
To determine if we should log something, first we check `NODE_ENV` / `VITE_DEBUG_MODE`. By default, in the browser we check `import.meta.env.DEV`, and in node, `NODE_ENV` should be either `development` or `test`. But -- [you can configure this](#configure).
51-
52-
Next we check the namespace + the env variable `VITE_DEBUG` in the browser, and `DEBUG` in node.
53-
54-
If the `DEBUG`/`VITE_DEBUG` variable is not set and you are in dev mode, then we log. If the `DEBUG`/`VITE_DEBUG` variable is set, then we only log if it matches the namespace that was passed in to debug, i.e.
41+
### namespace
42+
If you pass in a variable of the form `VITE_DEBUG=example`, then this will log
43+
any instances created with the `example` namespace:
5544

5645
```js
5746
import Debug from '@substrate-system/debug'
58-
const debug = Debug('hello-123')
59-
60-
debug('hello world')
47+
const debug = Debug('example')
6148
```
6249

63-
The character `*` is a wildcard. In the preceding example, `'hello world` would be logged if we started vite with either `VITE_DEBUG=hello-*` or `VITE_DEBUG=hello-123`.
50+
If you create an instance without passing in a `namespace` string, then this
51+
will log iff the website is in `DEV` mode (if `import.meta.env.DEV` is true).
6452

53+
Use an env variable of `*` to log everything.
6554

66-
------------------------------------------------------------------
55+
Build the site with a `NODE_ENV` variable to set `import.meta.env.DEV`:
6756

68-
## configure
69-
70-
Set the property `shouldLog` on `Debug` to configure which modes we log in. In the browser, this function gets called with `import.meta.env.MODE`. In node, it is called with `process.env.NODE_ENV`.
71-
72-
```js
73-
import Debug from '@substrate-system/debug'
74-
Debug.shouldLog = (envString) => {
75-
return (envString === 'staging' || import.meta.env.DEV)
76-
}
77-
```
78-
79-
## example
80-
81-
### browser
82-
This is ergonomic with the [vite](https://vitejs.dev/) bundler. This module will look for an env variable prefixed with `VITE_`:
8357
```sh
84-
VITE_DEBUG=fooo
58+
NODE_ENV=development vite build
8559
```
8660

87-
Given then above env variable in vite, you would log like this:
88-
```js
89-
import Debug from '@substrate-system/debug'
90-
const debug = Debug('fooo')
91-
debug('hello fooo')
92-
```
93-
94-
#### *
95-
Use an environment variable of `*` to log everything.
61+
This will work too. Any value of `NODE_ENV`, except `production`, wil equate to
62+
`import.meta.env.DEV` being true.
9663

9764
```sh
98-
VITE_DEBUG="*"
65+
NODE_ENV=staging vite build
9966
```
10067

101-
#### DEV mode
102-
103-
If you initialize this without a namespace, then it checks `import.meta.env.DEV`:
104-
```js
105-
import Debug from '@substrate-system/debug'
106-
const debug = Debug()
107-
debug('debug works') // check if `import.meta.env.DEV`
108-
```
109-
110-
#### For example, in the staging environment:
111-
112-
```sh
113-
VITE_DEBUG_MODE=staging vite build --mode staging
114-
```
115-
116-
#### use multiple modes
117-
Can parse a comma separated list of modes.
118-
119-
A `.env` file like this:
120-
```sh
121-
VITE_DEBUG_MODE="test, staging"
122-
```
123-
124-
Will log in either "test" or "staging" modes, or if `import.meta.env.DEV` is true.
68+
## install
12569

12670
```sh
127-
vite --mode staging build
128-
```
129-
130-
**If you are in production** (`import.meta.env.PROD`) and there is no `VITE_DEBUG` env var, then this exports a noop, so debug will do nothing, and your bundle will be smaller.
131-
132-
#### Use a namespace
133-
In your JS code:
134-
```js
135-
import { createDebug } from '@substrate-system/debug'
136-
const debug = createDebug('fooo')
137-
debug('debug works')
138-
```
139-
140-
You would start that script with a `VITE_DEBUG=fooo` env var to see the log statements.
141-
142-
#### Don't use a namespace
143-
If you call this without a `namespace` argument, it will look at the value of `import.meta.env.DEV`. If you are in DEV mode, then it will log things in a random color:
144-
145-
```js
146-
import { createDebug } from '@substrate-system/debug'
147-
const debug = createDebug('fooo')
148-
const debug2 = createDebug()
149-
150-
debug('debug works')
151-
debug2('testing debug 2')
152-
setTimeout(() => {
153-
debug2('log again')
154-
}, 1000)
71+
npm i -D @substrate-system/debug
15572
```
15673

157-
![Screenshot of `debug` in a browser](screenshot2.png)
74+
Use this with [vite](https://vitejs.dev/) in the [browser](#browser), or
75+
in [node](#node-JS).
15876

77+
------------------------------------------------------------------
15978

160-
### Node JS
79+
## Node JS
16180
Run your script with an env variable, `DEBUG`.
16281

16382
```js
@@ -172,7 +91,7 @@ Call this with an env var of `DEBUG=fooo`
17291
DEBUG=fooo node ./test/fixture/node.js
17392
```
17493

175-
#### NODE_ENV
94+
### NODE_ENV
17695
If you are in dev mode (`process.env.NODE_ENV === 'development'`), then this will log things in a random color if you don't initialize it with a namespace --
17796

17897
```js
@@ -186,21 +105,6 @@ Run the script like this:
186105
NODE_ENV=development node ./my-script.js
187106
```
188107

189-
##### Configure the environment value
190-
Configure what `NODE_ENV` value will trigger logging by overriding the `shouldLog` function:
191-
```js
192-
// in node only
193-
import Debug from '@substrate-system/debug'
194-
195-
Debug.shouldLog = function (NODE_ENV) {
196-
return NODE_ENV === 'example'
197-
}
198-
const debug = Debug()
199-
// this will log iff we start this like
200-
// NODE_ENV="example" node my-program.js
201-
debug('testing')
202-
```
203-
204108
-------------------------------------------------------------------
205109

206110
## develop

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"test-tape-run": "npm run build-browser-tests && cat test/index.html | tape-run --input=html --static=test | tap-spec",
2626
"build": "mkdir -p dist && rm -rf dist/* && tsc --project tsconfig.build.json",
2727
"build-example": "vite build",
28-
"build-example:dev": "VITE_DEBUG=\"*\" vite build --mode=\"development\"",
28+
"build-example:dev": "vite build --mode=\"development\"",
2929
"build-docs": "typedoc ./src/browser.ts ./src/node.ts",
3030
"toc": "markdown-toc --maxdepth 3 -i README.md",
3131
"start": "vite --mode=staging",

0 commit comments

Comments
 (0)