Debugger "Waiting for Backbone..." indefinitely

[michaelcarter]

Hi all,

The debugger doesn't seem to start properly on a backbone site I work on. I've found an error occurring in the console when inspecting the debugger itself, but before I spend hours trying to figure out what's wrong I figured I'd post it here unless someone else has solved a similar issue before.

The site I'm trying to debug a search site for airport hotels and parking, an example product search is: https://v2.holidayextras.co.uk/?agent=WEB1&ppcmsg=#carpark?arrive=&customer_ref=&depart=LGW&flight=TBC&in=2015-03-08&out=2015-03-01&park_from=07%3A00&park_to=07%3A00&term=&terminal=

It's very backbone heavy, but doesn't seem to big that it should cause the debugger to break - I've had it working before intermittently.

The error I'm getting when loading the debugger is:

This issue manifests itself as the debugger "Waiting for Backbone..." indefinitely. If there's a simple fix I might be able to get a pull request worked up this week during work hours, otherwise it'll have to be something I do in my own time.

[Maluen]

I'm not getting your extension server error and exception, but they seem related with trying to evaluate code on a page frame with a given url, this is done the first time on inspector start to check if the backboneAgent has already been injected: https://github.com/Maluen/Backbone-Debugger/blob/master/js/panel/backboneAgentClient.js#L50

The page could contain some "unusual" frame for which no main execution context can be found, as you can see on https://code.google.com/p/sandrop/source/browse/projects/SandroProxyWeb/chrome_devtools_src/inspector_chrome_build/ExtensionServer.js?name=1_5_96_external_intents#917

Moreover, Backbone is stored as a global object (window.Backbone) and the backboneAgent detected it, as you can see by evaluating "window.__backboneAgent.isBackboneDetected" on the console.
It also detected components, as you can see by evaluating for example "window.__backboneAgent.appComponentsInfos['View']"

Is a problem of communication with the panel, checking..

[Maluen]

Basically was a problem with calculating the url of a frame:

chrome devtools uses the original frame url WITHOUT an eventual hash string, while the content script was using the full href, hence they were not able to communicate.

Let me know if you encounter any other issue

[Maluen]

Note: remember to reload the extension by clicking on the "Reload" button from chrome://extensions/ since the change was to the content script.

[michaelcarter]

That commit fixes the issue completely, fantastic, thanks @Maluen.

[burmester]

I still have this problem...updated to 0.3.0.
I do get my views from "window.__backboneAgent.appComponentsInfos['View']" but the chrome dev-tool do not show them, it only says "Waiting for inspected page loading..."

[Maluen]

@burmester is it possible for you to include some code to reproduce the issue or just post a link to the application?

There might be some other edge case with the frame url calculation.

[burmester]

This is a very minimized code, but i still gets the error?

Anything else you might need?

init.js

