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
- Open the Extension Management page by navigating to chrome://extensions.
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- 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
