DevTools is a Chrome extension that can be used when developing with Yorkie. It visualizes Yorkie data, allows inspection, and enhances your development experience.

Install the extension

To get started, simply download the extension from the Chrome Web Store.

Once installed, you'll find the Yorkie🐾 panel within Chrome Developer Tools.

Please note that the devtools is available only in yorkie-js-sdk version 0.4.13 or later for development builds.

Key Features

Within the Yorkie 🐾 panel, on the left, you will see the Document pane, and on the right, there is the Presence pane.

Document pane

  • Visualize the rootObject structure that you have defined in document.
  • CRDT insights:
    • Clearly display data types for each CRDTElement using intuitive icons and informative tooltips.
      • object icon : object, array icon : array, text icon : text, tree icon : tree, counter icon : counter, primitive icon : primitive
    • Click on any CRDTElement to see datatype-specific details tailored to your debugging needs.
  • View Options:
    • By default, enjoy a JSON view for quick analysis.
    • Explore tree data types with a graph view, offering a deeper understanding of the data structure.

Presence pane

  • Represent clients participating in the document.
  • Access detailed data with a simple click.