Always in debug mode?

[minmur]

Is there possibility to have debug mode all the time? I'm using "Live reload" and it's awkward when "Live reload" reloads the page and you need to reload it again yourself to get the debug mode.

[Maluen]

Yes, it could be possible, as soon as you keep the devtools panel open while reloading.
There are some tricky points to tackle to avoid infinite loops / regressions but I'm thinking a possible solution, btw stay in touch, it will surely need some testing ;)

[Maluen]

Check now with the latest master: the debug mode is automatically activated whenever you reload the page.
Let me see if it works as expected, thanks.

[minmur]

Great. It works. Will work with it later today, but at the moment after several tests, it works. Thanks.

[Maluen]

Good, if you have some other enhancements to suggest (or bugs!), just open a new issue, I will be happy to face it.

[Andreyco]

Hi there. There seems to be very same issue with Codekit2 as well.
When Codekit reloads page I have to click "Restart application in debug mode" all the time.

[Maluen]

This is the code that handles the reloading: https://github.com/Maluen/Backbone-Debugger/blob/master/js/panel/routers/Router.js#L13

            this.listenTo(inspectedPageClient, "updated", _.bind(function(updateDetails) {
                if (inspectedPageClient.isInjecting) {
                    // we are injecting scripts into the inspected page
                    // => reload the panel to wait for injected scripts loading (i.e. backbone agent)
                    window.location.href = "";
                } else {
                    // if the inspected page still has the backbone agent, then the update isn't a 
                    // "real one" (e.g. is an hash change / push state, etc.) and we can ignore it.
                    // Note: as a side effect, if the agent isn't in the inspected page because we are
                    // in a waiting or debug disabled view, than the update is always considered as real
                    backboneAgentClient.isActive(_.bind(function(isActive) {
                        if (!isActive) { // the update is "real"
                            if (updateDetails.urlChanged || !this.debugMode) {
                                // the user moved to another page/app/site or refreshed the page
                                // while not in debug mode
                                // => reload the panel to show the view for activating debugging
                                window.location.href = "";
                            } else {
                                // the update is a refresh while in debug mode
                                // => reinject the backbone agent to keep the debug mode running
                                this.restartAppInDebugMode();
                            }
                        }
                    }, this));
                }
            }, this));

If it is reloading, then the following probably is passing (
https://github.com/Maluen/Backbone-Debugger/blob/master/js/panel/routers/Router.js#L29):

                            if (updateDetails.urlChanged || !this.debugMode) {
                                // the user moved to another page/app/site or refreshed the page
                                // while not in debug mode
                                // => reload the panel to show the view for activating debugging
                                window.location.href = "";
                            }

Debugging the debugger itself is not the best experience, but you might try to add some debugger statements and check what's going on when the page gets reloaded.

Just make sure to first undock the devtools and then press "ctrl+shift+i" (Windows) or "cmd+option+i" (Mac) to open another devtools instance that will inspect the first one!

[Andreyco]

Thanks, will take a look later.

Sent from my iPhone

On 26.1.2015, at 12:52, Maluen [email protected] wrote:

This is the code that handles the reloading: https://github.com/Maluen/Backbone-Debugger/blob/master/js/panel/routers/Router.js#L13

        this.listenTo(inspectedPageClient, "updated", _.bind(function(updateDetails) {
            if (inspectedPageClient.isInjecting) {
                // we are injecting scripts into the inspected page
                // => reload the panel to wait for injected scripts loading (i.e. backbone agent)
                window.location.href = "";
            } else {
                // if the inspected page still has the backbone agent, then the update isn't a 
                // "real one" (e.g. is an hash change / push state, etc.) and we can ignore it.
                // Note: as a side effect, if the agent isn't in the inspected page because we are
                // in a waiting or debug disabled view, than the update is always considered as real
                backboneAgentClient.isActive(_.bind(function(isActive) {
                    if (!isActive) { // the update is "real"
                        if (updateDetails.urlChanged || !this.debugMode) {
                            // the user moved to another page/app/site or refreshed the page
                            // while not in debug mode
                            // => reload the panel to show the view for activating debugging
                            window.location.href = "";
                        } else {
                            // the update is a refresh while in debug mode
                            // => reinject the backbone agent to keep the debug mode running
                            this.restartAppInDebugMode();
                        }
                    }
                }, this));
            }
        }, this));

If it is reloading, then the following probably is passing (
https://github.com/Maluen/Backbone-Debugger/blob/master/js/panel/routers/Router.js#L29):

                        if (updateDetails.urlChanged || !this.debugMode) {
                            // the user moved to another page/app/site or refreshed the page
                            // while not in debug mode
                            // => reload the panel to show the view for activating debugging
                            window.location.href = "";
                        }

Debugging the debugger itself is not the best experience, but you might try to add some debugger statement and check what's going on when the page gets reloaded.

Just make sure to first undock the devtools and then press "ctrl+shift+i" (Windows) or "cmd+option+i" (Mac) to open another devtools instance that will inspect the first one!

—
Reply to this email directly or view it on GitHub.

[Andreyco]

Before I begin, from what I get from your post is that whenever the URL changes I have to relaunch application in debug mode. Right?
If so, CodeKit2 reloads (by true meaning) the page. To force refresh, it appends ckcachecontrol URL parameter (so that URL is in similar form http://localhost:5757/?ckcachecontrol=1422110159).
Might this be the origin of the problem?

[Maluen]

Exactly! The url changed and the reload is "true", i.e. the debugging code is gone from the page, so it assumes the app is not there anymore.

This is limiting in situations like yours or when you just jump to different urls that are still running the same application.

I'm thinking of making it always reinject, this way it will stay open wherever you go once you started it, as long as you reload the page by keeping the devtools open.

Then a "stop debug" button can be added in the options dropdown to stop it immediately.

[Andreyco]

Does having auto inject result into (noticable) performance impact?
I can say this would make debugging easier. Not just for me as Codekit2 user, but in general.

For now I switched to LiveReload cause I need this badly :-o

[Maluen]

No performance impact, it will just reinject even if you go from your app to random sites, but I think that's something we can pay.

Going to push this

[Andreyco]

Definitely!

Sent from my iPhone

On 27.1.2015, at 12:54, Maluen [email protected] wrote:

No performance impact, it will just reinject even if you go from your app to random sites, but I think that's something we can pay.

Going to push this

—
Reply to this email directly or view it on GitHub.

[Maluen]

Pushed, let me know if you face any bugs, still require more testing.

[Andreyco]

Works just fine! Awesome. Thank you a lot!

[Maluen]

Thanks for the feedback!

[Maluen]

I forgot to commit the stop debug mode dropdown button, my bad! Now is here ;)

[Andreyco]

👍

Installed from source.
Would you mind updating extension on Chrome Webstore?

[Maluen]

The project is currently not following semantic versioning, at least for now, a new update will be released when the current codebase is considered to have good stability and with a self-contained set of new features and/or improvements that justifies it.

However, the new update is close, but that really depends on how much it takes to complete the pending changes (lazy loading, style adjustments..)

[Maluen]

@Andreyco Version 0.3 is out to the chrome webstore: https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd

The intention is to ship new versions in the future as soon as new features / relevant bugfixes have been developed, etc. but prerequisite of this is to have a good testing environment that is missing right now.

[Andreyco]

Thank you a lot.
What do you mean by testing environment?

[Maluen]

@Andreyco I mean that we need a robust way to quickly spot regressions and for checking that everything works before releasing.

[Andreyco]

Some automated test, I get it. I have only brief experience with Jasmine testing framework.
Do you have any other suggestions?

[Maluen]

Is all still WIP, but we have an open issue for that: #30