npm 包 remotedev-server 使用教程

随着前端开发的发展,前端项目体量日渐庞大。为了便于开发调试,很多前端开发团队会选择使用 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


猜你喜欢

  • npm 包 require-nocache 使用教程

    在前端开发中,我们经常会使用 npm 包来帮助我们完成各种功能。但是在使用过程中,我们常常会因为缓存问题而遇到困难。这时候,npm 包 require-nocache 就能帮助我们解决这个问题。

    5 年前
  • npm 包 truffle-artifactor 使用教程

    在Web3开发中,Solidity智能合约是不可或缺的一部分,而Truffle Suite则提供了一个完整的开发框架,包括测试、部署、调试和合约管理等功能。本文将介绍 truffle-artifact...

    5 年前
  • npm 包 truffle-compile-vyper 使用教程

    在以太坊智能合约开发中,Python 语言的 Vyper 是一种常用的智能合约语言。而 truffle-compile-vyper 是一种用于编译 Vyper 合约的 npm 包。

    5 年前
  • npm 包 truffle-external-compile 使用教程

    什么是 truffle-external-compile truffle-external-compile 是一个 npm 包,主要用于将 solidity 代码编译成 JSON 文件,以便在 Tru...

    5 年前
  • npm 包 truffle-workflow-compile 使用教程

    介绍 Truffle 是以太坊智能合约开发的常用框架,而 truffle-workflow-compile 则是 Truffle 的编译流程工具包。使用 truffle-workflow-compil...

    5 年前
  • npm 包 truffle-solidity-utils 使用教程

    前言 在以太坊智能合约的开发中,平时需要处理的数据比较复杂,所以会用到一些工具库来简化开发难度。truffle-solidity-utils 是一个使用 Solidity 语言所开发的工具库,专为以太...

    5 年前
  • npm 包 truffle-require 使用教程

    前言 在使用 Truffle 编写智能合约的过程中,我们经常会遇到需要在合约中引用其他合约的情况。此时,我们可以使用 Truffle 提供的 import 语句来实现引用。

    5 年前
  • npm 包 truffle-reporters 使用教程

    什么是 truffle-reporters truffle-reporters 是一个用于测试报告生成的 npm 包,它允许我们将测试结果输出为 HTML、JSON、JUnit 等格式的报告。

    5 年前
  • NPM包Truffle-migrate使用教程

    Truffle-migrate是一个用于智能合约部署,管理和升级的npm包。它提供了许多简便的方式来创建,编译,并部署智能合约。本教程将为您提供一步步的指导,从安装到使用,让您轻松处理智能合约。

    5 年前
  • npm 包 npm-programmatic 使用教程

    简介 npm 是 Node.js 的包管理器,它能够让开发人员分享自己开发的包,并且能够快速安装和更新依赖的包。npm-programmatic 是一个非常便利的 npm 包,它能够帮助我们在 Nod...

    5 年前
  • npm 包 truffle-init 使用教程

    简介 truffle-init 是一个高效的开发工具,它基于 truffle 框架,提供了开箱即用的智能合约项目模板。使用 truffle-init,开发者可以快速的开始一个基于以太坊智能合约的开发项...

    5 年前
  • npm 包 truffle-core 使用教程

    当我们需要在区块链上进行智能合约开发时,一款好用的工具是必不可少的。truffle-core 是一个提供了多种合约开发和测试工具的 npm 包。本文将告诉你如何使用 truffle-core 进行智能...

    5 年前
  • npm包 github-download使用教程

    在前端开发中,经常需要从github上下载代码到本地进行开发,而手动去下载代码费时费力,更不利于代码的维护。为了解决这个问题,开发者就开发了“github-download”这个npm包,来方便我们进...

    5 年前
  • NPM 包 vcsurl 使用教程

    在前端开发中,我们经常需要依赖各种第三方的库以及框架。而 NPM 就成为了我们常用的包管理工具之一。当我们需要对一个库进行修改或者贡献代码的时候,就需要将它从 GitHub 下载到本地进行开发。

    5 年前
  • npm包truffle-box使用教程

    什么是truffle-box truffle-box是一个npm包,它是Truffle框架的一个集合,提供在开发以太坊DApps时用到的各种工具,包含了很多简单易用的代码模板和示例,如Box中的Pet...

    5 年前
  • npm 包 truffle 使用教程

    介绍 truffle 是一个针对以太坊智能合约的开发框架,提供了开发、测试、部署智能合约的工具链,可以用于快速开发以太坊智能合约。本文将介绍如何通过 npm 安装 truffle,以及使用 truff...

    5 年前
  • npm 包 real-path 使用教程

    当我们开发前端项目时,经常会使用到路径相关的操作,比如读取文件、导入模块等。在这个过程中,用到的路径可能是相对路径或者绝对路径。其中相对路径相对比较容易理解,但绝对路径在不同平台上可能会有所不同,这时...

    5 年前
  • npm 包 miaow-util 使用教程

    在前端开发中,经常需要使用一些工具库来简化代码,提高开发效率。miaow-util 就是一个非常优秀的前端工具库,它拥有众多实用的函数和方法,可以大大简化前端开发中的一些常见问题。

    5 年前
  • `npm` 包 `miaow` 使用教程

    miaow 是一个基于 gulp 和 webpack 的前端自动化构建工具,可以极大地提升项目的开发效率和质量。本篇教程将详细介绍 miaow 的使用方法,帮助前端工程师更好地应用这个强大的工具。

    5 年前
  • npm 包 miaow-js-mini 使用教程

    miaow-js-mini 是一款针对前端开发的 npm 包,它可以帮助我们快速实现一些基本的交互效果,尤其是对于需要频繁修改样式的动画效果,使用 miaow-js-mini 可以真正做到代码无侵入性...

    5 年前

相关推荐

    暂无文章