React Native(以下簡稱RN)為傳統前端開發者打開了一扇新的大門。其中,使用瀏覽器的調試工具去Debug移動端的代碼,無疑是最吸引開發人員的特性之一。
試想一下,當你在手機屏幕按下一個按鈕,處理事件的代碼就可以立即在瀏覽器的調試工具里進行斷點調試,而且每當你對代碼進行修改,界面便可以完成快速地重載,省去昂長的編譯時間,這會是多麼提高工作效率。
傳統的Web前端開發人員自然很熟悉瀏覽器的調試工具,但是對於如何將其在RN中使用以便和移動端結合起來,也許會相當陌生。這也成為了一些開發者跨入RN移動開發大門的第一道小門檻。
本文是筆者一邊參考官方文檔,一邊摸索RN調試過程的記錄。希望能夠幫助新手開發者走出一小步,更快地邁過這道門檻。
在開始之前,你需要搭建好本地開發環境,並有一部Android 5.0版本以上的手機可供連接至電腦。
首先,使用官方工具react-native-cli創建好一個初始化的工程,並安裝好依賴。
安裝的命令為「react-native init DebugTest」(DebugTest為我們這次的項目名稱)
安裝完成後,就會多出一個名為DebugTest項目文件夾,文件夾內結構如下: