Skip to content

Introduce DebugBarVarDumper for HTML variable dumping #344

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

james-johnston-thumbtack
Copy link
Contributor

The Symfony VarDumper component includes an HtmlDumper that dumps variables in a rich HTML format that allows for expanding and collapsing individual tree nodes in the dumped variable. This makes it much more practical to navigate large/deep variables that have been dumped.

DebugBarVarDumper provides a Debug Bar-friendly wrapper around the VarDumper component. It’s intended as an alternative to DataFormatter::formatVar to enable this rich HTML interface. It provides for:

  • Debug Bar-friendly styles for the VarDumper HTML.

  • Implements AssetProvider for returning VarDumper static assets (requires users of JavascriptRenderer to support inline assets).

  • Simplifies/wraps VarCloner and HtmlDumper function calls for cloning and dumping variables in a Debug Bar environment. VarDumper was originally written/targeted to be a replacement for var_dump, so the default behavior of HtmlDumper echoing static assets and variable dumps directly to the page output isn’t really appropriate. Furthermore, we must contend with several different Symfony versions going back to v2.6.0. This class provides a friendly wrapper over all of that.

I have tested this with these Symfony versions:

  • v2.6.0
  • v2.7.0
  • v2.8.0
  • v3.0.0
  • v3.1.0
  • v3.2.0
  • v3.3.0

All seem to work fine, with graceful degradation as needed.

Furthermore, the class is ready to take advantage of new features that I added and are upcoming in Symfony v3.4:

Screenshots of how this looks with some of the collectors. After this PR is merged, I'll submit more pull requests to enable these collectors to integrate with this new feature.

Request collector:
screen shot 2017-07-18 at 1 44 22 pm

Rich variable dumping in the message collector:
screen shot 2017-07-18 at 1 46 39 pm

Upcoming backtrace collector:
screen shot 2017-07-18 at 1 47 28 pm

The Symfony VarDumper component includes an HtmlDumper that dumps
variables in a rich HTML format that allows for expanding and collapsing
individual tree nodes in the dumped variable.  This makes it much more
practical to navigate large/deep variables that have been dumped.

DebugBarVarDumper provides a Debug Bar-friendly wrapper around the
VarDumper component.  It’s intended as a better alternative to
DataFormatter::formatVar.  It provides for:

* Debug Bar-friendly styles for the VarDumper HTML.

* Implements AssetProvider for returning VarDumper static assets
  (requires users of JavascriptRenderer to support inline assets).

* Simplifies VarCloner and HtmlDumper function calls for cloning and
  dumping variables in a Debug Bar environment.  VarDumper was
  originally written/targeted to be a replacement for var_dump, so the
  default behavior of HtmlDumper echoing static assets and variable
  dumps directly to the page output isn’t really appropriate.
  Furthermore, we must contend with several different Symfony versions
  going back to v2.6.0.  This class provides a friendly wrapper.

I have tested this with these Symfony versions:

* v2.6.0
* v2.7.0
* v2.8.0
* v3.0.0
* v3.1.0
* v3.2.0
* v3.3.0

All seem to work fine, with graceful degradation as needed.

Furthermore, the class is ready to take advantage of new features that I
added and are upcoming in Symfony v3.4:

* setMinDepth: symfony/symfony#23515
  This feature will be valuable for the upcoming BacktraceCollector.
@barryvdh barryvdh merged commit 13993af into php-debugbar:master Jul 19, 2017
@barryvdh
Copy link
Collaborator

Looks nice, thanks!

@james-johnston-thumbtack james-johnston-thumbtack deleted the DebugBarVarDumper branch July 21, 2017 01:06
@barryvdh
Copy link
Collaborator

Alright, not sure if you use Laravel, but I've updated laravel-debugbar in the dev (3.x@dev) version to use this: barryvdh/laravel-debugbar@e5257dc

Seems to be working :) Had to add the inline rendering, but otherwise did work.

I did have to add outline: 0; to the css for the pre.sf-dump, otherwise it had a blue bar. Rest looked fine :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants