Skip to content

Replace Web Debug Toolbar by ajax requests (opt-in) #15456

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

Closed
gharlan opened this issue Aug 5, 2015 · 16 comments
Closed

Replace Web Debug Toolbar by ajax requests (opt-in) #15456

gharlan opened this issue Aug 5, 2015 · 16 comments

Comments

@gharlan
Copy link
Contributor

gharlan commented Aug 5, 2015

I love the WDT, especially the new one, and I love how it shows me the ajax requests.

But in some apps the ajax requests are similar to full page loads (e. g. using pjax). So while browsing through site in dev env I only see the WDT for the first page load and I do not notice the warnings about missing translations and deprecations etc. (I have to open the profile by my self to see them).

My idea is to add a config option which changes the ajax handling. If the option is enabled, the WDT is replaced by the new ones for ajax calls.

What do you think? Would it be acceptable for you? Any other ideas?

@javiereguiluz
Copy link
Member

@gharlan I don't fully understand your problem, but of course we're interested in making the WDT work for everyone. However, we're very reluctant to adding new configuration options. Can you think of a way to solve this issue without adding that option? Thanks!

@sstok
Copy link
Contributor

sstok commented Aug 5, 2015

Maybe show a small indicator of 'problems' in the Ajax request list?

@stof
Copy link
Member

stof commented Aug 5, 2015

Maybe show a small indicator of 'problems' in the Ajax request list?

The issue with that is that it would require exposing an API to know whether there is a problem for a profile when knowing its token. And building this API would force to implement a new feature for collectors to be able to get the info (as the API need to be extendable). It makes the feature hard to implement IMO

@sstok
Copy link
Contributor

sstok commented Aug 5, 2015

We already expose the Profiler Token :) so we can also expose a simple value like 'NOK' to indicate there are problems but no details about whats wrong.

In fact, you have the Profiler token, so you can use that call an API like you do with WDT on the main request now.

@stof
Copy link
Member

stof commented Aug 5, 2015

@sstok the issue is knowing how to determine this NOK value. There is no API to get information about whether one of the panel considers that there is a violation currently. The only thing we have is the AJAX request rendering the HTML of the toolbar.

@gharlan
Copy link
Contributor Author

gharlan commented Aug 5, 2015

However, we're very reluctant to adding new configuration options.

I support this. 👍
(But I'm not sure if this were a good config option anyway ;))

Can you think of a way to solve this issue without adding that option?

Without integration into the core: I guess I could achieve this somehow in a bundle but I'm not sure how easy it is to change the js behavior of the toolbar.

With integration of the new possibility into core: maybe the toolbar replacement could be initiated by a special response header (X-WDT-REPLACE or something like this)?
So I would have to add the header by myself (e.g. in a listener).

@sstok
Copy link
Contributor

sstok commented Aug 5, 2015

Ah right, I forgot the profile data is rendered server-side :)

@xabbuh
Copy link
Member

xabbuh commented Aug 5, 2015

FYI, if I understand the issue correctly, the guys from Oro did something like this in Oro Platform and OroCRM though I didn't look into how they actually implemented it. Maybe @DimaSoroka can provide us some insights.

@mayeco
Copy link
Contributor

mayeco commented Aug 13, 2015

@javiereguiluz is it normal that the ajax-debug bar still blink after all ajax requests finished?

@javiereguiluz
Copy link
Member

@mayeco personally I think this is a bug and I reported it here: #15439 However, if you read people's comments, they think it's OK as it is. I still believe this is a bug.

@mayeco
Copy link
Contributor

mayeco commented Aug 18, 2015

@javiereguiluz I also think is a bug

@iquito
Copy link
Contributor

iquito commented Feb 14, 2017

I would also appreciate this feature and think it could be implemented in a sensible way using the idea of @gharlan :

  • If the toolbar should be replaced with information from the ajax request, an additional header is set, like X-WDT-REPLACE and the value true/1
  • The toolbar, after receiving the ajax request, now knows it should be replaced, and it knows the new X-DEBUG-TOKEN, so it could make an ajax call to get a complete replacement of the toolbar
  • No new configuration is needed, and being able to switch the toolbar to a different X-DEBUG-TOKEN (and/or the option to load the toolbar via ajax) may also be useful in other instances

So the main obstacle is the possibility of loading/updating the toolbar via ajax. As far as I can tell the toolbar is 99% JS anyway, which should make it easier. Is this a feature which would be considered in this way?

@mysterioushunt
Copy link

This would be an amazing feature. I use Symfony for the back end and react for the front end. It would be very useful to have the information update on each ajax call as if it were a full page load.

@jeffreymb
Copy link
Contributor

Another idea would be to provide a JS api that could be used after an AJAX to cause a reload. There are various hacks in the wild that worked for SF2, but I haven't found or put the effort into making it work for SF3.

The main issue I see with the idea @iquito suggested would be how to know if the WDT should be replaced or just an AJAX request added to the list.

@iquito
Copy link
Contributor

iquito commented Apr 19, 2017

@jeffreymb The toolbar can read HTTP response headers, so when reading X-WDT-REPLACE in a response it would know to replace itself. If the header is not set, it would behave as it currently does by adding an ajax request to the toolbar.

The main advantage of this approach is ease-of-use - as a developer you just add a header to a response and the toolbar is replaced. No API or intricate knowledge of the toolbar is required.

@jeffreymb
Copy link
Contributor

I just created a PR for this feature and would welcome feedback!

nicolas-grekas added a commit that referenced this issue Apr 29, 2018
…eader set (jeffreymb)

This PR was squashed before being merged into the 4.1-dev branch (closes #26655).

Discussion
----------

[WebProfilerBundle] Make WDT follow ajax requests if header set

Replaces #22509. I accidentally closed that PR and couldn't get GitHub to recognize when I added more commits to the branch in my fork.

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes <!-- don't forget updating src/**/CHANGELOG.md files -->
| BC breaks?    | no
| Deprecations? | no <!-- don't forget updating UPGRADE-*.md files -->
| Tests pass?   | yes (There are no tests that I could find)
| Fixed tickets | #15456
| License       | MIT
| Doc PR        | symfony/symfony-docs#... <!--highly recommended for new features-->

When the header of an ajax response contains the `Symfony-Debug-Toolbar-Replace` header with a value of '1' it will automatically update the toolbar with the toolbar with the debug info from the ajax request.

The bulk of the code in the `loadToolbar` function in the `base_js.html.twig` file is moved from the `toolbar_js.html.twig` file and slightly refactored to use the internal functions instead of making external calls. I take no credit/blame for this code. 😉

If this could make it into 4.1 there are multiple people that would be very happy!

Commits
-------

e4e591b [WebProfilerBundle] Make WDT follow ajax requests if header set
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants