This tools is very useful for developer to debug JET codes. And it supports JET 4.* syntax.
When we debug JET code, we can use knockout plugin, but it has below issues:
- Performance is bad. After we select one html element on page, it takes a long time to get the knockout binding result.
- It's not working when chrome cannot expand html element correctly when the page becomes too big. We cannot see the html body in chrome devtools even after browser refresh.
- Only observable value. It does not support unwrap value.
- It cannot should binding. Only shows context and data. For example:
<div data-bind="text: label, visible: visibleFlg">Country</div>
Developer wants to know the bindings like below:
{
text: 'text',
visible: true
}
But knockout plugin does not support it.
- It's only for knockout. We need to tool that we can debug JET code. Especially for JET CCAs and new JET 4.* syntax.
In the JET sidebar of under Elements tab, you can find bindings, context and data detail for both observable and unwrap values.
All APIs are under jetDebugger object.
jetDebugger.dataFor([selector])
It's used to return ko.dataFor.
- Select one html element in Elements tab of chrome devTools. call this function with no argument in the console.
jetDebugger.dataFor()
- Call this function with one argument. The argument is selector. For example:
jetDebugger.dataFor('oj-buttonset-one')
The binding data.
Same with jetDebugger.dataFor. But difference is that the function unwrap all observables.
jetDebugger.context([selector])
It's used to return ko.contextFor.
- Select one html element in Elements tab of chrome devTools. call this function with no argument in the console.
jetDebugger.contextFor()
- Call this function with one argument. The argument is selector. For example:
jetDebugger.contextFor('oj-buttonset-one')
The binding context.
Same with jetDebugger.contextFor. But difference is that the function unwrap all observables.
jetDebugger.getBindings([selector])
It's used to return the binding detail. It returns both knockout binding and JET binding. For JET binding, it supports JET attribute binding (e.g., :id, :style, :style.font-style)
- Select one html element in Elements tab of chrome devTools. call this function with no argument in the console.
jetDebugger.getBindings()
- Call this function with one argument. The argument is selector. For example:
jetDebugger.getBindings('oj-buttonset-one')
The bindings.
Same with jetDebugger.getBindings. But difference is that the function unwrap all observables.
jetDebugger.toJs(obj)
It's similar with ko.toJS to unwrap observables in the object. But in case recursive loopping, this function only loop 20 levels deep.
Pass in the object as the first parameter.
jetDebugger.toJs(obj)
The unwrapped object.
jetDebugger.inspect(obj)
It's similar with inspect function in chrome console. But chrome inspect does not support selector. For example, chrome support inspect(document.body)
, but does not support inspect('#testBtn')
Pass in the object as the first parameter.
jetDebugger.inspect(obj)
The inspected item.
- The jetDebugger variable is hardcoded. In future, provide a way to customize. It may have name conflict.
- Easy to:
- Search.
- Change value.
- Code format. Use ES6 syntax to import and export.