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.init.target.surface.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.init.target.surface.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.init.target.surface.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.init.target.surface.model.documentModel.store.value("hfbe3cfe099b83e1e").element Object { type="textStyle/bold"}

Other items are represented directly: >>> ve.init.target.surface.model.documentModel.store.value("hb37b5f09f2873ef3") Array [p#mwBg]

>>> ve.init.target.surface.model.documentModel.store.value("hb37b5f09f2873ef3")[0].nodeName "P"

To get the contents of the entire store: >>> ve.init.target.surface.model.documentModel.store.hashStore Object {h8788854973ec964c: Array(1), h740d0af80b1c0698: Array(1), h2f86de084f98631e: VeDmBoldAnnotation, h2d984d4ad173adc5: Array(1), h5f73cafcc20ffbc0: Array(1), …}

To inspect HTML
To look at the raw, unmodified HTML that was retrieved from Parsoid: >>> ve.init.target.originalHtml

"<!DOCTYPE html>  Hello_world  Hello world! "

To look at this HTML parsed into a DOM tree: >>> d = ve.init.target.doc 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, run: >>> d2 = ve.init.target.getDocToSave Document >>> ve.init.target.getHtml( d2 ) "<!doctype html>   <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.