Coder Social home page Coder Social logo

chromeextensions-jet-devtools's Introduction

JET DevTools

This tools is very useful for developer to debug JET codes. And it supports JET 4.* syntax.

Sidebar

Overall

Overview

Background

When we debug JET code, we can use knockout plugin, but it has below issues:

  1. Performance is bad. After we select one html element on page, it takes a long time to get the knockout binding result.
  2. 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.
  3. Only observable value. It does not support unwrap value.
  4. 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.

  1. It's only for knockout. We need to tool that we can debug JET code. Especially for JET CCAs and new JET 4.* syntax.

JET Sidebar

In the JET sidebar of under Elements tab, you can find bindings, context and data detail for both observable and unwrap values.

API

All APIs are under jetDebugger object.

jetDebugger.dataFor

Syntax

jetDebugger.dataFor([selector])

Description

It's used to return ko.dataFor.

Usage:

  1. Select one html element in Elements tab of chrome devTools. call this function with no argument in the console.
jetDebugger.dataFor()
  1. Call this function with one argument. The argument is selector. For example:
jetDebugger.dataFor('oj-buttonset-one')

Return value

The binding data.

jetDebugger.dataForToJs

Same with jetDebugger.dataFor. But difference is that the function unwrap all observables.

jetDebugger.contextFor

Syntax

jetDebugger.context([selector])

Description

It's used to return ko.contextFor.

Usage:

  1. Select one html element in Elements tab of chrome devTools. call this function with no argument in the console.
jetDebugger.contextFor()
  1. Call this function with one argument. The argument is selector. For example:
jetDebugger.contextFor('oj-buttonset-one')

Return value

The binding context.

jetDebugger.contextForToJs

Same with jetDebugger.contextFor. But difference is that the function unwrap all observables.

jetDebugger.getBindings

Syntax

jetDebugger.getBindings([selector])

Description

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)

Usage:

  1. Select one html element in Elements tab of chrome devTools. call this function with no argument in the console.
jetDebugger.getBindings()
  1. Call this function with one argument. The argument is selector. For example:
jetDebugger.getBindings('oj-buttonset-one')

Return value

The bindings.

jetDebugger.getBindingsToJs

Same with jetDebugger.getBindings. But difference is that the function unwrap all observables.

jetDebugger.toJs

Syntax

jetDebugger.toJs(obj)

Description

It's similar with ko.toJS to unwrap observables in the object. But in case recursive loopping, this function only loop 20 levels deep.

Usage:

Pass in the object as the first parameter.

jetDebugger.toJs(obj)

Return value

The unwrapped object.

jetDebugger.inspect

Syntax

jetDebugger.inspect(obj)

Description

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')

Usage:

Pass in the object as the first parameter.

jetDebugger.inspect(obj)

Return value

The inspected item.

Future Changes

  • 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.

chromeextensions-jet-devtools's People

Contributors

wenlz123 avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.