How do you debug your knockout.js binding expressions?

Question

I like KO framework, however debugging is sometimes just a nightmare for me. In case of regular javascript code I can put a breakpoint and go there at runtime and see what's wrong, but how to debug knockout expressions? In the most cases bindings errors are result of missing some symbol or wrong syntax, and sometimes knockout shows me clear errors regarding the issue, but sometimes not, expected data just not appeared on the page, or error messages like 'binding expression is wrong', even messages like 'function abc is not found' does not let me understand immediately what's wrong as I do not know which level of my model KO runtime is going through at the moment. Ideally there should be a browser plugin letting put breakpoints or something at any KO expression and see the context it running with at runtime. Is anything like this is on the market or expected? Any ideas regarding improving debugging process?

Answer 1

During development, I use the debug versions and set a breakpoint on the function createBindingsStringEvaluator() (line 1858 in v2.1.0). So just before the bindings are "parsed," you can analyze the expression that would be evaluated, find out which bindings fail, their context and you could step through the binding process so you can walk through all the way until it fails.

To minimize problems for very complicated bindings, especially if they need to be repeated, I'd consider creating some custom binding handlers that can apply a set of bindings at once.