A chrome dev tool for @antv/g 1.0+ version

by React

G Devtool

A devtool for @antv/g in chrome, it’s still WIP, you can load it in unpack way;

Quick Start

Import unpacked plugin

  1. Open the Extension Management page by navigating to chrome://extensions.
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  3. Click the Load unpacked button and select the ‘devtool’ directory.

Connect with G Canvas;

In Native G Usage

// init window hook
window.__g_instances__ = [];

var canvas = new Canvas({...blablabla});

window.__g_instances__.push(canvas);

In G6

// init window hook
window.__g_instances__ = [];

var canvas = graph.get("canvas");

window.__g_instances__.push(canvas);

In G2

// init window hook
window.__g_instances__ = [];

var canvas = chart.canvas;

window.__g_instances__.push(canvas);

In S2

window.__g_instances__ = [];

// in native 
var canvas = spreadSheet.container;

window.__g_instances__.push(canvas);


// in S2 react
<SpreadSheet
  {...blablabla}
  getSpreadSheet={(sp) => {
            window.__g_instances__ = [sp.container]
          }}
          />

Using devtool

After these steps, the tab ‘AntV G’ should show in devtools’ tab, select it and choose a canvas

Features

Inspect Element in Canvas

View and Modify Attributes of Element

Using select element directly in canvas

GitHub

View Github