MVVM Open Source Framework knot.js Tutorial 2-Dramatically change the debugger of the front-end framework development experience

Knotjs Tutorial Series

1.CBS Preliminary

2.knot.js Debugger (This article)

.... Continue to increase in

Knot.js Tutorial 2-Changing the front-end framework development experience Debugger 

Debugger is just a handy tool for development, and it's not worth writing a single article for it, according to reason. But Knot.js's debugger definitely deserves an article.

A friend with a framework development experience must have had a lot of experience with frame wrestling. A small setup error, because you are not familiar with the framework, resulting in a complete failure to touch the brain. Or be forced to track down an attempt to find a problem in a bunch of unfamiliar code, or just surf the web and ask questions.

The debugger of knot.js can improve the problem to a great extent.

Often make CSS must be inseparable from the browser's own DOM Inspector Tool, it can view the status of the elements on the page and the application of CSS in real time, the debugging of CSS is very important

Knot.js's debugger, for CBS developers, has the same meaning as Dom inspector.

You can see what CBS applies to HTML elements at any time, monitor the latest data changes on every access point in real time, and view data change logs throughout the page. Using good debugger,knot.js is basically a white box system for you, and the internal work logic is sweeping.

Knot.js Debugger is not only useful for debugging programs, but also for learning knot.js. So I tutorial all the debugger in the Knot.js official website, and you can see the data and bindings of any example in real time. This is very helpful for understanding Knot.js's working mode.

To enable Knot.js Debugger in your own program, simply refer to the knot.js Debugger file:

<src= "[path_to_debugger]/knot.debug.js"></script >

After you enable debugger, you will find a green beetle icon in the lower right corner of the window and click on the icon to open the debugger window. The beetle icon changes and flashes when a warning message or error message is sent to the page with Knot.js. If there is no warning and error message, and the debugger window is already open, the icon disappears.

The debugger interface is as follows:

The information displayed is simple and you can understand it as soon as you try. Let's focus on the role of several functional controls:

• The top filter can be used to filter the nodes you want to monitor, and when you click on the Magnifier, only the nodes that contain the text are displayed in the tags/bindings option.
• After clicking the Position button next to the magnifying glass, you can click on your page to select an HTML element, and then only show this element when you select it.
• Funnel icon to clear current filter options
• When you click the light bulb icon behind an HTML element, the HTML element is highlighted.
• Click the Bubble button behind the HTML element to see the current DataContext of the element
• Click the Bubble button after the BIND option to view the JSON for the latest data for that element

If you are interested in knot.js, please follow me for a follow up update alert. At the same time please click on the recommended article, knot.js need enough attention to attract developers and build their own community.

Knot.js Thank you for your support.

MVVM Open Source Framework knot.js Tutorial 2-Dramatically change the debugger of the front-end framework development experience