# rr-devtools

**Repository Path**: spdev/rr-devtools

## Basic Information

- **Project Name**: rr-devtools
- **Description**: react redux 远程调试工具
- **Primary Language**: JavaScript
- **License**: CC0-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-02
- **Last Updated**: 2021-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rr-devtools

生生课堂客户端里网页的调试工具，可查看 react 组件， redux 的数据。方便直接在客户端内调试。

前置条件：

生生课堂客户端内打开开发者工具，Console 里运行 location.href = 'http://localhost:8000/wdhbTeacherPcWeb#/wdhbTeacherPcWeb/microLessonList' 让客户端加载本地服务器的页面。

## redux 调试

1. 需要修改的代码：

```js
//umi2 app.js
import devTools from 'remote-redux-devtools';
export const dva = {
  config: {
    onError(e) {
      e.preventDefault();
      console.error(e.message);
    },
    extraEnhancers: [
      devTools({
        hostname: 'localhost',
        port: 9000,
        secure: false,
        realtime: true,
      }),
    ],
  },
};


//umi3 app.js
let extraEnhancers = [];
//配置通过redux远程调试
if (process.env.UMI_ENV === 'test' || process.env.UMI_ENV === 'dev') {
  //避免使用浏览器redux插件
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ = null;

  extraEnhancers.push(
    devTools({
      hostname: 'localhost',
      port: 9000,
      secure: false,
      realtime: true,
    }),
  );
}

export const dva = {
  config: {
    extraEnhancers,
  },
};
```

2. 打开调试工具，待服务启动后，点击底部 settings，选择使用自定义服务器，配置相应的 host 为 localhost, port 为 9000

3. 等待页面自动连接调试工具或者在生生课堂客户端里刷新页面手动连接

默认端口 9000，默认不可用时会自动使用可用端口。

调试工具异常时可 ctrl+r 刷新调试工具页面或者点击底部重启服务，服务重启成功后再手动刷新生生课堂里的页面。

## react 调试

1. 需要修改的代码：

```js
//umi2 pages/document.ejs
<script src='http://localhost:8097'></script>
```

2. 等待页面自动连接调试工具或者在生生课堂客户端里刷新页面手动连接

默认 host：localhost，默认端口 8097。

更换 host 或端口的方法：ctrl+shift+i 打开 react 调试窗口的开发者工具，在 localStorage 里添加 host 或 port 字段，指定要使用的端口，然后刷新当前的调试窗口；代码里也要相应的修改。

调试工具异常时可 ctrl+r 刷新调试工具页面。