-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathforge-debugbar.html
More file actions
1121 lines (1000 loc) · 59.6 KB
/
forge-debugbar.html
File metadata and controls
1121 lines (1000 loc) · 59.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forge Kernel - ForgeDebugbar</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/docs.css">
</head>
<body class="bg-gray-50 text-gray-900">
<!-- Navigation -->
<nav class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<h1 class="text-xl font-bold text-gray-900">
Forge Kernel
</h1>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="index.html"
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
Home
</a>
<a href="getting-started.html"
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
Getting Started
</a>
<a href="core-concepts.html"
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
Core Concepts
</a>
<a href="modules.html"
class="text-blue-600 inline-flex items-center px-1 pt-1 text-sm font-medium border-b-2 border-blue-600">
Capabilities
</a>
<a href="api-reference.html"
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
API Reference
</a>
<a href="tutorial.html"
class="text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:text-blue-600">
Tutorials
</a>
</div>
</div>
<div class="flex items-center sm:hidden">
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 p-2">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="sm:hidden hidden bg-white border-t border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="index.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Home</a>
<a href="getting-started.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Getting Started</a>
<a href="core-concepts.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Core Concepts</a>
<a href="modules.html" class="block px-3 py-2 text-blue-600 font-medium">Capabilities</a>
<a href="api-reference.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">API Reference</a>
<a href="tutorial.html" class="block px-3 py-2 text-gray-900 hover:text-blue-600">Tutorials</a>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Sidebar Navigation -->
<div id="sidebar-nav" class="lg:w-1/4">
<div class="bg-white rounded-lg shadow-sm p-6 sticky top-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">ForgeDebugbar</h3>
<nav class="space-y-2">
<a href="#overview" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Overview</a>
<a href="#architecture" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Architecture & Design</a>
<a href="#installation" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Installation</a>
<a href="#collectors" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Collectors Overview</a>
<a href="#built-in-collectors" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Built-in Collectors</a>
<a href="#helper-functions" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Helper Functions</a>
<a href="#html-injection" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Automatic HTML Injection</a>
<a href="#lifecycle-hooks" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Lifecycle Hooks</a>
<a href="#configuration" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Configuration</a>
<a href="#debug-bar-ui" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Debug Bar UI</a>
<a href="#integration" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Integration Points</a>
<a href="#examples" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Usage Examples</a>
<a href="#best-practices" class="nav-link block px-3 py-2 text-sm text-gray-700 rounded-md hover:text-blue-600">Best Practices</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="lg:w-3/4">
<div class="bg-white rounded-lg shadow-sm p-8">
<h1 class="text-4xl font-bold text-gray-900 mb-6">ForgeDebugbar</h1>
<p class="text-xl text-gray-600 mb-8">
Development debugging toolbar for Forge Kernel. Provides automatic HTML injection, multiple data collectors, and a tabbed interface for debugging information.
</p>
<!-- Overview -->
<section id="overview" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Overview</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar is a comprehensive debugging toolbar that automatically injects into HTML responses during development. It provides real-time insights into memory usage, execution time, database queries, routes, sessions, views, exceptions, and more.
</p>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
<h3 class="font-semibold text-lg mb-4">Key Features</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="space-y-2">
<div class="flex items-center"><span>Automatic HTML injection (non-intrusive)</span></div>
<div class="flex items-center"><span>Multiple data collectors (memory, time, queries, routes, etc.)</span></div>
<div class="flex items-center"><span>Tabbed interface with collapsible panels</span></div>
<div class="flex items-center"><span>Only active in debug mode (APP_DEBUG)</span></div>
</div>
<div class="space-y-2">
<div class="flex items-center"><span>Content-Type aware (only HTML responses)</span></div>
<div class="flex items-center"><span>Helper functions for custom data</span></div>
<div class="flex items-center"><span>Lifecycle hook integration</span></div>
<div class="flex items-center"><span>Extensible collector architecture</span></div>
</div>
</div>
</div>
<h3 class="text-lg font-semibold mb-3">What ForgeDebugbar Provides</h3>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><strong>Automatic HTML Injection:</strong> Injects debug bar into HTML responses before the </body> tag without requiring manual integration</li>
<li><strong>Memory Tracking:</strong> Monitors current memory usage, peak memory, and memory percentage of limit</li>
<li><strong>Execution Time:</strong> Tracks total request execution time in milliseconds</li>
<li><strong>Timeline Events:</strong> Custom timeline events for tracking request lifecycle</li>
<li><strong>Debug Messages:</strong> Custom messages with labels (info, warning, error)</li>
<li><strong>Exception Tracking:</strong> Captures exceptions with type, message, code, file, and stack trace</li>
<li><strong>Request Information:</strong> Displays URL, method, IP, headers, query parameters, body, cookies, and files</li>
<li><strong>Route Information:</strong> Shows current route URI, HTTP method, handler, and middleware stack</li>
<li><strong>Session Data:</strong> Displays session ID and all session data</li>
<li><strong>View Tracking:</strong> Lists all rendered views with their data</li>
<li><strong>Database Queries:</strong> Tracks SQL queries with execution time and performance classification (if integrated)</li>
</ul>
<div class="bg-green-50 border-l-4 border-green-400 p-4 mb-6">
<p class="text-sm text-green-700">
<strong>Generic Module:</strong> ForgeDebugbar is a generic module (type: 'generic', order: 3), providing debugging functionality that can be installed as needed. It has no dependencies and automatically integrates with the request lifecycle.
</p>
</div>
</section>
<!-- Architecture & Design -->
<section id="architecture" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Architecture & Design Philosophy</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar uses a collector-based architecture that allows for extensible data collection. It integrates seamlessly with the Forge Kernel lifecycle hooks and automatically injects the debug bar into HTML responses.
</p>
<h3 class="text-lg font-semibold mb-3">Collector-Based Architecture</h3>
<p class="text-gray-600 mb-4">
All debugging data is collected through collectors that implement the <code class="bg-gray-100 px-2 py-1 rounded">CollectorInterface</code>. Collectors are registered with the DebugBar using callables, allowing for lazy evaluation of data.
</p>
<pre><code class="language-php">interface CollectorInterface
{
public static function collect(...$args): mixed;
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Singleton Pattern</h3>
<p class="text-gray-600 mb-4">
The DebugBar class uses a singleton pattern to ensure only one instance exists per request, maintaining consistent state across the application lifecycle.
</p>
<h3 class="text-lg font-semibold mb-3">Lifecycle Hook Integration</h3>
<p class="text-gray-600 mb-4">
ForgeDebugbar integrates with Forge Kernel lifecycle hooks:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><strong>BEFORE_REQUEST:</strong> Initializes timeline tracking</li>
<li><strong>AFTER_REQUEST:</strong> Collects all data and injects debug bar into response</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Content-Type Awareness</h3>
<p class="text-gray-600 mb-4">
The debug bar only injects into HTML responses. It checks the Content-Type header and skips:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Non-HTML content types</li>
<li>JSON responses (detects <code class="bg-gray-100 px-2 py-1 rounded">{"html":...</code> pattern)</li>
<li>Responses without a <code class="bg-gray-100 px-2 py-1 rounded"></body></code> tag</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Debug Mode Only</h3>
<p class="text-gray-600 mb-4">
The debug bar is only active when both conditions are met:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><code class="bg-gray-100 px-2 py-1 rounded">APP_DEBUG</code> environment variable is <code class="bg-gray-100 px-2 py-1 rounded">true</code></li>
<li><code class="bg-gray-100 px-2 py-1 rounded">forge_debug_bar.enabled</code> config is <code class="bg-gray-100 px-2 py-1 rounded">true</code></li>
</ul>
</section>
<!-- Installation -->
<section id="installation" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Installation</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar can be installed via ForgePackageManager. It's a generic module with no dependencies.
</p>
<h3 class="text-lg font-semibold mb-3">Install via ForgePackageManager</h3>
<pre><code class="language-bash">php forge.php module:install ForgeDebugbar</code></pre>
<h3 class="text-lg font-semibold mb-3">Post-Install</h3>
<p class="text-gray-600 mb-4">
After installation, the module automatically:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Links assets via <code class="bg-gray-100 px-2 py-1 rounded">asset:link</code> command</li>
<li>Registers the DebugBar service in the container</li>
<li>Sets up lifecycle hooks for data collection</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Uninstall</h3>
<pre><code class="language-bash">php forge.php module:uninstall ForgeDebugbar</code></pre>
<p class="text-gray-600 mb-4 mt-4">
On uninstall, the module automatically unlinks assets via <code class="bg-gray-100 px-2 py-1 rounded">asset:unlink</code> command.
</p>
</section>
<!-- Collectors Overview -->
<section id="collectors" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Collectors Overview</h2>
<p class="text-gray-600 mb-6">
Collectors are the core of ForgeDebugbar's data collection system. Each collector implements the <code class="bg-gray-100 px-2 py-1 rounded">CollectorInterface</code> and provides a static <code class="bg-gray-100 px-2 py-1 rounded">collect()</code> method.
</p>
<h3 class="text-lg font-semibold mb-3">Collector Interface</h3>
<pre><code class="language-php">interface CollectorInterface
{
public static function collect(...$args): mixed;
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Collector Registration</h3>
<p class="text-gray-600 mb-4">
Collectors are registered with the DebugBar using callables, allowing for lazy evaluation:
</p>
<pre><code class="language-php">$debugbar->addCollector('memory', function () {
return MemoryCollector::collect();
});</code></pre>
<h3 class="text-lg font-semibold mb-3">Built-in Collectors</h3>
<p class="text-gray-600 mb-4">
ForgeDebugbar includes the following built-in collectors:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>MemoryCollector - Memory usage tracking</li>
<li>TimeCollector - Request execution time</li>
<li>TimelineCollector - Request lifecycle events</li>
<li>MessageCollector - Debug messages</li>
<li>ExceptionCollector - Exception tracking</li>
<li>RequestCollector - HTTP request information</li>
<li>RouteCollector - Current route information</li>
<li>SessionCollector - Session data</li>
<li>ViewCollector - Rendered views</li>
<li>DatabaseCollector - Database queries (available but requires integration)</li>
</ul>
</section>
<!-- Built-in Collectors -->
<section id="built-in-collectors" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Built-in Collectors</h2>
<h3 class="text-lg font-semibold mb-3">MemoryCollector</h3>
<p class="text-gray-600 mb-4">
Tracks memory usage throughout the request lifecycle.
</p>
<pre><code class="language-php">class MemoryCollector implements CollectorInterface
{
public static function collect(...$args): array
{
return self::instance()->getMemoryUsage();
}
public function getMemoryUsage(): array
{
return [
'current' => 'X.XX MB', // Current memory usage
'used' => 'X.XX MB', // Memory used (delta)
'peak' => 'X.XX MB', // Peak memory usage
'percentage' => 'XX.X%' // Percentage of memory limit
];
}
}</code></pre>
<p class="text-gray-600 mb-4 mt-4">
The MemoryCollector tracks:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Current memory usage in MB</li>
<li>Memory used since request start (delta)</li>
<li>Peak memory usage during the request</li>
<li>Memory percentage of PHP's memory limit</li>
</ul>
<h3 class="text-lg font-semibold mb-3">TimeCollector</h3>
<p class="text-gray-600 mb-4">
Tracks total request execution time.
</p>
<pre><code class="language-php">class TimeCollector implements CollectorInterface
{
public static function collect(...$args): string
{
$startTime = $args[0] ?? microtime(true);
return round((microtime(true) - $startTime) * 1000, 2) . 'ms';
}
}</code></pre>
<p class="text-gray-600 mb-4 mt-4">
Returns the total request execution time in milliseconds, calculated from the request start time.
</p>
<h3 class="text-lg font-semibold mb-3">TimelineCollector</h3>
<p class="text-gray-600 mb-4">
Tracks custom timeline events throughout the request lifecycle.
</p>
<pre><code class="language-php">class TimelineCollector implements CollectorInterface
{
public function addEvent(string $name, string $label = 'event', array $data = []): void
{
$this->events[] = [
'name' => $name,
'label' => $label,
'time' => microtime(true),
'data' => $data,
'origin' => Debuger::backtraceOrigin()
];
}
}</code></pre>
<p class="text-gray-600 mb-4 mt-4">
Timeline events include:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Event name and label</li>
<li>Timestamp in microseconds</li>
<li>Optional event data</li>
<li>Origin (class and method where event was added)</li>
</ul>
<h3 class="text-lg font-semibold mb-3">MessageCollector</h3>
<p class="text-gray-600 mb-4">
Collects custom debug messages with labels.
</p>
<pre><code class="language-php">class MessageCollector implements CollectorInterface
{
public function addMessage(mixed $message, string $label = 'info'): void
{
$this->messages[] = [
'message' => $message,
'label' => $label, // 'info', 'warning', 'error'
'time' => microtime(true),
];
}
}</code></pre>
<p class="text-gray-600 mb-4 mt-4">
Messages support labels: <code class="bg-gray-100 px-2 py-1 rounded">info</code>, <code class="bg-gray-100 px-2 py-1 rounded">warning</code>, <code class="bg-gray-100 px-2 py-1 rounded">error</code>.
</p>
<h3 class="text-lg font-semibold mb-3">ExceptionCollector</h3>
<p class="text-gray-600 mb-4">
Tracks exceptions that occur during the request.
</p>
<pre><code class="language-php">class ExceptionCollector implements CollectorInterface
{
public function addException(\Throwable $exception): void
{
$this->exceptions[] = [
'type' => get_class($exception),
'message' => $exception->getMessage(),
'code' => $exception->getCode(),
'file' => BASE_PATH . $exception->getFile() . ':' . $exception->getLine(),
'trace' => $exception->getTraceAsString(),
];
}
}</code></pre>
<p class="text-gray-600 mb-4 mt-4">
Captures exception type, message, code, file location, and full stack trace.
</p>
<h3 class="text-lg font-semibold mb-3">RequestCollector</h3>
<p class="text-gray-600 mb-4">
Collects HTTP request information.
</p>
<pre><code class="language-php">class RequestCollector
{
public static function collect(Request $request): array
{
return [
'url' => $request->getUrl(),
'method' => $request->getMethod(),
'ip' => $request->getClientIp(),
'headers' => $request->getHeaders(),
'query' => $request->getQuery(),
'body' => $request->all(),
'cookies' => $_COOKIE,
'files' => $_FILES,
];
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">RouteCollector</h3>
<p class="text-gray-600 mb-4">
Collects current route information.
</p>
<pre><code class="language-php">class RouteCollector implements CollectorInterface
{
public function collectRoutes(): array
{
return [
'uri' => '/example',
'method' => 'GET',
'handler' => 'App\\Controllers\\HomeController::index',
'middleware' => ['auth', 'csrf'],
];
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">SessionCollector</h3>
<p class="text-gray-600 mb-4">
Collects session data and metadata.
</p>
<pre><code class="language-php">class SessionCollector
{
public function collectSessionData(): array
{
return [
'session_id' => 'abc123...',
'data' => [...], // Formatted session data
'count' => 5 // Number of session keys
];
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">ViewCollector</h3>
<p class="text-gray-600 mb-4">
Tracks rendered views and their data.
</p>
<pre><code class="language-php">class ViewCollector implements CollectorInterface
{
public function addView(string $viewPath, array|object $data = []): void
{
$this->views[] = [
'path' => $viewPath,
'data' => $this->formatDebugData($data),
];
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">DatabaseCollector</h3>
<p class="text-gray-600 mb-4">
Tracks database queries with execution time and performance classification. <strong>Note:</strong> This collector exists but requires integration with the database layer to automatically collect queries.
</p>
<pre><code class="language-php">class DatabaseCollector implements CollectorInterface
{
public function addQuery(
string $query,
array $bindings,
float $time,
string $connectionName,
string $origin
): void {
$this->queries[] = [
'query' => $query,
'bindings' => $bindings,
'time_ms' => number_format($time, 2),
'connection_name' => $connectionName,
'origin' => $origin,
'performance' => $this->classifyQueryPerformance($time) // 'fast', 'medium', 'slow'
];
}
private function classifyQueryPerformance(float $time): string
{
if ($time > 100) return 'slow';
if ($time > 50) return 'medium';
return 'fast';
}
}</code></pre>
<p class="text-gray-600 mb-4 mt-4">
Query performance is classified as:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><strong>Fast:</strong> < 50ms</li>
<li><strong>Medium:</strong> 50-100ms</li>
<li><strong>Slow:</strong> > 100ms</li>
</ul>
</section>
<!-- Helper Functions -->
<section id="helper-functions" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Helper Functions</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar provides helper functions for easy integration with your application code.
</p>
<h3 class="text-lg font-semibold mb-3">add_timeline_event()</h3>
<p class="text-gray-600 mb-4">
Adds a custom timeline event to track specific points in your application's execution.
</p>
<pre><code class="language-php">add_timeline_event(string $name, string $label, array $data = []): void</code></pre>
<p class="text-gray-600 mb-4 mt-4">
<strong>Parameters:</strong>
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><code class="bg-gray-100 px-2 py-1 rounded">$name</code> - Event name (e.g., 'user_authenticated', 'data_processed')</li>
<li><code class="bg-gray-100 px-2 py-1 rounded">$label</code> - Event label (e.g., 'start', 'end', 'info', 'warning')</li>
<li><code class="bg-gray-100 px-2 py-1 rounded">$data</code> - Optional event data array</li>
</ul>
<p class="text-gray-600 mb-4">
<strong>Example:</strong>
</p>
<pre><code class="language-php">// Track when a user is authenticated
add_timeline_event('user_authenticated', 'info', [
'user_id' => $user->id,
'method' => 'email'
]);
// Track start of data processing
add_timeline_event('data_processing', 'start');
// Track end of data processing
add_timeline_event('data_processing', 'end');</code></pre>
<p class="text-gray-600 mb-4 mt-4">
<strong>Note:</strong> This function only works when <code class="bg-gray-100 px-2 py-1 rounded">APP_DEBUG</code> is <code class="bg-gray-100 px-2 py-1 rounded">true</code>.
</p>
<h3 class="text-lg font-semibold mb-3">collect_view_data()</h3>
<p class="text-gray-600 mb-4">
Collects view rendering data for debugging. This is automatically called by the View class, but can be called manually if needed.
</p>
<pre><code class="language-php">collect_view_data(string $view, mixed $data = []): void</code></pre>
<p class="text-gray-600 mb-4 mt-4">
<strong>Parameters:</strong>
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><code class="bg-gray-100 px-2 py-1 rounded">$view</code> - View path</li>
<li><code class="bg-gray-100 px-2 py-1 rounded">$data</code> - View data (array or object)</li>
</ul>
<p class="text-gray-600 mb-4">
<strong>Example:</strong>
</p>
<pre><code class="language-php">// Automatically called by View class
// But can be called manually if needed
collect_view_data('pages/home/index', [
'title' => 'Home Page',
'users' => $users
]);</code></pre>
</section>
<!-- Automatic HTML Injection -->
<section id="html-injection" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Automatic HTML Injection</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar automatically injects the debug bar into HTML responses without requiring any manual integration. The injection is non-intrusive and only occurs when certain conditions are met.
</p>
<h3 class="text-lg font-semibold mb-3">Injection Process</h3>
<p class="text-gray-600 mb-4">
The debug bar is injected during the <code class="bg-gray-100 px-2 py-1 rounded">AFTER_REQUEST</code> lifecycle hook:
</p>
<ol class="list-decimal list-inside space-y-2 text-gray-600 mb-4">
<li>All collectors gather their data</li>
<li>Debug bar HTML is rendered with collected data</li>
<li>CSS and JavaScript assets are injected</li>
<li>Everything is inserted before the <code class="bg-gray-100 px-2 py-1 rounded"></body></code> tag</li>
</ol>
<h3 class="text-lg font-semibold mb-3">Injection Conditions</h3>
<p class="text-gray-600 mb-4">
The debug bar is only injected when all of the following conditions are met:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><code class="bg-gray-100 px-2 py-1 rounded">APP_DEBUG</code> is <code class="bg-gray-100 px-2 py-1 rounded">true</code></li>
<li><code class="bg-gray-100 px-2 py-1 rounded">forge_debug_bar.enabled</code> config is <code class="bg-gray-100 px-2 py-1 rounded">true</code></li>
<li>Response Content-Type is <code class="bg-gray-100 px-2 py-1 rounded">text/html</code> (or contains 'text/html')</li>
<li>Response content is a string</li>
<li>Response contains a <code class="bg-gray-100 px-2 py-1 rounded"></body></code> tag</li>
<li>Response does not start with <code class="bg-gray-100 px-2 py-1 rounded">{"html":</code> (JSON response pattern)</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Injection Implementation</h3>
<pre><code class="language-php">public function injectDebugBarIntoHtml(
string $htmlContent,
string $debugBarHtml,
Container $container
): string {
$cssLinkTag = sprintf(
'<link rel="stylesheet" href="/assets/modules/forge-debug-bar/css/debugbar.css">'
);
$jsScriptTag = sprintf(
'<script src="/assets/modules/forge-debug-bar/js/debugbar.js"></script>'
);
$injectionPoint = strripos($htmlContent, '</body>');
if ($injectionPoint !== false) {
$injectedContent = substr($htmlContent, 0, $injectionPoint) .
$cssLinkTag . "\n" .
$debugBarHtml . "\n" .
$jsScriptTag . "\n" .
substr($htmlContent, $injectionPoint);
return $injectedContent;
}
return $htmlContent . "\n" . $cssLinkTag . "\n" . $debugBarHtml . "\n" . $jsScriptTag;
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Asset Injection</h3>
<p class="text-gray-600 mb-4">
The following assets are automatically injected:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><code class="bg-gray-100 px-2 py-1 rounded">/assets/modules/forge-debug-bar/css/debugbar.css</code> - Debug bar styles</li>
<li><code class="bg-gray-100 px-2 py-1 rounded">/assets/modules/forge-debug-bar/js/debugbar.js</code> - Debug bar JavaScript</li>
</ul>
<p class="text-gray-600 mb-4">
These assets are linked during module installation via the <code class="bg-gray-100 px-2 py-1 rounded">asset:link</code> command.
</p>
</section>
<!-- Lifecycle Hooks -->
<section id="lifecycle-hooks" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Lifecycle Hooks</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar integrates with Forge Kernel lifecycle hooks to collect data and inject the debug bar at the appropriate times.
</p>
<h3 class="text-lg font-semibold mb-3">BEFORE_REQUEST Hook</h3>
<p class="text-gray-600 mb-4">
Initializes timeline tracking at the start of the request:
</p>
<pre><code class="language-php">#[LifecycleHook(hook: LifecycleHookName::BEFORE_REQUEST)]
public function onBeforeRequest(Request $request): void
{
add_timeline_event('onBeforeRequest', 'start');
}</code></pre>
<h3 class="text-lg font-semibold mb-3">AFTER_REQUEST Hook</h3>
<p class="text-gray-600 mb-4">
Collects all data and injects the debug bar into the response:
</p>
<pre><code class="language-php">#[LifecycleHook(hook: LifecycleHookName::AFTER_REQUEST)]
public function onAfterRequest(Request $request, Response $response): void
{
add_timeline_event('onAfterRequest', 'end');
// Initialize memory collector
self::$memoryCollector = MemoryCollector::instance();
// Get debug bar instance
$debugbar = $this->getDebugbarInstance();
// Register all collectors
$requestData = RequestCollector::collect($request);
$debugbar->addCollector('request', function () use ($requestData) {
return $requestData;
});
$sessionData = SessionCollector::collect();
$debugbar->addCollector('session', function () use ($sessionData) {
return $sessionData;
});
$debugbar->addCollector('memory', function () {
return self::$memoryCollector ?
self::$memoryCollector->getMemoryUsage() :
['error' => 'Memory collector not initialized'];
});
$timeData = TimeCollector::collect();
$debugbar->addCollector('time', function () use ($timeData) {
return $timeData;
});
$timelineData = TimelineCollector::collect();
$debugbar->addCollector('timeline', function () use ($timelineData) {
return $timelineData;
});
$messagesData = MessageCollector::collect();
$debugbar->addCollector('messages', function () use ($messagesData) {
return $messagesData;
});
$routeData = RouteCollector::collect();
$debugbar->addCollector('route', function () use ($routeData) {
return $routeData;
});
$viewData = ViewCollector::collect();
$debugbar->addCollector('views', function () use ($viewData) {
return $viewData;
});
$exceptionData = ExceptionCollector::collect();
$debugbar->addCollector('exceptions', function () use ($exceptionData) {
return $exceptionData;
});
// Inject debug bar into response
DebugBar::getInstance()->injectDebugBarIfEnabled($response, Container::getInstance());
}</code></pre>
</section>
<!-- Configuration -->
<section id="configuration" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Configuration</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar requires both an environment variable and a configuration setting to be enabled.
</p>
<h3 class="text-lg font-semibold mb-3">Environment Variable</h3>
<p class="text-gray-600 mb-4">
Set <code class="bg-gray-100 px-2 py-1 rounded">APP_DEBUG</code> in your <code class="bg-gray-100 px-2 py-1 rounded">.env</code> file:
</p>
<pre><code class="language-bash">APP_DEBUG=true</code></pre>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
<p class="text-sm text-yellow-700">
<strong>Security Warning:</strong> Never set <code class="bg-gray-100 px-2 py-1 rounded">APP_DEBUG=true</code> in production. The debug bar exposes sensitive information and should only be used in development environments.
</p>
</div>
<h3 class="text-lg font-semibold mb-3">Module Configuration</h3>
<p class="text-gray-600 mb-4">
The module provides a default configuration:
</p>
<pre><code class="language-php">#[ConfigDefaults(defaults: [
'forge_debug_bar' => [
'enabled' => true
]
])]</code></pre>
<p class="text-gray-600 mb-4 mt-4">
You can override this in your application configuration:
</p>
<pre><code class="language-php">// config/forge_debug_bar.php
return [
'enabled' => env('APP_DEBUG', false),
];</code></pre>
<h3 class="text-lg font-semibold mb-3">Enablement Check</h3>
<p class="text-gray-600 mb-4">
The debug bar is only shown when both conditions are true:
</p>
<pre><code class="language-php">public function shouldEnableDebugBar(Container $container): bool
{
$forgeDebug = env('APP_DEBUG');
$config = $container->get(Config::class);
$configEnabled = $config->get('forge_debug_bar.enabled', true);
return $configEnabled && $forgeDebug;
}</code></pre>
</section>
<!-- Debug Bar UI -->
<section id="debug-bar-ui" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Debug Bar UI</h2>
<p class="text-gray-600 mb-6">
The debug bar provides a tabbed interface with multiple panels for different types of debugging information.
</p>
<h3 class="text-lg font-semibold mb-3">Tabbed Interface</h3>
<p class="text-gray-600 mb-4">
The debug bar includes the following tabs:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><strong>Memory:</strong> Current memory usage, peak memory, and memory percentage</li>
<li><strong>Messages:</strong> Custom debug messages with labels (info, warning, error)</li>
<li><strong>Timeline:</strong> Request lifecycle events with timestamps and origins</li>
<li><strong>Exceptions:</strong> Exceptions with type, message, code, file, and stack trace</li>
<li><strong>Views:</strong> Rendered views with their data</li>
<li><strong>Route:</strong> Current route URI, method, handler, and middleware</li>
<li><strong>Queries:</strong> Database queries with execution time and performance classification</li>
<li><strong>Session:</strong> Session ID and all session data</li>
<li><strong>Request:</strong> URL, method, IP, headers, query parameters, body, cookies, and files</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Tab Counts</h3>
<p class="text-gray-600 mb-4">
Tabs display counts for collections:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Messages tab shows: <code class="bg-gray-100 px-2 py-1 rounded">Messages (5)</code></li>
<li>Timeline tab shows: <code class="bg-gray-100 px-2 py-1 rounded">Timeline (12)</code></li>
<li>Exceptions tab shows: <code class="bg-gray-100 px-2 py-1 rounded">Exceptions (2)</code></li>
<li>Queries tab shows: <code class="bg-gray-100 px-2 py-1 rounded">Queries (8)</code></li>
</ul>
<h3 class="text-lg font-semibold mb-3">Collapsible Panels</h3>
<p class="text-gray-600 mb-4">
Panels can be collapsed/expanded by clicking on the Forge logo. Individual sections within panels can also be collapsed for better organization.
</p>
<h3 class="text-lg font-semibold mb-3">JavaScript Interactivity</h3>
<p class="text-gray-600 mb-4">
The debug bar JavaScript handles:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Tab switching</li>
<li>Panel collapse/expand</li>
<li>Section toggle (for nested data)</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Display Values</h3>
<p class="text-gray-600 mb-4">
The debug bar header displays key metrics:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li>Memory usage (current)</li>
<li>Execution time (in milliseconds)</li>
<li>PHP version</li>
</ul>
</section>
<!-- Integration Points -->
<section id="integration" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Integration Points</h2>
<p class="text-gray-600 mb-6">
ForgeDebugbar integrates with various parts of the Forge Kernel to collect debugging information.
</p>
<h3 class="text-lg font-semibold mb-3">View Rendering</h3>
<p class="text-gray-600 mb-4">
The View class automatically calls <code class="bg-gray-100 px-2 py-1 rounded">collect_view_data()</code> when rendering views:
</p>
<pre><code class="language-php">// engine/Core/View/View.php
private function ensureRequestCollectorExist(string $view, array $data): void
{
$ready = is_file($requestCollectorFile)
&& class_exists(\App\Modules\ForgeDebugbar\Collectors\RequestCollector::class);
if ($ready) {
if (function_exists('collect_view_data')) {
collect_view_data($view, $data);
}
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Exception Handling</h3>
<p class="text-gray-600 mb-4">
The Debuger helper class provides methods for logging exceptions:
</p>
<pre><code class="language-php">// engine/Core/Helpers/Debuger.php
public static function logException(\Throwable $exception): void
{
if (class_exists(ExceptionCollector::class)) {
if (env('APP_ENV', false)) {
$exceptionCollector = Container::getInstance()->get(ExceptionCollector::class);
$exceptionCollector::instance()->addException($exception);
}
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Debug Messages</h3>
<p class="text-gray-600 mb-4">
The Debuger helper class provides a method for adding debug messages:
</p>
<pre><code class="language-php">// engine/Core/Helpers/Debuger.php
public static function message(mixed $message, string $label = 'info'): void
{
if (class_exists(\App\Modules\ForgeDebugbar\DebugBar::class)) {
if (env('APP_ENV', false)) {
$messageCollector = Container::getInstance()->get(MessageCollector::class);
$messageCollector::instance()->addMessage($message, $label);
}
}
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Request Lifecycle</h3>
<p class="text-gray-600 mb-4">
ForgeDebugbar hooks into the request lifecycle via lifecycle hooks:
</p>
<ul class="list-disc list-inside space-y-2 text-gray-600 mb-4">
<li><strong>BEFORE_REQUEST:</strong> Initializes timeline tracking</li>
<li><strong>AFTER_REQUEST:</strong> Collects all data and injects debug bar</li>
</ul>
<h3 class="text-lg font-semibold mb-3">Session Management</h3>
<p class="text-gray-600 mb-4">
SessionCollector automatically collects session data from the active session if available.
</p>
<h3 class="text-lg font-semibold mb-3">Database Queries</h3>
<p class="text-gray-600 mb-4">
DatabaseCollector exists and can track queries, but requires integration with the database layer. The collector expects queries to be added via:
</p>
<pre><code class="language-php">DatabaseCollector::instance()->addQuery(
$query,
$bindings,
$timeInMilliseconds,
$connectionName,
$origin
);</code></pre>
</section>
<!-- Usage Examples -->
<section id="examples" class="section-anchor mb-12">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Usage Examples</h2>
<h3 class="text-lg font-semibold mb-3">Adding Timeline Events</h3>
<pre><code class="language-php">// Track when a user logs in
add_timeline_event('user_login', 'info', [
'user_id' => $user->id,
'method' => 'email'
]);
// Track start of expensive operation
add_timeline_event('data_processing', 'start');
// Process data...
$result = processLargeDataset($data);
// Track end of expensive operation
add_timeline_event('data_processing', 'end', [
'records_processed' => count($result)
]);</code></pre>
<h3 class="text-lg font-semibold mb-3">Adding Debug Messages</h3>
<pre><code class="language-php">use Forge\Core\Helpers\Debuger;
// Add info message
Debuger::message('User authenticated successfully', 'info');
// Add warning message
Debuger::message('Cache miss detected', 'warning');
// Add error message
Debuger::message('Failed to connect to external API', 'error');</code></pre>
<h3 class="text-lg font-semibold mb-3">Logging Exceptions</h3>
<pre><code class="language-php">use Forge\Core\Helpers\Debuger;
try {
// Some code that might throw an exception
$result = riskyOperation();
} catch (\Exception $e) {
// Log exception to debug bar
Debuger::logException($e);
// Handle exception...
throw $e;
}</code></pre>
<h3 class="text-lg font-semibold mb-3">Configuration Example</h3>
<pre><code class="language-php">// .env
APP_DEBUG=true
// config/forge_debug_bar.php
return [
'enabled' => env('APP_DEBUG', false),
];</code></pre>
<h3 class="text-lg font-semibold mb-3">Custom Collector (Advanced)</h3>
<p class="text-gray-600 mb-4">
You can create custom collectors by implementing the CollectorInterface:
</p>
<pre><code class="language-php">use App\Modules\ForgeDebugbar\Collectors\CollectorInterface;
class CustomCollector implements CollectorInterface
{
private array $data = [];
public static function collect(...$args): array
{
return self::instance()->data;
}
public static function instance(): self
{
static $instance = null;
if (null === $instance) {
$instance = new self();
}
return $instance;
}
public function addData(string $key, mixed $value): void
{
$this->data[$key] = $value;
}
}
// Register in DebugBarModule::onAfterRequest()
$customData = CustomCollector::collect();
$debugbar->addCollector('custom', function () use ($customData) {
return $customData;
});</code></pre>
</section>
<!-- Best Practices -->
<section id="best-practices" class="section-anchor mb-12">