DevTools Notes

DOM Inspector customized sidebar.md

Angular-baratang:

• Chrome Addon:

  • https://github.com/angular/angularjs-batarang/blob/master/js/devtoolsBackground.js

• Firefox Port:

  • https://github.com/rpl/angularjs-batarang/blob/prototype/firefox-devtools-port/firefox/lib/devtool-panel.js#L35

function registered to the sidebar and execute in the inspected window context:

function () {
  if (window.angular && $0) {
    ...
  }
}

• javascript expressions evaluated by the webconsole can access the DOM element currently selected in the DOM inspector tool as $0 (and this is already true on chrome and firefox integrated webconsole tools

Object Inspector JEP notes.md

inspectors.Rule:

• filter method should be executed in the inspected window context (as the registered DOM Inspector custom expression), e.g.

...
  filter: function(obj) {
    return (obj instanceof Ember.Controller);
  }
...

• inspect method has the same responsability of the DOM Inspector custom expression (and it should be executed on the remote side as well, so it doesn't need to manipulate object grips, the conversion into object grips will be automatically executed on the inspect result value by the actor which handles the request, e.g. the webconsole actor)

...
  inspect: function(obj) {
    // this is an ember controller, add the computed properties in the customize the inspect result the attributes
    let view = {};
    ....
    return view;
  }
...

• the other handlers probably needs to execute javascript expressions on the remote inspected window context as well (e.g. using the remote webconsole actor and the object grip), the increased complexity (e.g. learning curve for the addon developer) due to the object grip manipulations can be abstracted/simplified using the JS Proxy API.