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.


To use devtools, you need to set the enableDevtools option when creating the Document.

1const doc = new yorkie.Document('docKey', {
2 enableDevtools: true, // Adjust the condition according to your situation
Please note that the devtools is available only in yorkie-js-sdk version 0.4.18 or later.

Key Features

Within the Yorkie 🐾 panel, you will find the History panel at the top, the Document panel at the bottom left, and the Presence panel at the bottom right.

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.

History pane

Event TypeDocumentPresence
Local Changeobject iconobject icon
Remote Changeobject iconobject icon
  • Observe events occurring within the document.
    • Local changes are highlighted in yellow, remote changes in blue, presence changes are represented by cursor icons and document changes are indicated by document-shaped icons.
  • Easily debug through time-travel and replay.
    • Move the slider and click on an event to check event details and see how the document has changed.
    • Convenient navigation is possible using the arrow buttons at the top right or using the directional keys.