How to use dartium and other tools effectively to read / debug client side dart library?

Question

Motivation

Reading / understanding dart library to override / extend classes in dart-sdk.

barriers I see

• Dynamic method calls
  Eg

  appendChild_Callback_1_(mthis, __arg_0) => Blink_JsNative_DomException.callMethod(mthis, "appendChild",[__arg_0]);

  Debugger is useful. With async code, however, I imagine it could be hundreds of micro tasks loop later. Watch point or breakpoint based on a scope or function name possible?
  Or someone working on it? Or searching files with regex the only way?

• Javascript or native code
  Some part of dart depends on javascript or what looks like compile C and there I see an impenetorable wall:
  Eg

  _callMethod(String name, List args) native "JsObject_callMethod";

  Dartium's debugger won't go deeper.

What was I doing

I wanted to see how an HtmlElement's parent value is set when the element gets appended to another element. For optimization purpose, I guess it's handled by the browser side compiled C.

The questions

• Techniques
  Is there a better way than adding if("appendChild") == mthis) debugger(); to the library?
• what tools are available other than what's in dartium?
  Where can I find resources and tips if I wanted to dig deeper?
• When to give up?
  How can I get a general idea about what sort of things require diving into chromium source code? Or just have to try and see?

Answer 1

Breakpoints are somewhat limited, but when you see that callMethod(mthis, "appendChild", ...) in the _blink library that is precisely calling the JavaScript method appendChild with receiver mthis . And you'll see wrap_jso and unwrap_jso calls around it, which are removing or adding Dart wrappers to the underlying JavaScript objects. Since 1.14, (almost?) all the HTML calls in Dartium are done via JS Interop.

If you really want to know what the C code is doing in between, look for js_dartium.dart in the SDK checkout. But for most purposes it's enough to know that it's doing what it says and calling the JS. You can also set a breakpoint on the JS side in devtools and get through that way.

For techniques - you can set a breakpoint in the blink library or in html, but there aren't any meta-breakpoint facilities. You can also look at the non-minified dart2js output to see what's really going on, as it should be pretty similar. There aren't a lot of tools or resources available other than running Dartium or looking at the sources. sdk/tools/dom . Most of html_dartium and all of _blink is generated using Python Scripts from the Chrome IDL files.

To answer your original question - I'm pretty sure it's getting set in browser C code, called from JavaScript. Dart has nothing to do with it.