how do you use the devtools

devtool setup?

2 Replies

kapa.ai•11mo ago

Hi @Pops. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the Refine devtools in your application, you can follow these steps for installation and usage: Installation You have two options for installing the devtools: using the CLI or manually. - Using CLI: The CLI provides a command to install and set up devtools for you. Run the following command in your terminal:

npm run refine devtools init

npm run refine devtools init

- Manual Installation: If you prefer to install it manually, run the following command:

npm i @refinedev/devtools

npm i @refinedev/devtools

Usage If you've used the CLI command to install devtools, the following steps are handled automatically, and you can skip this section. Otherwise, to manually use devtools in your application, you need to wrap your component with the DevtoolsProvider component. Additionally, if you want to show the devtools panel in the UI, you can add the DevtoolsPanel component inside your app. Here's how you can do it:

import { Refine } from "@refinedev/core";  
import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";  
  
const App = () => {  
 return (  
 <DevtoolsProvider>  
 <Refine  
 // ...  
 >  
 {/* ... */}  
 <DevtoolsPanel />  
 </Refine>  
 </DevtoolsProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";  
  
const App = () => {  
 return (  
 <DevtoolsProvider>  
 <Refine  
 // ...  
 >  
 {/* ... */}  
 <DevtoolsPanel />  
 </Refine>  
 </DevtoolsProvider>  
 );  
};

Remember, Refine devtools are designed to assist you during the development of your Refine apps. They offer features like monitoring queries and mutations, inspecting queries made by your components, and updating your dependencies with a single click. However, it's important to note that devtools will only work in development mode and will not be included in your app's bundle in production, ensuring no impact on your app's performance. For more detailed information, you can refer to the Using Devtools (https://refine.dev/docs/guides-concepts/development#using-devtools) section in the Refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@184452259327770625> kapa.ai is still learning and improving, please let us know how it did by reacting below

how do you use the devtools

Did you find this page helpful?