liaosw97 - 利用 MobX DevTools 调试 MobX 应用程序：
- 安装：
- 对于 Chrome 或 Firefox 浏览器，安装 MobX DevTools 扩展。
- 在项目中安装
mobx-react-devtools包（通常仅在开发环境使用）：npm install --save-dev mobx-react-devtools # 或者 yarn add --dev mobx-react-devtools
- 集成：
- 在应用程序的入口文件（如
index.js或App.js）中导入并渲染DevTools组件。 - 示例：
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; // 仅在开发环境导入 DevTools if (process.env.NODE_ENV === 'development') { const DevTools = require('mobx-react-devtools').default; ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> <DevTools /> </React.StrictMode> ); } else { ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> ); }
- 在应用程序的入口文件（如
- 功能：
- 状态检查：实时查看 MobX store 的状态，包括可观察数据、计算值和 action。
- 时间旅行调试：回溯和重放状态变化，帮助理解数据流和定位问题。
- Action 追踪：记录所有 action 的执行，显示其参数和对状态的影响。
- 性能分析：识别哪些组件因为哪些状态变化而重新渲染，优化性能。
- 最佳实践：
- 仅在开发环境中使用 MobX DevTools，避免在生产环境中打包。
- 结合浏览器开发者工具一起使用，更全面地调试应用程序。
- 安装：
Mobx Devtools by liaosw97 · 9c3a06e
npx skillmds@latest add liaosw97/mobx-devtools File contents
---name: mobx-devtoolsdescription: 利用 MobX DevTools 调试 MobX 应用程序---- **利用 MobX DevTools 调试 MobX 应用程序**： - **安装**： - 对于 Chrome 或 Firefox 浏览器，安装 MobX DevTools 扩展。 - 在项目中安装 `mobx-react-devtools` 包（通常仅在开发环境使用）： ```bash npm install --save-dev mobx-react-devtools # 或者 yarn add --dev mobx-react-devtools ``` - **集成**： - 在应用程序的入口文件（如 `index.js` 或 `App.js`）中导入并渲染 `DevTools` 组件。 - 示例： ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; // 仅在开发环境导入 DevTools if (process.env.NODE_ENV === 'development') { const DevTools = require('mobx-react-devtools').default; ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> <DevTools /> </React.StrictMode> ); } else { ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> ); } ``` - **功能**： - **状态检查**：实时查看 MobX store 的状态，包括可观察数据、计算值和 action。 - **时间旅行调试**：回溯和重放状态变化，帮助理解数据流和定位问题。 - **Action 追踪**：记录所有 action 的执行，显示其参数和对状态的影响。 - **性能分析**：识别哪些组件因为哪些状态变化而重新渲染，优化性能。 - **最佳实践**： - 仅在开发环境中使用 MobX DevTools，避免在生产环境中打包。 - 结合浏览器开发者工具一起使用，更全面地调试应用程序。
liaosw97/awesome-rules-skills/tree/main/plugins/mobx/skills/mobx-devtools commit 9c3a06e686
Frequently asked questions
Run npx skillmds@latest add liaosw97/mobx-devtools in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
利用 MobX DevTools 调试 MobX 应用程序 It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.