devlog-ui 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -15
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -22,13 +22,13 @@ A feature-rich, browser-based dev logger with a beautiful debug UI. Zero depende
|
|
|
22
22
|
## Installation
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
npm install
|
|
25
|
+
npm install devlog-ui
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## Quick Start
|
|
29
29
|
|
|
30
30
|
```typescript
|
|
31
|
-
import { logger, DevLoggerUI } from "
|
|
31
|
+
import { logger, DevLoggerUI } from "devlog-ui";
|
|
32
32
|
|
|
33
33
|
// Initialize the UI (once, at app start)
|
|
34
34
|
DevLoggerUI.init();
|
|
@@ -240,7 +240,7 @@ import {
|
|
|
240
240
|
createDiffResult,
|
|
241
241
|
hasChanges,
|
|
242
242
|
formatValue,
|
|
243
|
-
} from "
|
|
243
|
+
} from "devlog-ui";
|
|
244
244
|
|
|
245
245
|
// Low-level diff computation
|
|
246
246
|
const changes = computeDiff(oldObj, newObj);
|
|
@@ -265,7 +265,7 @@ formatValue([1, 2, 3, 4, 5]); // "[5 items]"
|
|
|
265
265
|
Automatically track Fetch and XHR requests with spans:
|
|
266
266
|
|
|
267
267
|
```typescript
|
|
268
|
-
import { NetworkCapture } from "
|
|
268
|
+
import { NetworkCapture } from "devlog-ui";
|
|
269
269
|
|
|
270
270
|
// Install at app start
|
|
271
271
|
NetworkCapture.install();
|
|
@@ -316,7 +316,7 @@ Network requests create spans automatically:
|
|
|
316
316
|
Visualize logs and spans on a canvas-based timeline:
|
|
317
317
|
|
|
318
318
|
```typescript
|
|
319
|
-
import { createTimeline, Timeline } from "
|
|
319
|
+
import { createTimeline, Timeline } from "devlog-ui";
|
|
320
320
|
|
|
321
321
|
// Create timeline in a container
|
|
322
322
|
const timeline = createTimeline({
|
|
@@ -387,7 +387,7 @@ Press `Ctrl+Shift+L` to toggle the debug panel.
|
|
|
387
387
|
Automatically capture uncaught errors and unhandled promise rejections:
|
|
388
388
|
|
|
389
389
|
```typescript
|
|
390
|
-
import { ErrorCapture } from "
|
|
390
|
+
import { ErrorCapture } from "devlog-ui";
|
|
391
391
|
|
|
392
392
|
// Install at app start
|
|
393
393
|
ErrorCapture.install();
|
|
@@ -417,7 +417,7 @@ All captured errors are automatically logged as `error` level with full stack tr
|
|
|
417
417
|
Persist logs to survive page crashes and enable crash recovery:
|
|
418
418
|
|
|
419
419
|
```typescript
|
|
420
|
-
import { LogPersistence, logger } from "
|
|
420
|
+
import { LogPersistence, logger } from "devlog-ui";
|
|
421
421
|
|
|
422
422
|
// Enable persistence at app start
|
|
423
423
|
LogPersistence.enable();
|
|
@@ -452,7 +452,7 @@ Logs are persisted automatically after each new log (debounced). On page unload,
|
|
|
452
452
|
|
|
453
453
|
## Production Build
|
|
454
454
|
|
|
455
|
-
For production, import from `
|
|
455
|
+
For production, import from `devlog-ui/noop` to completely eliminate logging code via tree-shaking:
|
|
456
456
|
|
|
457
457
|
### Vite
|
|
458
458
|
|
|
@@ -461,8 +461,8 @@ For production, import from `devlogger/noop` to completely eliminate logging cod
|
|
|
461
461
|
export default defineConfig({
|
|
462
462
|
resolve: {
|
|
463
463
|
alias: {
|
|
464
|
-
|
|
465
|
-
process.env.NODE_ENV === "production" ? "
|
|
464
|
+
devlog-ui:
|
|
465
|
+
process.env.NODE_ENV === "production" ? "devlog-ui/noop" : "devlog-ui",
|
|
466
466
|
},
|
|
467
467
|
},
|
|
468
468
|
});
|
|
@@ -475,8 +475,8 @@ export default defineConfig({
|
|
|
475
475
|
module.exports = {
|
|
476
476
|
resolve: {
|
|
477
477
|
alias: {
|
|
478
|
-
|
|
479
|
-
process.env.NODE_ENV === "production" ? "
|
|
478
|
+
devlog-ui:
|
|
479
|
+
process.env.NODE_ENV === "production" ? "devlog-ui/noop" : "devlog-ui",
|
|
480
480
|
},
|
|
481
481
|
},
|
|
482
482
|
};
|
|
@@ -488,8 +488,8 @@ module.exports = {
|
|
|
488
488
|
// build.js
|
|
489
489
|
require("esbuild").build({
|
|
490
490
|
alias: {
|
|
491
|
-
|
|
492
|
-
process.env.NODE_ENV === "production" ? "
|
|
491
|
+
devlog-ui:
|
|
492
|
+
process.env.NODE_ENV === "production" ? "devlog-ui/noop" : "devlog-ui",
|
|
493
493
|
},
|
|
494
494
|
});
|
|
495
495
|
```
|
|
@@ -515,7 +515,7 @@ import type {
|
|
|
515
515
|
DiffChangeType,
|
|
516
516
|
NetworkCaptureConfig,
|
|
517
517
|
TimelineConfig,
|
|
518
|
-
} from "
|
|
518
|
+
} from "devlog-ui";
|
|
519
519
|
|
|
520
520
|
type LogLevel = "debug" | "info" | "warn" | "error";
|
|
521
521
|
type SpanStatus = "running" | "success" | "error";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "devlog-ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.5",
|
|
4
|
+
"description": "Feature-rich browser dev-logger with UI overlay and pop-out window. Zero overhead in production.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"module": "./dist/index.js",
|