前端開發的除錯方式

1. 藉助以下外掛進行除錯。
   • Redux DevTools
   • React Developer Tools
   • React Perf
2. F12 之後，在原始碼處打斷點。
3. 堪比 Java 程式碼除錯的方案：用 WebStorm + JetBrains IDE Support 外掛，在 WebStorm 內除錯程式碼，直接在 WebStorm 原始碼上打斷點，除錯起來有點象在 IDEA 下除錯 Java 程式，很爽！

Redux DevTools

1. 安裝外掛
   • 以 qq 瀏覽器為例，搜尋：Redux DevTools
     
2. 新增相應程式碼以支援在瀏覽器上使用 Redux DevTools 外掛。
   • 參考
   • 對於分支 react-redux，要加上 redux-devtools-extension，只需要作如下調整:

   // 將 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 作為 createStore 方法的第三個引數，如下：
   const store = createStore(reducer, initValues, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
    
   

3. 使用外掛
   • npm start 之後，在 chrome 或者 qq 瀏覽器，按 F12，點選【Redux】，可跟蹤 Action 以及 state 的變化。
     

React Developer Tools

1. 安裝外掛
   • 以 qq 瀏覽器為例，搜尋：React Developer Tools
     
2. 使用外掛
   

React Perf

效能外掛，具體使用可參考《深入淺出React和Redux》，P101-102，【4.6.3 工具應用】章節。

擴充套件閱讀

• 介紹 React 效能分析器
• React 的慢與快：優化 React 應用實戰

F12 之後，在原始碼處打斷點

可 F12 之後，點選【Sources】，在想要監控變數的地方打斷點，這種方式還是非常方便的。