adobe/brackets — pull request #4643 by jasonsanjose (2013-08-02 22:18:45+00:00)
Title: Add debug mode to compare in-browser DOM

@njx @dangoor

Runtime debug mode to compare in-memory DOM with in-browser DOM.

In `HTMLDocument.onChange` add a conditional breakpoint `this._debug=true,false` to enable debugging.

Here's some example output when pasting in a new tag. I'm using the getting started content pasting the first `h2` immediately below itself on line 15:

```
# console output
Browser delta for change: {"from":{"line":14,"ch":8},"to":{"line":14,"ch":8},"text":["

This is your guide!

"],"removed":[""],"origin":"paste"} HTMLDocument.js:170
Object {parentID: 1, firstChild: true, type: "textDelete"} HTMLDocument.js:173
Object {parentID: 8, firstChild: true, type: "textDelete"} HTMLDocument.js:173
Object {parentID: 8, afterID: "175", type: "textDelete"} HTMLDocument.js:173
Object {parentID: 1, afterID: "8", type: "textDelete"} HTMLDocument.js:173
Object {type: "elementInsert", tagID: 234, tag: "div", attributes: Object, parentID: "8"…}
HTMLDocument.js:173
Object {type: "textInsert", tagID: "8", child: 52, content: "↵"} HTMLDocument.js:173
Object {parentID: "8", afterID: "175", type: "textReplace", content: "↵ ↵ ↵ ↵ ↵ "} HTMLDocument.js:173
Object {parentID: "8", afterID: "10", type: "textReplace", content: "↵ ↵ "} HTMLDocument.js:173
Object {parentID: "8", afterID: "42", type: "textReplace", content: "↵↵ ↵↵"} HTMLDocument.js:173
```

Some things to note:

* We use the same diff algorithm by basically taking the browser's `outerHTML` and treating it as the "new" tree. The editor state (after applying the doc changes) is used as the "old" tree.
* In the above output, you can see whitespace was lost somewhere along the way (see `lost-whitespace` below)
* The `elementInsert` delta is actually the HTML element highlight we add via `RemoteFunctions`
* The "code the web" ascii art at the bottom of the file get's reparented into the body
* The pasted `h2` tag isn't inserted as expected (see `paste-result`)

So...there's still some noise that we have to filter out to make this a friendlier experience. However, we might have legitimate issues here like handling comments.

```
# lost-whitespace-1
# in-editor

...

# in-browser

...

# lost-whitespace-2
# in-editor

GETTING STARTED WITH BRACKETS

This is your guide!

...

# in-browser

GETTING STARTED WITH BRACKETS

This is your guide!

...

# paste-result
# in-editor

This is your guide!

This is your guide!

...

# in-browser

This is your guide!

This is your guide!

...
```

Also

* Alternate jslint fix for while loop change
* Fix web inspector API doc bootstrap dependencies