随着前端开发的发展，前端项目体量日渐庞大。为了便于开发调试，很多前端开发团队会选择使用 Redux 来管理应用状态，以及使用 remotedev 这个 Chrome 扩展来远程调试应用状态。那么，如何在前端项目中使用 remotedev-server 取代 remotedev 扩展进行远程调试呢？本文将介绍如何使用 npm 包 remotedev-server 进行远程调试。
什么是 remotedev-server？
remotedev-server 是一个 Node.js 应用程序，它允许浏览器或者 react-native 项目通过 WebSocket 连接到本地和远程的 redux-devtools，以便查看和调试应用状态。
remotedev-server 的安装与配置
安装
npm install remotedev-server --save-dev
配置
在项目的 package.json 文件中添加以下配置：
{
"scripts": {
"remotedev": "remotedev --hostname=localhost --port=8000"
}
}以上配置会在本地启动 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