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!![No description](https://cdn.answeroverflow.com/1217608817311748260/image.png)
![No description](https://cdn.answeroverflow.com/1217608817563668661/image.png)
![No description](https://cdn.answeroverflow.com/1217608817819516998/image.png)
21 Replies
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:
And then wrap your
Refine
component with DevtoolsProvider
and add DevtoolsPanel
to your app like this:
(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:
----------------------<@379028227336830977> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•6mo ago
I've also deleted and reinstalled my
node_modules
to be safexenial-black•6mo ago
A project ID was also generated and added to my
package.json
and Refine.options
prop![No description](https://cdn.answeroverflow.com/1217609389779980318/image.png)
![No description](https://cdn.answeroverflow.com/1217609390169919599/image.png)
xenial-black•6mo 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
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:
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:
(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:
----------------------<@379028227336830977> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•6mo ago
![No description](https://cdn.answeroverflow.com/1217612151079043144/image.png)
xenial-black•6mo ago
@kapa.ai My packages are up to date, I have no conflicting ENV VARS, and the WebSocket handshake was successful. Same error.
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:
----------------------
<@379028227336830977> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•6mo ago
You did your best, bot. You did your best. I'm sure I missed some configuration. Just not sure where 😦
sunny-green•6mo ago
Are you running in dev mode it only runs in that
I did get it working the other day
xenial-black•6mo ago
Yeah, I am
Running refine dev
Which should be dev mode
sunny-green•6mo 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