preact · Preact Docs
Debugging Preact Apps
Teaches how to enable Preact debugging tools by importing preact/debug, configuring browser extensions, and managing devtools in production environments.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Debugging Preact Apps
Teaches how to enable Preact debugging tools by importing preact/debug, configuring browser extensions, and managing devtools in production environments.
When To Use
Use when you need to enable developer warnings, integrate with Preact Devtools extensions, or configure debugging behavior for signals and component rendering.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-debugging-apps-workflow-guide.md | A comprehensive guide covering essential debugging tools, testing libraries, and advanced debugging techniques for Preact applications. | Questions about a comprehensive guide covering essential debugging tools, testing libraries, and advanced debugging techniques for Pr... |
examples/preact-debugging-apps-setup.text | A text file demonstrating the initial import and render setup required for debugging Preact applications. | Exact payloads, commands, or snippets shown in A text file demonstrating the initial import and render setup required for debugging Preact applications. |
examples/preact-debugging-apps-preact-debug-import-development-setup.text | A code snippet demonstrating how to import the preact/debug module within a development environment conditional block. | Exact payloads, commands, or snippets shown in A code snippet demonstrating how to import the preact/debug module within a development environment conditional block. |
examples/preact-debugging-apps-render-mismatch.text | A text example demonstrating the difference between expected and actual DOM nodes during a Preact render mismatch. | Exact payloads, commands, or snippets shown in A text example demonstrating the difference between expected and actual DOM nodes during a Preact render mismatch. |
examples/preact-debugging-apps-app-js-render-error.text | A JavaScript code snippet demonstrating a common error where the render function is called incorrectly due to missing exports in app.js. | Exact payloads, commands, or snippets shown in A JavaScript code snippet demonstrating a common error where the render function is called incorrectly due to missing... |
examples/preact-debugging-apps-component-export-log.text | A text file demonstrating how default exports in Preact components can lead to unexpected console log outputs. | Exact payloads, commands, or snippets shown in A text file demonstrating how default exports in Preact components can lead to unexpected console log outputs. |
examples/preact-debugging-apps-jsx-syntax-error.text | A text file demonstrating a common JSX syntax error where a component is incorrectly assigned a JSX element instead of a function. | Exact payloads, commands, or snippets shown in A text file demonstrating a common JSX syntax error where a component is incorrectly assigned a JSX element instead o... |
examples/preact-debugging-apps-jsx-render.text | A text-based example demonstrating basic JSX component syntax and the render function for debugging Preact applications. | Exact payloads, commands, or snippets shown in A text-based example demonstrating basic JSX component syntax and the render function for debugging Preact applications. |
examples/preact-debugging-apps-syntax-error-examples.text | A collection of valid and invalid code snippets demonstrating common syntax errors encountered when debugging Preact applications. | Exact payloads, commands, or snippets shown in A collection of valid and invalid code snippets demonstrating common syntax errors encountered when debugging Preact... |
examples/preact-debugging-apps-console-log-validation-examples.text | A text file demonstrating valid and invalid console.log usage patterns within Preact applications for debugging purposes. | Exact payloads, commands, or snippets shown in A text file demonstrating valid and invalid console.log usage patterns within Preact applications for debugging purpo... |
examples/preact-debugging-apps-invalid-hook-usage.text | A text example demonstrating an invalid use of the useState hook outside of a component function to illustrate debugging scenarios. | Exact payloads, commands, or snippets shown in A text example demonstrating an invalid use of the useState hook outside of a component function to illustrate debugg... |
examples/preact-debugging-apps-duplicate-key-warning.text | A code snippet demonstrating a React-style duplicate key warning in a Preact component mapping operation. | Exact payloads, commands, or snippets shown in A code snippet demonstrating a React-style duplicate key warning in a Preact component mapping operation. |
examples/preact-debugging-apps-component-render-error.text | A text-based code example demonstrating a common rendering error within a Preact component map function. | Exact payloads, commands, or snippets shown in A text-based code example demonstrating a common rendering error within a Preact component map function. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/debugging