<small id="nvnkc"><optgroup id="nvnkc"><sub id="nvnkc"></sub></optgroup></small>

<th id="nvnkc"><div id="nvnkc"></div></th>
  • <noscript id="nvnkc"><nobr id="nvnkc"><address id="nvnkc"></address></nobr></noscript>

  • <code id="nvnkc"><var id="nvnkc"></var></code><tbody id="nvnkc"><listing id="nvnkc"><nav id="nvnkc"></nav></listing></tbody>

    Redux DevTools:Redux調試工具

    發布時間: 編輯:CINDY 1人評論 51707次瀏覽 Chrome開發者工具插件
    直達下載
    摘要 : Redux DevTools是一款可以在瀏覽器對redux項目狀態進行調試的chrome插件。

    Redux DevTools Chrome插件開發背景

    在vue中型項目開發的過程中,一般都是要用到vuex這個狀態管理工具的,這樣可以方便我們管理全局的狀態,同時,為了在開發的過程中,更加方便地實時查看到state狀態,我們會使用 vue-devtool工具,這樣就可以在瀏覽器中實時看到 state的變化以及觸發的mutations 等等。 在react的開發過程中也是如此,redux類似于vue中的vuex,也是狀態管理工具,而我們今天要介紹的是一款可以在瀏覽器中選擇使用redux-devtools工具來進行使用了redux項目的開發的chrome插件,通過redux-devtools, 我們可以清晰的看到當前 store 倉庫中的 state 是怎么樣的,在可視化工具的左邊,我們還可以看到觸發的action的變化。 這樣,使得我們開發過程中很方便地進行調試。 

    Redux DevToolslogo圖片

    Redux DevTools Chrome插件使用方法

    1.在使用Chrome Redux調試插件之前,我們需要做一些項目的基本配置。我們要安裝到項目的一些基本使用,如: react、redux、react-redux等。基本框架如下:

    chrome redux調試插件

    import Redux from 'redux' 

    // 引入createStore創建store,引入applyMiddleware 來使用中間件

     import {createStore, applyMiddleware} from 'redux' 

    // 引入所有的reducer

    import storeReducer from '../Reducer/index.jsx'

    export default  createStore(storeReducer);

    2.在谷歌應用商店下載redux-devtools,去谷歌應用商店搜索redux-devtools直接安裝即可。也可以在本站離線下載安裝chrome redux調試插件,離線安裝的方法參照:chrome插件的離線安裝方法最新chrome瀏覽器下載地址:http://www.djfsmith.com/category/chrome/。插件安裝成功后,在瀏覽器的右上角會有相關的顯示。 
    3.要想使用chrome redux調試插件,還需要在項目中安裝 redux-devtools-extension 插件。其安裝方法如下:
    即在項目中直接執行下面的安裝命令:

    npm install redux-devtools-extension --save-dev

    4. 安裝成功后,還需要redux-devtools在項目中的配置,實際上就是在創建store的時候把redux-devtools安裝即可。
    import Redux from 'redux'
    // 引入createStore創建store,引入applyMiddleware 來使用中間件
    import {createStore, applyMiddleware} from 'redux'
    // 引入所有的reducer
    import storeReducer from '../Reducer/index.jsx'
    // 利用redux-logger打印日志
    import {createLogger} from 'redux-logger'
    // 安裝redux-devtools-extension的可視化工具。
    import { composeWithDevTools } from 'redux-devtools-extension'
    // 使用日志打印方法, collapsed讓action折疊,看著舒服。
    const loggerMiddleware = createLogger({collapsed: true});
    export default  createStore(   
     storeReducer,   
     composeWithDevTools(    )
    );

    Redux DevTools圖片

    Redux DevTools Chrome插件聯系方法

    內容由:https://github.com/zalmoxisus/redux-devtools-extension提供
    查看更多

    Redux DevTools:Redux調試工具下載地址

    點擊下載Redux DevTools:Redux調試工具

    轉載必須注明來自: Chrome插件 ? Redux DevTools:Redux調試工具

    Vue.js devtools插件

    Vue.js devtools插件

    3 人評論 115372 次人瀏覽 4.6分 4.6 分
    Vue.js開發者工具是一款適用于chrome瀏覽器和Firefox瀏覽器的瀏覽器插件。
    基于REST的Web服務客戶端

    基于REST的Web服務客戶端

    3 人評論 61057 次人瀏覽 3.0分 3.0 分
    基于REST的Web服務客戶端是一款可以使用Chrome插件來模擬REST請求來測試REST風格的web Api的谷歌瀏覽器插件。
    開發常用工具(Develop Tools)

    開發常用工具(Develop Tools)

    0 人評論 14072 次人瀏覽 3.0分 3.0 分
    開發常用工具(Develop Tools)是一款可以為我們提供一些常用的開發工具的插件。比如Unix時間戳、URL編碼/解碼、漢字轉換拼音、ip地址查詢、加密(MD5,MD4,SHA1)、BASE64編碼/解碼等,它能夠輔助一些網頁開發人員進行編程工作。
    AngularJS Batarang - Angular調試插件

    AngularJS Batarang - Angular調試插件

    0 人評論 6994 次人瀏覽 2.3分 2.3 分
    angularjs batarang插件是一款功能強大的可以安裝到谷歌瀏覽器上使用的Angular調試插件,安裝使用這款angularjs batarang插件可以讓你在開發過程中更加便捷。
    av看片免费观看网址
    評論:(1)

    已有 1 位網友發表了一針見血的評論,你還等什么?

    • 1樓 Redux-DevTools 回復該留言
      Redux-DevTools 好用
    ?