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.
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 💥
We automatically disable console logging for store extensions.
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 devor via the VSCode commandRaycast: 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
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.
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.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.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 2mo ago