prism-debugger 0.2.0
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/.env.example +9 -0
- package/README.md +128 -0
- package/bin/prism.js +72 -0
- package/package.json +35 -0
- package/public/app.js +1516 -0
- package/public/index.html +214 -0
- package/public/styles.css +1224 -0
- package/src/broker.js +425 -0
- package/src/config.js +55 -0
- package/src/index.js +100 -0
- package/src/logger.js +72 -0
- package/src/plugins/context-device-event-logger.plugin.js +152 -0
- package/src/plugins/index.js +21 -0
- package/src/plugins/plugin-manager.js +51 -0
- package/src/storage.js +102 -0
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Prism — JS/Native Debugger</title>
|
|
7
|
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='10,26 16,6 22,26' fill='%23222' stroke='%23888' stroke-width='1' stroke-linejoin='round'/%3E%3Cline x1='3' y1='16' x2='12' y2='16' stroke='%23ccc' stroke-width='1.5'/%3E%3Cline x1='20' y1='12' x2='29' y2='8' stroke='%23ef4444' stroke-width='1.2'/%3E%3Cline x1='20' y1='14.5' x2='29' y2='13' stroke='%23eab308' stroke-width='1.2'/%3E%3Cline x1='20' y1='17' x2='29' y2='17' stroke='%2322c55e' stroke-width='1.2'/%3E%3Cline x1='20' y1='19.5' x2='29' y2='21' stroke='%233b82f6' stroke-width='1.2'/%3E%3Cline x1='20' y1='22' x2='29' y2='26' stroke='%238b5cf6' stroke-width='1.2'/%3E%3C/svg%3E" />
|
|
8
|
+
<link rel="stylesheet" href="/styles.css" />
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<aside class="sidebar">
|
|
13
|
+
<div class="sidebar-brand">
|
|
14
|
+
<div class="nav-logo-mark">
|
|
15
|
+
<svg viewBox="0 0 32 32">
|
|
16
|
+
<line x1="2" y1="16" x2="12" y2="16" stroke="#fff" stroke-width="1.5" opacity="0.5"/>
|
|
17
|
+
<polygon points="10,26 16,6 22,26" fill="rgba(255,255,255,0.08)" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
|
|
18
|
+
<line x1="20" y1="13" x2="30" y2="9" stroke="#ef4444" stroke-width="1.3"/>
|
|
19
|
+
<line x1="20" y1="15.5" x2="30" y2="14" stroke="#eab308" stroke-width="1.3"/>
|
|
20
|
+
<line x1="20" y1="18" x2="30" y2="18" stroke="#22c55e" stroke-width="1.3"/>
|
|
21
|
+
<line x1="20" y1="20.5" x2="30" y2="22" stroke="#3b82f6" stroke-width="1.3"/>
|
|
22
|
+
<line x1="20" y1="23" x2="30" y2="27" stroke="#8b5cf6" stroke-width="1.3"/>
|
|
23
|
+
</svg>
|
|
24
|
+
</div>
|
|
25
|
+
<div>
|
|
26
|
+
<span class="nav-logo-text">Prism</span>
|
|
27
|
+
<span class="nav-logo-sub">JS · Native Debugger</span>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<button id="connect-btn" class="connect-btn">
|
|
32
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
33
|
+
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
|
|
34
|
+
</svg>
|
|
35
|
+
Connect
|
|
36
|
+
</button>
|
|
37
|
+
|
|
38
|
+
<div class="sidebar-divider"></div>
|
|
39
|
+
|
|
40
|
+
<nav class="sidebar-nav">
|
|
41
|
+
<button class="main-tab-btn active" data-view="console">
|
|
42
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
43
|
+
<rect x="3" y="4" width="18" height="16" rx="2"/>
|
|
44
|
+
<path d="M7 9l3 3-3 3"/>
|
|
45
|
+
<path d="M13 15h4"/>
|
|
46
|
+
</svg>
|
|
47
|
+
Console
|
|
48
|
+
</button>
|
|
49
|
+
<button class="main-tab-btn" data-view="timeline">
|
|
50
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
51
|
+
<path d="M3 3v18h18"/>
|
|
52
|
+
<path d="M7 16l4-8 4 4 4-8"/>
|
|
53
|
+
</svg>
|
|
54
|
+
Perf Points
|
|
55
|
+
</button>
|
|
56
|
+
</nav>
|
|
57
|
+
|
|
58
|
+
<div class="sidebar-divider"></div>
|
|
59
|
+
|
|
60
|
+
<div class="sidebar-debuggers">
|
|
61
|
+
<div class="sidebar-section-title-row">
|
|
62
|
+
<div class="sidebar-section-title">Debuggers</div>
|
|
63
|
+
<button id="clear-inactive-btn" class="clear-inactive-btn" title="Remove offline debuggers">Clear Inactive</button>
|
|
64
|
+
</div>
|
|
65
|
+
<input id="debuggerSearch" placeholder="Search debuggers…" />
|
|
66
|
+
<ul id="debuggerList"></ul>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div class="sidebar-footer">
|
|
70
|
+
<button id="theme-toggle" class="theme-toggle" title="Toggle theme">🌙</button>
|
|
71
|
+
</div>
|
|
72
|
+
</aside>
|
|
73
|
+
|
|
74
|
+
<div class="main-content">
|
|
75
|
+
<div id="view-console" class="main-view">
|
|
76
|
+
<div class="console-layout">
|
|
77
|
+
<section class="panel panel-console">
|
|
78
|
+
<header>
|
|
79
|
+
<h2 id="consoleTitle">Console</h2>
|
|
80
|
+
<div class="filters">
|
|
81
|
+
<select id="levelFilter">
|
|
82
|
+
<option value="all">All levels</option>
|
|
83
|
+
<option value="debug">debug</option>
|
|
84
|
+
<option value="info">info</option>
|
|
85
|
+
<option value="warn">warn</option>
|
|
86
|
+
<option value="error">error</option>
|
|
87
|
+
<option value="perfwarning">perfwarning</option>
|
|
88
|
+
</select>
|
|
89
|
+
<input id="categoryFilter" placeholder="Category" />
|
|
90
|
+
<select id="contextFilter">
|
|
91
|
+
<option value="all">All contexts</option>
|
|
92
|
+
</select>
|
|
93
|
+
<input id="textFilter" placeholder="Text" />
|
|
94
|
+
</div>
|
|
95
|
+
</header>
|
|
96
|
+
<div id="console"></div>
|
|
97
|
+
</section>
|
|
98
|
+
|
|
99
|
+
<section class="panel panel-send">
|
|
100
|
+
<header><h2>Send command</h2></header>
|
|
101
|
+
<label>Event name</label>
|
|
102
|
+
<input id="eventName" value="command.execute" />
|
|
103
|
+
<label>Payload JSON</label>
|
|
104
|
+
<textarea id="payload">{"action":"ping"}</textarea>
|
|
105
|
+
<button id="sendBtn">Send to selected debugger</button>
|
|
106
|
+
</section>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div id="view-timeline" class="main-view hidden">
|
|
111
|
+
<div class="tl-view">
|
|
112
|
+
<div class="tl-toolbar tl-toolbar-filters">
|
|
113
|
+
<select id="tl-context-filter" class="tl-toolbar-select">
|
|
114
|
+
<option value="all">All contexts</option>
|
|
115
|
+
</select>
|
|
116
|
+
|
|
117
|
+
<div class="tl-label-anchor tl-toolbar-labels">
|
|
118
|
+
<div id="tl-label-filter-wrap" class="tl-label-filter-wrap">
|
|
119
|
+
<div id="tl-label-tags" class="tl-label-tags"></div>
|
|
120
|
+
<input id="tl-label-input" class="tl-label-input" placeholder="Filter labels…" autocomplete="off" />
|
|
121
|
+
</div>
|
|
122
|
+
<div id="tl-label-suggestions" class="tl-label-suggestions hidden"></div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="tl-toolbar-spacer"></div>
|
|
126
|
+
|
|
127
|
+
<div class="tl-toolbar-actions">
|
|
128
|
+
<div class="tl-dropdown-wrap">
|
|
129
|
+
<button id="tl-report-btn" class="tl-report-btn">
|
|
130
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
|
131
|
+
Report
|
|
132
|
+
</button>
|
|
133
|
+
<div id="tl-report-menu" class="tl-dropdown-menu tl-dropdown-right hidden">
|
|
134
|
+
<div class="tl-dropdown-field">
|
|
135
|
+
<label>Period</label>
|
|
136
|
+
<select id="report-period">
|
|
137
|
+
<option value="5">First 5 sec</option>
|
|
138
|
+
<option value="60">First min</option>
|
|
139
|
+
<option value="all" selected>Full period</option>
|
|
140
|
+
</select>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="tl-dropdown-field">
|
|
143
|
+
<label>Format</label>
|
|
144
|
+
<select id="report-format">
|
|
145
|
+
<option value="html">HTML</option>
|
|
146
|
+
<option value="csv">CSV</option>
|
|
147
|
+
<option value="json">JSON</option>
|
|
148
|
+
</select>
|
|
149
|
+
</div>
|
|
150
|
+
<button id="report-btn" class="tl-dropdown-action">Generate</button>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div class="tl-toolbar tl-toolbar-controls">
|
|
157
|
+
<button id="tl-btn-start" class="tl-tool-btn" title="Jump to start">⏮</button>
|
|
158
|
+
<button id="tl-btn-end" class="tl-tool-btn" title="Jump to end">⏭</button>
|
|
159
|
+
<div class="tl-toolbar-sep"></div>
|
|
160
|
+
<input id="tl-scale" type="range" min="1" max="100" value="50" class="tl-scale-input" />
|
|
161
|
+
<span id="tl-scale-label" class="muted tl-scale-label">auto</span>
|
|
162
|
+
<div class="tl-toolbar-sep"></div>
|
|
163
|
+
<div class="tl-dropdown-wrap">
|
|
164
|
+
<button id="tl-legend-btn" class="tl-tool-btn" title="Legend">
|
|
165
|
+
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="8" cy="8" r="6"/><path d="M8 7v4M8 5v.5"/></svg>
|
|
166
|
+
</button>
|
|
167
|
+
<div id="tl-legend-popup" class="tl-dropdown-menu hidden">
|
|
168
|
+
<div class="tl-legend">
|
|
169
|
+
<div class="tl-legend-item"><span class="tl-legend-dot fast"></span>fast (<300ms)</div>
|
|
170
|
+
<div class="tl-legend-item"><span class="tl-legend-dot medium"></span>medium (<1s)</div>
|
|
171
|
+
<div class="tl-legend-item"><span class="tl-legend-dot slow"></span>slow (≥1s)</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="tl-toolbar-spacer"></div>
|
|
176
|
+
<div id="tl-stats" class="tl-stats"></div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div id="tl-empty" class="tl-empty">Select a debugger to see PerfPoints</div>
|
|
180
|
+
<div id="tl-scroll" class="tl-scroll"></div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- PerfPoint detail popover -->
|
|
186
|
+
<div id="tl-detail" class="tl-detail hidden">
|
|
187
|
+
<div class="tl-detail-header">
|
|
188
|
+
<span id="tl-detail-label" class="tl-detail-label"></span>
|
|
189
|
+
<span id="tl-detail-dur" class="tl-detail-dur"></span>
|
|
190
|
+
<button id="tl-detail-close" class="tl-detail-close">✕</button>
|
|
191
|
+
</div>
|
|
192
|
+
<div id="tl-detail-body" class="tl-detail-body"></div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<!-- Connect modal -->
|
|
196
|
+
<div id="connect-modal" class="modal-overlay hidden">
|
|
197
|
+
<div class="modal-panel">
|
|
198
|
+
<div class="modal-header">
|
|
199
|
+
<span class="modal-title">Connect device</span>
|
|
200
|
+
<button id="connect-modal-close" class="tl-detail-close">✕</button>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="modal-body">
|
|
203
|
+
<div id="connect-qr" class="connect-qr"></div>
|
|
204
|
+
<div class="connect-url-row">
|
|
205
|
+
<input id="connect-url" class="connect-url-input" readonly />
|
|
206
|
+
<button id="connect-copy" class="tl-tool-btn">Copy</button>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<script src="/app.js"></script>
|
|
213
|
+
</body>
|
|
214
|
+
</html>
|