Skip to content

Commit 8b5c438

Browse files
committed
add Namespace Colors section to readme
1 parent 25eb545 commit 8b5c438

1 file changed

Lines changed: 25 additions & 11 deletions

File tree

README.md

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,31 @@ $env:DEBUG = "*,-not_this"
7777

7878
Then, run the program to be debugged as usual.
7979

80+
81+
## Namespace Colors
82+
83+
Every debug instance has a color generated for it based on its namespace name.
84+
This helps when visually parsing the debug output to identify which debug instance
85+
a debug line belongs to.
86+
87+
#### Node.js
88+
89+
In Node.js, colors are enabled when stderr is a TTY. You also _should_ install
90+
the [`supports-color`](https://npmjs.org/supports-color) module alongside debug,
91+
otherwise debug will only use a small handful of basic colors.
92+
93+
<img width="521" src="https://user-images.githubusercontent.com/71256/29092181-47f6a9e6-7c3a-11e7-9a14-1928d8a711cd.png">
94+
95+
#### Web Browser
96+
97+
Colors are also enabled on "Web Inspectors" that understand the `%c` formatting
98+
option. These are WebKit web inspectors, Firefox ([since version
99+
31](https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/))
100+
and the Firebug plugin for Firefox (any version).
101+
102+
<img width="524" src="https://user-images.githubusercontent.com/71256/29092033-b65f9f2e-7c39-11e7-8e32-f6f0d8e865c1.png">
103+
104+
80105
## Millisecond diff
81106

82107
When actively developing an application it can be useful to see when the time spent between one `debug()` call and the next. Suppose for example you invoke `debug()` before requesting a resource, and after as well, the "+NNNms" will show you how much time was spent between calls.
@@ -186,17 +211,6 @@ setInterval(function(){
186211
}, 1200);
187212
```
188213

189-
#### Web Inspector Colors
190-
191-
Colors are also enabled on "Web Inspectors" that understand the `%c` formatting
192-
option. These are WebKit web inspectors, Firefox ([since version
193-
31](https://hacks.mozilla.org/2014/05/editable-box-model-multiple-selection-sublime-text-keys-much-more-firefox-developer-tools-episode-31/))
194-
and the Firebug plugin for Firefox (any version).
195-
196-
Colored output looks like:
197-
198-
<img width="524" src="https://user-images.githubusercontent.com/71256/29092033-b65f9f2e-7c39-11e7-8e32-f6f0d8e865c1.png">
199-
200214

201215
## Output streams
202216

0 commit comments

Comments
 (0)