define(function(require) {
    "use strict";

    var _ = require('underscore'),
        Backbone = require('backbone'),
        template = require('tpl!apps/assignments/templates/teacherMentorAdminAssignments'),

        Assignments = Backbone.View.extend({
            initialize: function(options) {
                this.assignments = options.assignments;
            },

            render: function() {
                this.$el.html(template({assignments: this.assignments.toJSON()}));
                return this;
            }
        }),

        AssignmentCollection = Backbone.Collection.extend({
            model: Backbone.Model.extend({
                defaults: {
                    "title": "",
                    "type": "Inlämning",
                    "description": "",
                    "deadline": ""
                }
            }),

            initialize: function(collection, options) {
            },
            fetch: function(options) {
                return $.Deferred().resolve().promise();
            },
        }),

        data = [{
            "id": 122350,
            "created": "2015-05-18",
            "title": "atte",
            "description": "",
            "type": "Inlämning",
            "tags": [{"id": 303257340, "title": "Engelska", "abbreviation": "En", "type": "curriculum"}, {
                "id": 303257749,
                "title": "Matematik",
                "abbreviation": "Ma",
                "type": "curriculum"
            }],
            "owner": {"id": 27759, "name": "Emma Emmasson"},
            "assignedTo": [27759]
        }, {
            "id": 122359,
            "created": "2015-05-18",
            "title": "shoow!",
            "description": "",
            "type": "Inlämning",
            "tags": [{"id": 303257213, "title": "Bild", "abbreviation": "Bl", "type": "curriculum"}, {
                "id": 303257749,
                "title": "Matematik",
                "abbreviation": "Ma",
                "type": "curriculum"
            }],
            "owner": {"id": 27759, "name": "Emma Emmasson"},
            "assignedTo": [27759]
        }, {
            "id": 122368,
            "created": "2015-05-18",
            "title": "asdf",
            "description": "",
            "type": "Inlämning",
            "tags": [{"id": 303260502, "title": "Teknik", "abbreviation": "Te", "type": "curriculum"}],
            "owner": {"id": 27759, "name": "Emma Emmasson"},
            "assignedTo": [27759]
        }];


    $(document).ready(function() {
        var assignmentsCollection = new AssignmentCollection(data),
            assignmentsView = new Assignments({
                assignments: assignmentsCollection,
                el: $('#uppgifter #app')
            });

        new (Backbone.Router.extend({
            routes: {
                "(/)": "assignments",
                "assignments": 'assignments',
            },
            assignments: function() {
                var assignmentsPromise = assignmentsView.assignments.fetch({remove: false}),
                    self = this;
                $.when(assignmentsPromise).then(function() {
                    assignmentsView.render();
                });
            }
        }))();


        Backbone.history.start();
    });
});

template.tpl

<ul class="uk-item-list">
    {[ _.each(assignments, function(assignment, i) { ]}
    <li class="uk-item">
        <button class="btn btn-danger pull-right deleteMe" data-id="{{assignment.id}}">Ta bort</button>
        <a href="#answers/{{assignment.id}}">
            <span class="title">{{ assignment.title }}</span>
        </a>
    </li>
    {[ }); ]}
</ul>

[Maluen]

@burmester I loaded and served your code on localhost.
With current master version and with 0.3.0 snapshot components are displayed:

Thus probably the problem here is with the URL used to access the application.
Can you provide an example of the URL structure you're using? Eg host, path, hash, parameters and so on.

[burmester]

http://localhost:8080/unikum/uppgifter/uppgifter.html?__pid=27751
and when you go down a bit in the the app:
http://localhost:8080/unikum/uppgifter/uppgifter.html?__pid=27751#answers/122430/27756

We other Backbone apps and they work fine in the debugger:
https://skolbanken.unikum.net/unikum/skolbanken

To bad this is part is under development and secure behind passwords..

Sorry for all the Swedish language ;)

[burmester]

I have even tried this, and can't get it to work..

define(function(require) {
    var Backbone = require('backbone'),
        Assignments = Backbone.View.extend({
            render: function() {
                $('body').html("<div>hello world</div>");
            }
        }),
        AssignmentCollection = Backbone.Collection.extend({
            model: Backbone.Model.extend({
                defaults: {
                    "title": "",
                }
            }),
        }),
        data = [{
            "title": "atte",
        }];

    $(document).ready(function() {
        var assignmentsCollection = new AssignmentCollection(data),
            assignmentsView = new Assignments();
        assignmentsView.render();
        Backbone.history.start();
    });
});

[burmester]

okej! I have found the problem; in our dev-env. we use this code-snippit:

  <!--[if !IE]>-->
        <link rel="stylesheet/less" media="all" href="<c:url value="/less/unikum.less"/>">
        <script>
            less = { logLevel: 1 }; // make it shut up
        </script>
        <script src="<c:url value="${jsPath}/vendor/less.js/dist/less.js"/>"></script>
        <!--<![endif]-->

and the parts that breaks it is:

less = { logLevel: 1 }; // make it shut up

[Maluen]

@burmester any update on that?