Validate the Schema
The first step to debugging a problem with Vega-Lite is to make sure that the specification is valid. The Vega Editor shows warnings if the schema has a valid
$schema reference and the specification is not valid according to the schema for the version specified in the
$schema. Make sure that you are using the version that is provided by the editor if you see inconsistent behavior.
Debug Vega Runtime
Vega-Lite specifications compile to Vega and are executed by the Vega runtime. This means that at runtime there is no difference between a chart that comes from a Vega-Lite specification and a chart that comes from the compiled Vega specification. Therefore, to debug runtime behavior, you have to understand the behavior of the Vega runtime. Follow the debugging guide in the Vega documentation to debug the Vega runtime.
Step Through the Execution
When debugging Vega and Vega-Lite in the browser, it can be useful to step through the execution in the Firefox, Chrome, or Safari developer tools.
For example, to use non-minified sources with Vega-Embed, load the following scripts.
<script src="https://firstname.lastname@example.org/build/vega.js"></script> <script src="https://email@example.com/build/vega-lite.js"></script> <script src="https://firstname.lastname@example.org/build/vega-embed.js"></script>
The Vega Editor automatically collects and displays logs. If you are debugging your own application and see strange behavior, look at the logs from Vega-Lite.