diff --git a/content/en/guide/v10/debugging.md b/content/en/guide/v10/debugging.md index 5f829f7b6..afa30823f 100644 --- a/content/en/guide/v10/debugging.md +++ b/content/en/guide/v10/debugging.md @@ -60,6 +60,15 @@ render(, document.getElementById('root')); Make sure to set the `NODE_ENV` variable to the correct value in your build tool. +## Debugging Signals + +If you're using Preact Signals in your application, there are specialized debugging tools available: + +- **[Signals Debug](https://github.com/preactjs/signals/blob/main/packages/debug)** - A development tool that provides detailed console output about signal updates, effect executions, and computed value recalculations. +- **[Signals DevTools](https://github.com/preactjs/signals/blob/main/packages/devtools-ui)** - Visual DevTools UI for debugging and visualizing Preact Signals in real-time. You can embed it directly in your page for demos, or integrate it into custom tooling. + +> **Note:** These are framework-agnostic tools from the Signals library. While they work great with Preact, they're not Preact-specific. + ## Debug Warnings and Errors Sometimes you may get warnings or errors when Preact detects invalid code. These should be fixed to ensure that your app works flawlessly. diff --git a/content/en/guide/v10/signals.md b/content/en/guide/v10/signals.md index 9f11a370a..80e74766a 100644 --- a/content/en/guide/v10/signals.md +++ b/content/en/guide/v10/signals.md @@ -693,3 +693,12 @@ function Component() { ); } ``` + +## Debugging + +If you're using Preact Signals in your application, there are specialized debugging tools available: + +- **[Signals Debug](https://github.com/preactjs/signals/blob/main/packages/debug)** - A development tool that provides detailed console output about signal updates, effect executions, and computed value recalculations. +- **[Signals DevTools](https://github.com/preactjs/signals/blob/main/packages/devtools-ui)** - Visual DevTools UI for debugging and visualizing Preact Signals in real-time. You can embed it directly in your page for demos, or integrate it into custom tooling. + +> **Note:** These are framework-agnostic tools from the Signals library. While they work great with Preact, they're not Preact-specific. diff --git a/content/en/guide/v11/debugging.md b/content/en/guide/v11/debugging.md index 5f829f7b6..afa30823f 100644 --- a/content/en/guide/v11/debugging.md +++ b/content/en/guide/v11/debugging.md @@ -60,6 +60,15 @@ render(, document.getElementById('root')); Make sure to set the `NODE_ENV` variable to the correct value in your build tool. +## Debugging Signals + +If you're using Preact Signals in your application, there are specialized debugging tools available: + +- **[Signals Debug](https://github.com/preactjs/signals/blob/main/packages/debug)** - A development tool that provides detailed console output about signal updates, effect executions, and computed value recalculations. +- **[Signals DevTools](https://github.com/preactjs/signals/blob/main/packages/devtools-ui)** - Visual DevTools UI for debugging and visualizing Preact Signals in real-time. You can embed it directly in your page for demos, or integrate it into custom tooling. + +> **Note:** These are framework-agnostic tools from the Signals library. While they work great with Preact, they're not Preact-specific. + ## Debug Warnings and Errors Sometimes you may get warnings or errors when Preact detects invalid code. These should be fixed to ensure that your app works flawlessly. diff --git a/content/en/guide/v11/signals.md b/content/en/guide/v11/signals.md index 803fe4322..80e74766a 100644 --- a/content/en/guide/v11/signals.md +++ b/content/en/guide/v11/signals.md @@ -182,7 +182,7 @@ function removeTodo(todo) { ## Building the UI -Now that we've modeled our application's state, it's time to wire in up to a nice UI that users can interact with. +Now that we've modeled our application's state, it's time to wire it up to a nice UI that users can interact with. ```jsx function TodoList() { @@ -693,3 +693,12 @@ function Component() { ); } ``` + +## Debugging + +If you're using Preact Signals in your application, there are specialized debugging tools available: + +- **[Signals Debug](https://github.com/preactjs/signals/blob/main/packages/debug)** - A development tool that provides detailed console output about signal updates, effect executions, and computed value recalculations. +- **[Signals DevTools](https://github.com/preactjs/signals/blob/main/packages/devtools-ui)** - Visual DevTools UI for debugging and visualizing Preact Signals in real-time. You can embed it directly in your page for demos, or integrate it into custom tooling. + +> **Note:** These are framework-agnostic tools from the Signals library. While they work great with Preact, they're not Preact-specific.