stevan / p5-plack-debugger Goto Github PK

Rethinking of the Plack::Middleware::Debug for a more modern web

Perl 58.93% CSS 5.84% JavaScript 29.61% Perl 6 5.63%

p5-plack-debugger's Introduction

Plack::Debugger

A new debugging tool for Plack web applications

This is a rethinking of the excellent Plack::Middleware::Debug module, with the specific intent of providing more flexibility and supporting capture of debugging data in as many places as possible. Specifically we support the following features not easily handled in the previous module.

Capturing AJAX requests

This module is able to capture AJAX requests that are performed on a page and then associate them with the current request.

NOTE: This is currently done using jQuery's global AJAX handlers which means it will only capture AJAX requests made through jQuery. This is not a limitation, it is possible to capture non-jQuery AJAX requests too, but given the ubiquity of jQuery it is unlikely that will be needed. That said, patches are most welcome :)

Capturing post-request data

Not all debugging data may be available during the normal lifecycle of a request, some data is better captured and collated in some kind of post-request cleanup phase. This module allows you to specify that code can be run in the psgix.cleanup phase, which - if your server supports it - will happens after the request has been sent to the browser.

Just capturing data

This module has been designed such that it is possible to just collect debugging data and not use the provided javascript UI. This will allow data to be collected and viewed using some other type of mechanism, for instance it would be possible to collect data on a web browsing session and view it in aggregate instead of just per-page.

NOTE: While we currently do not provide any code to do this, the possibilities are pretty endless if you think about it.

Example Usage

use Plack::Builder;

use JSON;

use Plack::Debugger;
use Plack::Debugger::Storage;

use Plack::App::Debugger;

use Plack::Debugger::Panel::Timer;
use Plack::Debugger::Panel::AJAX;
use Plack::Debugger::Panel::Memory;
use Plack::Debugger::Panel::Warnings;

my $debugger = Plack::Debugger->new(
    storage => Plack::Debugger::Storage->new(
        data_dir     => '/tmp/debugger_panel',
        serializer   => sub { encode_json( shift ) },
        deserializer => sub { decode_json( shift ) },
        filename_fmt => "%s.json",
    ),
    panels => [
        Plack::Debugger::Panel::Timer->new,     
        Plack::Debugger::Panel::AJAX->new, 
        Plack::Debugger::Panel::Memory->new,
        Plack::Debugger::Panel::Warnings->new   
    ]
);

my $debugger_app = Plack::App::Debugger->new( debugger => $debugger );

builder {
    mount $debugger_app->base_url => $debugger_app->to_app;

    mount '/' => builder {
        enable $debugger_app->make_injector_middleware;
        enable $debugger->make_collector_middleware;
        $app;
    }
};

Acknowledgement

This module was originally developed for Booking.com. With approval from Booking.com, this module was generalized and published on CPAN, for which the authors would like to express their gratitude.

Copyright

This is free software; you can redistribute it and/or modify it under the same terms as the Perl 5 programming language system itself.

p5-plack-debugger's People

Contributors

Stargazers

Watchers

Forkers

lapple apardolopez ricardobeat komarov heikojansen syspete manwar clayne

p5-plack-debugger's Issues

how to get the pulldown menu for the debugger in my web app ?

Hi !
Thanks for this great tool.
I'm a beginner concerning working with perl and plack. For the last 15 year we developed almost all of our web apps in PHP using xdebug for debugging together with PHPStorm or other IDEs like VS Code.
Now we are looking for a convenient similar way to debug perl. But it's not so easy to find such xdebug tools for perl.
Perl::LanguageServer is great for debugging perl as CLI.
But there is no way to call the debugger listening on port xyz in the IDE from within a web app.

We have to use an open source plack based web app and we want to debug it to get a better understanding of how it works internally.

In your youtube video "LPW2014 Stevan Little ‎stevan‎ ‎Plack::Debugger A new debugger for Plack Applications‎" starting at 25:00 minute in the right top corner appears your debugger menu. Using it I can open your panels.

When I try to use your example code I do not see such a menu. Only the json files are stored in /tmp/debugger_panel
As $app I used this very simple example:

my $app = sub {
return [
'200',
[ 'Content-Type' => 'text/html' ],
[ 42 ],
];
};

I'm testing with chrome on ubuntu.

Hope you can give me a hint. I'm pretty sure that I make a mistake but I don't know which one.

Thanks a lot in advance.

Usage of Function.prototype.bind() breaks in IE 8

Worthwhile to look for a workaround, if one is available.

Improve timing for AJAX initialization/handling

The Plack.Debugger javascript gets loaded
The Plack.Debugger hooks into the jQuery global AJAX handlers which send events (_:ajax-send, _:ajax-complete), however the consumer of these events is not handling them yet.
The Plack.Debugger sends off an AJAX request to get the debugging data for the current page (and with that, find out if it needs to handle any AJAX requests or not)
Another AJAX call happens on the page triggering the jQuery global handlers which in turn trigger our events (which are not yet being handled)
The Plack.Debugger AJAX call in #3 succeeds and it loads the data and then turns on AJAX request handling (with the _:ajax-tracking-enable event).

Docs for porting Plack::Middleware::Debug panels to Plack::Debugger::Panels

The transformation is usually fairly simple, but a quick doc to go over it in more detail would likely be helpful

Make panel rendering lazy

The panels are rendered immediately upon fetching of data, which is fine if you actually look at the panels, but is a waste if you never open them. The ideal situation is that we extract the minimum relevant data to render as much of the panel as we show.

This is particularly bad when fetching AJAX sub-requests as each AJAX call will kick off a data fetch from the server and then a bunch of rendering of panels.

Fix trailing JSON commas for IE8 and below

Create way to disable the debugger per-request

Two suggestions have been floated, first being a query param (this might present issues if people have strict param validation though) or a custom X-Plack-Debugger-Disable header of some kind (also could cause issues, but much less likely).

Handle ESC key stuff better

Currently the ESC is being used to toggle the display of the debugger, which is nice, except when other things have already hooked into the ESC key. Need to investigate a better solution then we currently have, because it is annoying to have the debugger open/close when you are actually trying to close a lightbox (for instance).

Improve data-fetch failure case

Sometimes if the server is being slow or twitchy the debug data call fails and we throw an error message. It should actually be more graceful and quietly do a retry (at least one) before it actually starts complaining.

Build a console util object

The panel data is actually already stored in JSON in the browser process, if you do this in the console you will find it.

$.grep(plack_debugger.resource._request.data.results, function (x) { return x.title == "Some Title" })[0].result

You can also do the AJAX fetch yourself and process the results.

$.ajax({ global: false, dataType: 'json', url: (Plack.Debugger.$CONFIG.root_url + '/' + Plack.Debugger.$CONFIG.current_request_uid), success: function (d) { console.log($.grep(d.data.results, function (x) { return x.title == "Some Title" })[0].result) } });

Ideally this would be better done with something like:

plack_debugger.console_util.get_results_for_panel("Some Title");

and

plack_debugger.console_util.fetch_results_for_panel("Some Title");

Or some kind of variant of this, you get the idea.