logo

X6

  • Tutorials
  • API
  • Examples
  • Q&A
  • Change Log
  • XFlow
  • Productsantv logo arrow
  • 2.x
  • Introduction
  • Quickstart
  • Basic
    • Graph
    • Nodes
    • Edges
    • Connection Pile
    • Interaction
    • Events
    • Data Serialization
  • Intermediate
    • Connection Points
    • Tools
    • Group
    • React Nodes
    • Vue Nodes
    • Angular Nodes
    • HTML Nodes
  • Plugin
    • Graphic Transformations
    • Snapline
    • Clipboard
    • Keyboard
    • History
    • Selection Box
    • Scroller
    • Dnd
    • Mini Map
    • Stencil
    • Export
  • Upgrade to Version 2.x
  • Developer Tools

Developer Tools

Previous
Upgrade to Version 2.x

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

We provide a plugin for inspecting page elements to help developers more easily develop applications.

Installation

image

Usage

First, initialize in your project code:

// init window hook
window.__x6_instances__ = []
const graph = new Graph({ ...blablabla })
window.__x6_instances__.push(graph)

Then you can see the AntV X6 section in the developer panel.

image

Here, we can inspect the graph object and the elements within the graph:

image

It also supports modifying element properties:

image