How do you debug your knockout.js binding expressions?

Question

I like the KO framework, but debugging is sometimes just a nightmare for me. In the case of regular javascript code, I can set a breakpoint and go there at runtime and see what is wrong, but how to debug knockout expressions? In most cases, binding errors are the result of the absence of any character or incorrect syntax, and sometimes a knockout shows me obvious errors regarding this problem, but sometimes not, the expected data simply does not appear on the page, or error messages such as a “binding expression” not like that ", even messages like" abc function not found "do not allow me to immediately understand what happened, because I don’t know what level of runtime of my KO model passes. Ideally, there should be a browser plugin that allows you to place breakpoints or something in any KO expression and see the context with which it works at run time. Anything like this on the market or expected? Any ideas on improving the debugging process?

Answer 1

During development, I use debug versions and set a breakpoint for the createBindingsStringEvaluator() function (line 1858 in version 2.1). Therefore, before the bindings are “analyzed”, you can analyze the expression that will be evaluated, find out which bindings fail, their context, and you can go through the binding process so that you can go all the way until it will end.

To minimize problems for very complex bindings, especially if you need to repeat them, I would consider creating some custom binding handlers that can immediately apply a set of bindings.

Answer 2

In the current version (v 3.4.1), the function is called parseBindingsString . By installing debugger or console.log , you will get some information.