Debug in Web Inspectors

[nilshoerrmann]

It would be neat, if the debug mode wasn't an extra page but a panel in the browsers' web inspectors.

[nilshoerrmann]

This idea just crossed my mind again while I was debugging a website. Would it be possible to move the debug view to a web developer panel in Firefox/Chrome/Safari?

[brendo]

I'm don't know much about integrating with the developer panels, but it's a great idea!

[nilshoerrmann]

I know that web inspector panels for JavaScript frameworks like Ember and React exist. They all seem to be based on common web technologies: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension

Accessing the debug and profile information in the inspector would enable a few interesting features:

• First and foremost, it would be possible to see the front-end page and the underlying XML at the same time (no more switching between different tabs that are not syncronised).
• It would be also be possible to format and view event results in the web inspector directly (removing the need for a comment in the HTML. This should make event debugging much easier
• As the default web inspectors already have a DOM tree view with collapsible nodes, this should be adaptable easily, see Collapsible XML Nodes #17.
• A bit crazy, but as the debug mode knows all the templates and sources, it might even be possible to highlight the resulting HTML when hovering XML nodes in the "Symphony inspector".
• It might even be possible to show Symphony logs in the console.

I know from experience that debug mode performance suffers severely when dealing with large XML sources, but I never experienced this kind of problem with the markup view in the web inspectors. So the debug mode could benefit from core web inspector optimisations.

[michael-e]

+1. I love this idea.

[nilshoerrmann]

I'm don't know much about integrating with the developer panels, but it's a great idea!

Question @brendo: How to create a developer panel seems to be well documented (e. g. https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox). But is there a way for Debug Devkit to either deliver its results with the current browser request or at least for the current browser request?

Currently, if I use the debugger, I always trigger a separate request. Same is true for the profiler, which decouples my page view in the browser from the profiler results. For a Symphony Inspector the actual data of the page I'm viewing in the browser would be needed. Otherwise event results couldn't be displayed.

[nitriques]

But is there a way for Debug Devkit to either deliver its results with the current browser request or at least for the current browser request?

From the top of my mind:

The extension would add a special http header to each request the browser makes. If Symphony sees it, it can then send all the content WITH the request: let's say in a hidden div. I've played with extensions in Chrome and could do this very easily.

[nilshoerrmann]

Nice idea! That would simplify the inspector a lot.

I have actually no idea how devkits work but would be possible to transmit the results of all devkits at once (xml, params, profile)?

[nilshoerrmann]

Having to admin that I have no idea how this stuff works between server and browser, would it be possible to send two consecutive server responses ("one split in two parts") so that the browser starts rendering when the HTML part has finished but keeps receiving the rest?

[nitriques]

I have actually no idea how devkits work but would be possible to transmit the results of all devkits at once

Yeah you could do it!

would it be possible to send two consecutive server responses ("one split in two parts") so that the browser starts rendering when the HTML part has finished but keeps receiving the rest?

HTTP2 can do this, but HTTP1 cannot. H2 is coming strong, but right now, it still hard to set up.

If you want to not delay rendering, you could put your html/xml/json in a script tag with the type="text/x-template" but you would still need to download the whole thing.

That being said, you could also issue a ajax request from the extension.

[nilshoerrmann]

That being said, you could also issue a ajax request from the extension.

That sound better for performance. But how would I get the devkit results for exactly that page view in my browser? Making an AJAX request would trigger an additional request with different context (think event results).

[michael-e]

Too complicated. The additional content will only get delivered to developers, right? (Of course one should be able to switch in it on and off nevertheless.)

[nilshoerrmann]

Yeah, it would make sense to only request it, if the related inspector panel is opened.

[nitriques]

That's why I would ship it with the current request. And that content is only sent when a specific browser extension is installed and running.

[nilshoerrmann]

Yes, I understand that.

I was just asking if there was another option because in case of large XML sources rendering for developers might be delayed notably – and it would be nice to prevent this. At least, I don't like to wait :)

[nitriques]

Until H2 is mainstream and well baked into php, we'll have delays sadly.