Skip to content

Commit cc30772

Browse files
committed
update devtools readme
1 parent 4ac8ad3 commit cc30772

File tree

2 files changed

+26
-54
lines changed

2 files changed

+26
-54
lines changed

Diff for: devtools/README.md

+26-54
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,26 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config({
16-
extends: [
17-
// Remove ...tseslint.configs.recommended and replace with this
18-
...tseslint.configs.recommendedTypeChecked,
19-
// Alternatively, use this for stricter rules
20-
...tseslint.configs.strictTypeChecked,
21-
// Optionally, add this for stylistic rules
22-
...tseslint.configs.stylisticTypeChecked,
23-
],
24-
languageOptions: {
25-
// other options...
26-
parserOptions: {
27-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
28-
tsconfigRootDir: import.meta.dirname,
29-
},
30-
},
31-
})
32-
```
33-
34-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35-
36-
```js
37-
// eslint.config.js
38-
import reactX from 'eslint-plugin-react-x'
39-
import reactDom from 'eslint-plugin-react-dom'
40-
41-
export default tseslint.config({
42-
plugins: {
43-
// Add the react-x and react-dom plugins
44-
'react-x': reactX,
45-
'react-dom': reactDom,
46-
},
47-
rules: {
48-
// other rules...
49-
// Enable its recommended typescript rules
50-
...reactX.configs['recommended-typescript'].rules,
51-
...reactDom.configs.recommended.rules,
52-
},
53-
})
54-
```
1+
# Infinite Table Developer Tools
2+
3+
In order to interact with Infinite Table DevTools, you need to have Infinite Table version >=7 installed
4+
5+
![main](./screenshots/main.jpg)
6+
7+
8+
Adds Infinite Table DataGrid debugging tools to the Chrome Developer Tools.
9+
10+
This extension allows you to interact with Infinite Table DataGrid instances (you need to have version >=7 installed) from your dev console.
11+
12+
You will get a new tab in your Chrome DevTools: "Infinite Table".
13+
14+
In this tab, you will see all your components that have the "debugId" prop set. Use this prop to decide which components you want to see in the devtools.
15+
16+
By selecting a component from the list in the sidebar, you will be able to interact with it, change it at runtime and see important debugging information:
17+
- you will see the logs, even if logging is not turned on via localStorage.debug='*'
18+
- you will be displayed important warnings about various misconfigurations
19+
- you will see debug timings - how much it took the DataSource to sort, group, filter and pivot the data
20+
- you will be able to interact with column visibility, grouping, sorting and more directly in your DevTools, and see info about the current state of the DataGrid.
21+
22+
This extension requires permissions to access the page's Infinite Table DataGrid component instances, but it does not send data remotely - everything happens locally in the browser.
23+
24+
For docs on Infinite Table, see https://infinite-table.com/
25+
26+
You can find the source-code of the extension at https://github.com/infinite-table/infinite-react/tree/master/devtools

Diff for: devtools/screenshots/main.jpg

179 KB
Loading

0 commit comments

Comments
 (0)