VisualEditor/Debugging

This page documents some helpful commands you can type into the console to investigate bugs in VisualEditor. Eventually, we should build a kind of debugging utility that makes this less necessary.

Inspecting the linear model
To inspect the linear model data: >>> ve.instances[0].model.documentModel.data.data [Object { type="paragraph", internal={...}}, "H", "e", "l", "l", "o", " ", ["w", [0]], ["o", [0]], ["r", [0]], ["l", [0]], ["d", [0]], "!", Object { type="/paragraph"}, Object { type="internalList"}, Object { type="/internalList"}]

To inspect the metadata: >>> ve.instances[0].model.documentModel.metadata.data [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, [Object { attributes={...}, type="mwCategory"}]]

To get the interleaved data+metadata: >>> ve.instances[0].model.documentModel.getFullData [Object { type="paragraph", internal={...}}, "H", "e", "l", "l", "o", " ", ["w", [0]], ["o", [0]], ["r", [0]], ["l", [0]], ["d", [0]], "!", Object { type="/paragraph"}, Object { type="internalList"}, Object { type="/internalList"}, Object { attributes={...}, type="mwCategory"}, Object { type="/mwCategory"}]

To inspect the store
Note that annotated characters are represented as  where 0 is a store index. To get the annotation for a given store index: >>> ve.instances[0].model.documentModel.store.value(0).element Object { type="textStyle/bold"}

To get the contents of the entire store: >>> ve.instances[0].model.documentModel.store.valueStore [VeDmTextStyleBoldAnnotation { element={...}, name="textStyle/bold", getComparableObject=function, more...}]

To inspect HTML
To look at the raw, unmodified HTML that was retrieved from Parsoid: >>> ve.init.mw.targets[0].originalHtml

"<!DOCTYPE html>  Hello_world  Hello world! "

To look at this HTML parsed into a DOM tree: >>> d = ve.createDocumentFromHtml(ve.init.mw.targets[0].originalHtml) Document >>> d.body  >>> d.body.outerHTML "<p data-parsoid="{&quot;dsr&quot;:[0,18,0,0]}">Hello world</b>! "

To look at the HTML that would be sent back to Parsoid if the user were to save the current document: >>> doc = ve.instances[0].model.documentModel VeDmDocument { bindings={...}, documentNode={...}, internalList=VeDmInternalList, more...} >>> d2 = ve.dm.converter.getDomFromData(doc.getFullData, doc.getStore, doc.getInternalList) Document >>> d2.body.outerHTML " <p data-parsoid="{&quot;dsr&quot;:[0,18,0,0]}">Hello world</b>! "

DOM diffing
This is done to investigate corruption warnings. Open up the editor without making any changes, then get HTMLDocuments for the ingoing and outgoing HTML: >>> d = ve.createDocumentFromHtml(ve.init.mw.targets[0].originalHtml) Document >>> doc = ve.instances[0].model.documentModel VeDmDocument { bindings={...}, documentNode={...}, internalList=VeDmInternalList, more...} >>> d2 = ve.dm.converter.getDomFromData(doc.getFullData, doc.getStore, doc.getInternalList) Document

Then confirm that the documents are actually different: >>> d.body.isEqualNode(d2.body) false

Now dig deeper to find where the diff is: >>> for ( i = 0; i < d.body.childNodes.length; i++) { if ( !d.body.childNodes[i].isEqualNode(d2.body.childNodes[i]) ) { console.log(i); } } 2 >>> d.body.childNodes[2] <p data-parsoid="{"dsr":[73,139,0,0]}"> >>> d2.body.childNodes[2] <p data-parsoid="{"dsr":[73,139,0,0]}">

And digging even deeper: >>> for ( i = 0; i < d.body.childNodes[2].childNodes.length; i++) { if ( !d.body.childNodes[2].childNodes[i].isEqualNode(d2.body.childNodes[2].childNodes[i]) ) { console.log(i); } } 1 >>> d.body.childNodes[2].childNodes[1] <link data-parsoid="{"stx":"simple","a":{"href":"./Category:Foo"},"sa":{"href":"Category:Foo"},"dsr":[85,101,null,null]}" href="./Category:Foo" rel="mw:PageProp/Category"> >>> d2.body.childNodes[2].childNodes[1] <link rel="mw:WikiLink/Category" href="./Category:Foo" data-parsoid="{"stx":"simple","a":{"href":"./Category:Foo"},"sa":{"href":"Category:Foo"},"dsr":[85,101,null,null]}"> There we go.