随着前端开发的发展,前端项目体量日渐庞大。为了便于开发调试,很多前端开发团队会选择使用 Redux 来管理应用状态,以及使用 remotedev 这个 Chrome 扩展来远程调试应用状态。那么,如何在前端项目中使用 remotedev-server 取代 remotedev 扩展进行远程调试呢?本文将介绍如何使用 npm 包 remotedev-server 进行远程调试。
什么是 remotedev-server?
remotedev-server 是一个 Node.js 应用程序,它允许浏览器或者 react-native 项目通过 WebSocket 连接到本地和远程的 redux-devtools,以便查看和调试应用状态。
remotedev-server 的安装与配置
安装
--- ------- ---------------- ----------
配置
在项目的 package.json 文件中添加以下配置:
- ---------- - ------------ ---------- -------------------- ------------ - -
以上配置会在本地启动 remotedev-server,可以在浏览器地址栏中输入 http://localhost:8000
进行访问。如果需要配置其他参数,可以执行 remotedev --help
查看详细的命令行参数。
在项目中启用 remotedev-server
在项目中使用 remotedev-server,需要使用 redux-devtools 的 compose 增强器(redux-devtools-extension)。请先确保 redux-devtools-extension 已经安装。
------ - ------------ ---------------- ------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----------- ---- ------------- ----- ---------------- - ------------------------------------------- -- -------- ----- ----- - ------------ ------------ -------------------------------------- --- ---- --
将 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
替换为 composeWithDevTools
来启用 remotedev-server。
------ - ---------------- ------------ ------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----------- ---- ------------- -- -- --------- --- ---- - ---- -- ------ --------- ---- ------------------- ----- ---------------- - - --------- ------------ ----- ----- -- ----- ------- - ---------------------------- ----- ---------------- - --------------------- -- ------ --------- ----- -- ------ ----- ----- ----------- ------ --------- ------------ ----- ----- -- ----- ----------------- ----------------------- ----------------- ------------------ ------------------- -------------------- ----- ------------------ ------ ---------------- ------ --- ----- ----- - ------------ ------------ -- -- ---------------- -- -------- ---------------- -- --- -- -- ------------------------------------------ - --
使用 remotedev,需要借助于 Redux DevTools Extension,以及安装 redux-devtools-extension 包。
------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- --------------------------- ------ ----------- ---- ------------- ----- ---------------- - --------------------- ----------------- ----------------------- ----------------- ------------------- --- ----- ----- - ------------ ------------ ----------------------------------- --- ---- --
以上就是 remotedev-server 的使用教程,希望对大家有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/72704