wise-white•5mo ago

Refine DevTools not working

Hello! I've tried doing my homework before asking this question. But I can't seem to get the Refine DevTools working: - I've upgraded to the latest Refine packages (including DevTools) - I've wrapped my Refine component in DevtoolsProvider and added DevtoolsPanel to my app - I'm starting the dev server with refine dev NOT refine start - The refine dev server is running on port 5173 - The refine devtools server is running on port 5001 ( default) - No Devtools panel is appearing in my refine app - The Refine Devtools server says No app connected I just want to preview my Tanstack Query queries and inspect the generated query keys, but I have to hop through these hoops now that the Tanstack Query devtools were removed from Refine. Thank you!

21 Replies

kapa.ai•5mo ago

Hi @Millerbyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear that you're having trouble with Refine DevTools. Based on the information you've provided and the extracts I have, here are a few things you can try: 1. Check your installation: Make sure you've installed the DevTools correctly. You can install it using the following commands:

npm run refine devtools init
npm i @refinedev/devtools

npm run refine devtools init
npm i @refinedev/devtools

And then wrap your Refine component with DevtoolsProvider and add DevtoolsPanel to your app like this:

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>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/guides-concepts/development#using-devtools)) 2. Check your environment: There have been issues reported where DevTools cannot be used outside of localhost (Github Issue #5111 (https://github.com/refinedev/refine/issues/5111)). If you're running your development in Docker containers or similar environments, this might be the issue. 3. Check for conflicts: There have been issues reported where the application does not start after installation due to port conflicts (Github Issue #5215 (https://github.com/refinedev/refine/issues/5215)). Make sure that the ports 5173 and 5001 are not being used by other services. 4. Try disabling and re-enabling DevTools: As a last resort, you can try disabling the DevTools server by using the parameter npm run refine dev -- --devtools=false, and then re-enabling it (Github Issue #5211 (https://github.com/refinedev/refine/issues/5211)). If none of these suggestions work, I recommend reaching out to the Refine community on their Discord Server (https://discord.gg/refine) for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

wise-white•5mo ago

I've also deleted and reinstalled my node_modules to be safe

wise-white•5mo ago

A project ID was also generated and added to my package.json and Refine.options prop

wise-white•5mo ago

@kapa.ai I've tried all those suggestions, but the DevtoolsPanel does not appear in my app and the DevTools server running on localhost:5001 still says No App Connected

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still having trouble. Based on the information available, it seems like there might be an issue with the connection between your application and the DevTools server. Here are a few more things you can try: 1. Check your WebSocket connection: There might be an issue with the WebSocket server used by DevTools. You can check this by running the following command after starting your development server:

npx wscat --connect ws://localhost:5002

npx wscat --connect ws://localhost:5002

This command will try to connect to the WebSocket server used by DevTools. If it's not working, it might be the cause of your issue. (Source: Discord Support Thread (https://discord.com/channels/837692625737613362/1159002778845315092)) 2. Check for environment variable conflicts: There have been cases where conflicting environment variables caused issues with DevTools. Specifically, the PORT variable might cause conflicts. You can try running the DevTools individually without leaving it to the dev command to avoid this conflict. (Source: Discord Support Thread (https://discord.com/channels/837692625737613362/1159002778845315092)) 3. Update your packages: Make sure all your packages are up to date. You can update your @refinedev/core package using the following command:

yarn @refinedev/core@latest

yarn @refinedev/core@latest

(Source: Discord Support Thread (https://discord.com/channels/837692625737613362/1159002778845315092)) If none of these suggestions work, it might be a bug with Refine DevTools. In that case, I recommend creating an issue on the Refine GitHub repository (https://github.com/refinedev/refine/issues) to get help from the developers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

wise-white•5mo ago

@kapa.ai My packages are up to date, I have no conflicting ENV VARS, and the WebSocket handshake was successful. Same error.

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still experiencing issues. It seems like you've tried all the available troubleshooting steps. At this point, it might be a bug with Refine DevTools. I recommend creating an issue on the Refine GitHub repository (https://github.com/refinedev/refine/issues). Please provide as much detail as possible, including the steps you've taken, any error messages, and your environment details. This will help the developers diagnose and fix the issue. In the meantime, you might want to consider using other tools or methods to inspect your queries and keys. I understand this isn't the ideal solution, but it might help you continue your work until the issue with DevTools is resolved. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

wise-white•5mo ago

You did your best, bot. You did your best. I'm sure I missed some configuration. Just not sure where 😦

fascinating-indigo•5mo ago

Are you running in dev mode it only runs in that I did get it working the other day

wise-white•5mo ago

Yeah, I am Running refine dev Which should be dev mode

fascinating-indigo•5mo ago

Looks like you are doing everything correct from what you’ve said. The dev tools appeared as a permanent absolute click button at the bottom of the page when I tried it Is there any errors in the console inspector

wise-white•5mo ago

Thanks for helping me troubleshoot @Joe Gaffney -- there aren't any errors in the console at all

fascinating-indigo•5mo ago

I can't really assit much further unless i see a code example. My guess would be its something to do with the provider ordering for the devTools

genetic-orange•5mo ago

Hey @Millerbyte sorry for the issue, can you try to provide a minimal repro example for us to debug? Do you have any other Refine projects (or freshly generated ones) with devtools? Are they working properly? Do you have any specific configuration made in vite config or env variables? Regardless of the env variables refine dev command runs the devtools server along side with the project. But if the project is running with process.env.NODE_ENV something other than "development", <DevtoolsProvider /> will not initialize the connection with the devtools server. Hey @Joe Gaffney, was your issue caused by explicitly set NODE_ENV or was there any other things we should be aware of?

fascinating-indigo•5mo ago

Hey @aliemir I never had the issue myself was just trying to help out. For me it worked fine in two different projects. One manually added from a refine template and one created from the cli.

genetic-orange•5mo ago

Nice to hear that, thanks for the reply! Have a nice day!

fascinating-indigo•5mo ago

@Millerbyte maybe try a fresh npm create refine-app@latest see if you have issues there. Then compare with your main project to debug.