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:

Then confirm that the documents are actually different:

Now dig deeper to find where the diff is:

And digging even deeper: There we go.