Chuckie's Blog

chrome插件

发表于 更新于 分类于 ，
本文字数： 1.5k 阅读时长 ≈ 1 分钟

chrome插件

vuejs devtools

  • vuejs devtools用于查看vue框架项目的页面数据
  • 安装步骤：

  1. github下载vue-devtools插件 github下载地址： https://github.com/vuejs/vue-devtools

    • 直接下载.zip文件
    • 下载master: vue-devtools-master

  2. npm install

    • cmd中cd 到vue-devtools-master文件夹下
    • 执行npm install
    • 再执行npm run build

  3. chrome中引入插件

    • 位置：vue-devtools-master\shells\chrome

react-developer-tools

  • react-developer-tools用于查看React框架开发的项目的页面数据

  • 安装步骤

  1. 下载地址：

    链接：https://pan.baidu.com/s/1ITWCYbcq-QTrjq2s9i7Urw
    提取码：c2tl

    链接：https://pan.baidu.com/s/15f9sX_ZRXM5TDzWbiWLUxg
    提取码：0i92

  2. 将下载的文件解压到自定义目录中

  3. 在Chrome浏览器扩展程序-加载已解压的扩展程序 中选择 之前解压的文件夹

  4. 重新打开浏览器即可开始使用

redux-devtools

  • redux-devtools用于查看React框架开发的项目的store全局数据

  • 安装步骤

  1. 下载地址：

    链接：https://pan.baidu.com/s/14N1MTHxGDAhASjhgNHvAvw
    提取码：q8hs

  2. 将下载的文件解压到自定义目录中

  3. 在Chrome浏览器扩展程序-加载已解压的扩展程序 中选择 之前解压的文件夹

  4. 在项目store/index.js中做如下配置

    • 增加：window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    1
    2
    3
    4
    5
    6
    import { createStore } from 'redux'
    import reducer from './reducer'

    const store  = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

    export default store

  5. 重新打开浏览器即可开始使用

  • 常见问题：

    • window.__REDUX_DEVTOOLS_EXTENSION__本质是一个中间件
    • 当store/index.js中还有其它中间件例如Redux-thunk时，需要重新配置store/index.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import { createStore, applyMiddleware, compose } from 'redux'
    import thunk from 'redux-thunk';
    import reducer from './reducer'

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
    const enhancer = composeEnhancers(
      applyMiddleware(thunk)
    );

    const store  = createStore(
      reducer, 
      enhancer
    )
     
    export default store