Debug an Extension

Search…
Debug an Extension
This guide covers how to find and fix bugs in your extension.
Bugs are unavoidable. Therefore it's important to have an easy way to discover and fix them. This guide shows you how to find problems in your extensions.
Console
Use the console for simple debugging such as logging variables, function calls, or other helpful messages. All logs are shown in the terminal during development mode. Here are a few examples:
console.log("Hello World"); // Prints: Hello World
​
const name = "Thomas";
console.debug(`Hello ${name}`)'; // Prints: Hello Thomas
​
const error = new Error("Boom 💥");
console.error(error); // Prints: Boom 💥
For more, checkout the Node.js documentation.
We automatically disable console logging for store extensions.
Visual Studio Code
For more complex debugging you can install the VSCode extension to be able to attach a node.js debugger to the running Raycast session.
1.Activate your extension in dev mode via npm run dev or via the VSCode command Raycast: Start Development Mode
2.Start the VSCode command Raycast: Attach Debugger
3.Set your breakpoint like in any other node.js base project
4.Activate your command
Unhandled exceptions and Promise rejections
All unhandled exceptions and Promise rejections are shown with an error overlay in Raycast.
Unhandled exception in development mode
During development, we show the stack trace and add an action to jump to the error to make it easy to fix it. In production, only the error message is shown. You should show a toast for all expected errors, e.g. a failing network request.
React Developer Tools
We support React Developer Tools out-of-the-box. Use the tools to inspect and change the props of your React components, and see the results immediately in Raycast. This is especially useful for complex commands with a lot of states.
React Developer Tools
To get started, add the react-devtools to your extension. Open a terminal, navigate to your extension directory and run the following command:
npm install --save-dev react-devtools@4.24.6
Then re-build your extension with npm run dev, open the command you want to debug in Raycast, and launch the React Developer Tools with ⌘ ⌥ D. Now select one of the React components, change a prop in the right sidebar, and hit enter. You'll notice the change immediately in Raycast.
Alternative: Global installation of React Developer Tools
If you prefer to install the react-devtools globally, you can do the following:
npm install -g [email protected]
Then you can run react-devtools from a terminal to launch the standalone DevTools app. Raycast connects automatically, and you can start debugging your component tree.
Environments
By default, extensions installed from the store run in Node production mode and development extensions in development mode. In development mode, the CLI output shows you additional errors and warnings (e.g. the infamous warning when you're missing the React key property for your list items); performance is generally better when running in production mode. You can force development extensions to run in Node production mode by going to Raycast Preferences > Advanced > "Use Node production environment".
At runtime, you can check which Node environment you're running in:
if (process.env.NODE_ENV === "development") {
  // running in development Node environment
}
To check whether you're running the store or local development version:
import { environment } from "@raycast/api";
​
if (environment.isDevelopment) {
  // running the development version
}
Last modified 1mo ago
Copy link
Edit on GitHub
Outline
Console
Visual Studio Code
Unhandled exceptions and Promise rejections
React Developer Tools
Alternative: Global installation of React Developer Tools
Environments