Hi everyone,
I'd like to share a simple code snippet that can be quite useful for debugging and understanding Flarum's frontend routing. This code, when added to your root extend.php file, will log the name of the current Flarum route to your browser's developer console as you navigate.
This is particularly helpful when you're developing extensions and need to determine which route corresponds to a specific page or action.
How to Use:
Place this code within the extend.php file of root
Open your browser's developer console (F12)
As you browse your Flarum forum, you should see the initial route name logged, and then subsequent route changes logged as you navigate.
Note: This is a simple monitoring script intended for development and debugging purposes.
Hope this helps some fellow developers!
Here's the code:
<?php
use Flarum\Extend;
use Flarum\Frontend\Document;
use Psr\Http\Message\ServerRequestInterface;
return [
(new Extend\Frontend('forum'))
->content(function (Document $document, ServerRequestInterface $request) {
$routeName = $request->getAttribute('routeName') ?? 'unknown';
$document->head[] = "
<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.app && app.current) {
console.log('Initial Route Name: {$routeName}');
setInterval(() => {
const currentRoute = app.current.get('routeName') || 'unknown';
if (currentRoute !== window.lastRouteName) {
window.lastRouteName = currentRoute;
console.log('Route changed to:', currentRoute);
}
}, 100); // Check for route changes every 100ms
} else {
console.error('Flarum app is not loaded or app.current is missing.');
}
});
</script>
";
}),
];
