Nowadays, no one wants to wait for anything. Everyone wants a quick result. And immediate results either stem out of personal expertise or by hiring expert Magento developers. Magento 2 introduces the Knockout js, which is one of the critical factors in page loading speed.

What Is Knockout JS?

Knockout JS is a JavaScript library that helps to create responsive displays and an easy user interface. If you have sections of UI that update dynamically, KnockOut may help you implement those sections quickly.

As of now, Magento just implemented Knockout Js in the mini cart and checkout section, but we can also enhance the component and use JS layout in our custom sections.

Here we will discuss the different strategies of debugging the knockout JS errors

1) Binding Errors

This is the most common error we face while binding data using js components in the layout file. You encounter this error might be due to wrong data binding or incorrect syntax. There are several ways to overcome this error. But the challenging task is to identify which data are being used for binding or which component is used for the binding.

One of the fastest ways is to use the “pre” tag. Knockout js has its function called “ko.toJSON”. This function will first create the Javascript object, and then it will convert all the KO variables into the normal variables. You can apply pre tag like this.

<pre data-bind=”text: ko.toJSON($bindingData, null, 2)” />

“Ko.json” is the same as “JSON.stringify,” so you can also use the “JSON.stringify” as well. This method is also useful to know the data of context variables. For example, rather than “$bindingdata,” you can use $parent, $root, etc. as well.

This function will give you output in JSON format like below

{

“data”:

[

   {

     “id”: 1,

     “name”: “Knockout Item 1”

},

   {

     “id”: 2,

     “name”: “Knockout Item 2”

   }

]

}

This is not over here. There is an alternate option for the pre tag also. You can also use the “console.log()” in your data binding. Here is the syntax for the same

<div data-bind=”blah: console.log($bindingdata)”>

2) Failed To Load Component

While implementing the Knockout js section, you might have seen the error in loading components. The js file shows status code 404. There are multiple ways you can include the JS component. So it depends on how you have implemented the JS.

Include js Using XML Layout

You need to mention the vendor name and module name while adding js. Here is the syntax for XML layout

<item name=”component” xsi:type=”string”>VENDOR_MODULE/js/view/JSNAME</item>

Ensure you have placed your js file in the correct path and the vendor and module name are valid in the XML layout.

Include from Phtml

<script type=”text/x-magento-init”>

      {

          “[SCOPE]”: {

              “VENDOR_MODULE/js/view/JSNAME”: {}

          }

      }

  </script>

If you are loading components using phtml, the pattern for the file path will remain the same. You just need to make sure of the scope of the element. This is an alternate solution, but I will recommend using the layout structure.

3) Debug With Chrome DevTools

All the latest browsers support a debugging tool to find and fix errors more easily. Let’s consider you are using the chrome browser. Follow the below steps to use debugging tools.

  • Open your web page in chrome browser
  • Right-click and click on inspect element or press F12
  • Click on the sources tab
  • Open your loaded file using Ctrl + P

Here you can open all the Javascript files and HTML files. You can also add a breakpoint in the file. A breakpoint is the line of code that allows you to pause the script execution and debug the code. Once you set the breakpoint to refresh the page. Your script execution will pause when you reach the breaking point.

4) Undefined Variable

This is another most common issue after binding. When you bind the property of a variable that is not defined in the component, then it will show the error of an undefined variable. You can trace this error from the browser console and also check the related component path as well.

It might be possible that you have already defined the variable in the component, and still, you can not access that variable in the template file. There is a case when you are playing inside the loop or any function. To use the variable, you need to use $parent property.

<span data-bind=”text: $parent.yourvariable”>

Final Notes

Knockout js the javascript library, so you need to be careful when finding any exceptions in components while debugging and fixing those errors. If knockout js finds any exception at the starting, it will not render the complete section. The best practice is to use the try and catch inside your component. In case you want help to troubleshoot knockout JS in Magento 2, you can connect with our team to hire Magento developers. Also, knockout js will always throw an exception from the core library. I strongly do not recommend debugging the core library.

In case you need help troubleshooting or something else Magento-related, then get in touch with us!