adobe-research / theseus

A pretty darn cool JavaScript debugger for Brackets
Other
1.34k stars 69 forks source link

Custom serialization [feature request] #22

Closed vojtajina closed 11 years ago

vojtajina commented 11 years ago

The Theseus log for instance displays HTML elements as [object Text] and [object HTMLDivElement] etc... It would be great to allow custom serialization of objects.

alltom commented 11 years ago

It actually just uses toString():

try { o.preview = String(val) } catch (e) { o.preview = "[Object]" }

(My computer died and I'm on a loaner so I can't verify this immediately, but if that turns out not to be true, please let me know. :)

Reopen this ticket if that doesn't help you.

vojtajina commented 11 years ago

For anybody who find this issue, this works:

var originalString = window.String;

window.String = function(value) {
  if (value && value.outerHTML) {
    return originalString(value.outerHTML);
  }

  // ...

  return originalString.apply(this, arguments);
};

String.prototype = originalString.prototype;
String.fromCharCode = originalString.fromCharCode;

That said, better serialization of inspected objects is crucial, I still think this should be much easier and the default serialization should be much better.

alltom commented 11 years ago

Thanks for the code! It's probably simpler to override toString() directly, though:

HTMLElement.prototype.toString = function () { return "I'm a DOM node!" };
console.log(String(document.body)); // "I'm a DOM node!"

Can you give me an idea of the type of custom serialization you're interested in? What information would you like to be included by default that would make it better? I have no problem adding special cases for common objects, but I don't have an idea of what you're expecting to see.

vojtajina commented 10 years ago

Well, I gave an example of HTML node, but it does not have to be a HTML node. For instance jQuery wrapper - you wanna show the html (maybe with some mark that it's a jq wrapper; but showing an array with a single item, that I need to unwrap to see it is pain).

Another example - I was debugging AngularJS compiler and many of the debugged objects were angular directives. Showing them as a regular object where I need to click to see all the properties is mess+pain, so I wanted to serialize these in my way, for instance showing "ng-model directive" which tells me enough in my context.

In general it can be any custom object.