Debugging using Gad Domnit
CodeMirror has a rendering issue if it's initialized inside a container with display: none;. In dynamic sites which change the visibility of a <div>, this rendering issue might be hard to replicate.
The <iframe> on the right demonstrates this property. 50% of the time, CodeMirror is initialized inside
an invisible <div>, which is then made visible. Otherwise, the <div> is made visible before
CodeMirror is initialized. Click below to reload the <iframe>.
When CodeMirror loads properly, the editor is visible, with line numbers to the left.
However, when CodeMirror's container is made visible after load, the screen is white.
Clicking on the white <div> will make the editor appear, but the line numbers cover the first few
characters of the editor.
Domnit enhances the bug report
by including inspectable output, instead of just a screenshot. Gad Domnit produced the content below from the examples above. From the dynamic script, Domnit captured a static HTML representation of exactly what was on screen, allowing the bug report to be repeatable.
Properly loaded output
This output is a static snapshot in time. It looks identical to the iframe above, but has none of the
CodeMirror scripts or stylesheets included.
Improperly loaded output
Display Full OutputComparable output
The HTML generated above is compared, and will be displayed below. The improperly loaded CodeMirror is displayed in red, while the correct output is in green. This output could be used to debug CodeMirror's internals, see if our program using CodeMirror has issues, or write unit tests checking the computed values to see how often these rendering issues occur.