React Native / React調試技巧

作過原生APP開發的同窗們都清楚，咱們在Xcode和studio中就能夠直接對編寫的代碼進行斷點調試，很方便，可是web開發斷點調試就不能直接在開發工具中完成了，須要藉助瀏覽器來完成，React相關的開發斷點調試和web開發基本上同樣，也是在瀏覽器上進行調試，雖然沒有原生那麼方便，可是也還算簡單。React Native調試須要藉助官方的Developer Menu，下面咱們就來簡單聊聊這個Developer Menu 和 Chrome Developer Tools

Developer Menu

模擬器開啓Developer Menu

• iOS模擬器
  • 能夠經過Command⌘ + D快捷鍵來快速打開Developer Menu
• android模擬器
  • 能夠經過Command⌘ + M快捷鍵來快速打開Developer Menu。也能夠經過模擬器上的菜單鍵來打開

真機開啓Developer Menu

• iOS和Android真機經過搖動手機來開啓Developer Menu

Reloading JavaScript

在只是修改了js代碼的狀況下，若是要預覽修改結果，你不須要從新編譯你的應用。在這種狀況下，你只須要告訴React Native從新加載js便可。

注意： 若是你修改了native的代碼或修改了Images.xcassets、res/drawable中的文件，從新加載js是不行的，這時你須要從新編譯你的項目了

Reload js

Reload js將你項目中js代碼部分從新生成bundle文件，而後傳輸給模擬器或手機

在Developer Menu中單擊Reload讓React Native從新加載js。對於iOS模擬器你也能夠經過Command⌘ + R快捷鍵來加載js，對於Android模擬器能夠經過雙擊r鍵來加載js

*注意：*若是Command⌘ + R 沒法使你的iOS模擬器加載js，能夠經過選中Hardware menu中Keyboard選項下的 'Connect Hardware Keyboard' 試試

Enable Live Reload

在 Developer Menu中有 'Enable Live Reload' 選項，該選項提供了React Native動態加載的功能。當你的js代碼發生變化後，React Native會自動生成bundle而後傳輸到模擬器或手機上

Enable Hot Reloading

Developer Menu中還有一項須要特別介紹的，就是'Enable Hot Reloading'熱加載，若是說Enable Live Reload解放了你的雙手的話，那麼Hot Reloading不但解放了你的雙手並且還解放了你的時間。 當你每次保存代碼時Hot Reloading功能便會生成這次修改代碼的增量包，而後傳輸到手機或模擬器上以實現熱加載。相比 Enable Live Reload須要每次都返回到啓動頁面，Enable Live Reload則會在保持你的程序狀態的狀況下，就能夠將最新的代碼部署到設備上，當你作佈局的時候啓動Enable Live Reload功能你就能夠實時的預覽佈局效果了，方便省時

Warning

React Native程序運行時出現的Warnings也會被直接顯示在屏幕上，以黃色的背景顯示，並會打印出警告信息，你也能夠經過console.warn()來手動觸發Warnings，你也能夠經過console.disableYellowBox = true來手動禁用Warnings的顯示，或者經過console.ignoredYellowBox = ['Warning: ...']來忽略相應的Warning

Error

React Native程序運行時出現的Error會被直接顯示在屏幕上，以紅色的背景顯示，並會打印出錯誤信息， 你也能夠經過 console.error()來手動觸發Error

注意： 在生產環境release下Error和Warning功能不在生效

如何真機調試

• iOS上

配置好相應的調試證書，直接鏈接線鏈接到真機運行便可

• android

搖晃手機，調出Developer Menu面板，在'Developer Menu'下的'Dev Settings'中Debug server host & prot for device配置本身路由器ip地址。端口使用8081便可

Chrome Developer Tools

Chrome 開發工具

谷歌Chrome開發工具，是基於谷歌瀏覽器內含的一套網頁製做和調試工具。開發者工具容許網頁開發者深刻瀏覽器和網頁應用程序的內部。該工具能夠有效地追蹤佈局問題，設置 JavaScript 斷點並可深刻理解代碼的最優化策略。Chrome開發工具一共提供了8大組工具：

• Element 面板： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素
• Network 面板：用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等
• Source 面板：用於查看和調試當前頁面所加載的腳本的源文件
• TimeLine 面板： 用於查看腳本的執行時間、頁面元素渲染時間等信息
• Profiles 面板：用於查看 CPU 執行時間與內存佔用等信息
• Resource 面板：用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等
• Audits 面板：用於優化前端頁面，加速網頁加載速度等
• Console 面板：用於顯示腳本中所輸出的調試信息，或運行測試腳本等

注意： 對於調試React Native應用來講，Sources和Console是使用頻率最高的兩個工具

你能夠像調試JavaScript代碼同樣來調試你的React Native程序

如何經過Chrome調試React Native程序

• 啓動遠程調試

在Developer Menu下單擊'Debug JS Remotely'啓動JS遠程調試功能，此時Chrome會被打開，同時會建立一個'http://localhost:8081/debugger-ui'網頁

• 打開Chrome開發者工具

在該'http://localhost:8081/debugger-ui'網頁下打開開發者工具，打開Chrome菜單->選擇更多工具->選擇開發者工具。你也能夠經過快捷鍵(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打開開發者工具

打開Chrome開發着工具以後你會看到以下界面

Sources面板

Sources面板提供了調試 JavaScript 代碼的功能

Sources面板可讓你看到你所要檢查的頁面的全部腳本代碼，並在面板選擇欄下方提供了一組標準控件，提供了暫停，恢復，步進等功能。在窗口的最下方的按鈕能夠在遇到異常(exception)時強制暫停。源碼顯示在單獨的標籤頁，經過點擊 打開文件導航面板，導航欄中會顯示全部已打開的腳本文件

Chrome開發着工具中的Sources面板幾乎是最經常使用的功能面板。一般只要是開發遇到了js報錯或者其餘代碼問題，在審視一遍本身的代碼而一無所得以後，首先就會打開Sources進行js斷點調試

執行控制工具

從上圖能夠看到'執行控制工具'按鈕在側板頂部，讓你能夠按步執行代碼，當你進行調試的時候這幾個按鈕很是有用：

• 繼續(Continue): 繼續執行代碼直到遇到下一個斷點
• 單步執行(Step over): 步進代碼以查看每一行代碼對變量做出的操做，當代碼調用另外一個函數時不會進入這個函數，使你能夠專一於當前的函數
• 跳入(Step into): 與 Step over 相似，可是當代碼調用函數時，調試器會進去這個函數並跳轉到函數的第一行
• 跳出(Step out): 當你進入一個函數後，你能夠點擊 Step out 執行函數餘下的代碼並跳出該函數
• 斷點切換(Toggle breakpoints): 控制斷點的開啓和關閉，同時保持斷點無缺

查看js文件

若是你想在開發者工具上預覽你的js文件，能夠在打開Sources tab下的debuggerWorker.js選項卡，該選項卡下會顯示當前調試項目的全部js文件，或者是用快捷鍵 cmd + o 調出文件搜索直接進行搜索，這個更加便捷高效

斷點

斷點(Breakpoint)是在腳本中設置好的暫停處，在DevTools中使用斷點能夠調試JavaScript代碼

• 添加和移除斷點

在 Sources 面板的文件導航面板中打開一個JavaScript文件來調試，點擊邊欄(line gutter) 爲當前行設置一個斷點，已經設置的斷點處會有一個藍色的標籤，單擊藍色標籤，斷點即被移除

右鍵點擊藍色標籤會打開一個菜單，菜單包含如下選項：執行到此(Continue to Here)，黑盒腳本(Blackbox scripts)，移除斷點(Remove Breakpoint)， 編輯斷點(Edit Breakpoint)，和 禁用斷點(Disable Breakpoint)。在這裏你能夠對斷點進行更高級的操做

高級操做

• Continue to Here

若是你想讓程序當即跳到某一行時，這個功能會幫到你。若是在該行以前還有別的斷點，程序會依次通過前面的斷點。另外須要提出的是這個功能在任意一行代碼的邊欄(gutter line)前單擊右鍵都會看到

• Blackbox scripts

黑盒腳本會從你的調用堆棧中隱藏第三方代碼

• Edit Breakpoint

經過該功能你能夠建立一個條件斷點，你也能夠在邊欄(gutter line) 右鍵並選擇添加條件斷點(Add Conditional Breakpoint) 。在輸入框中，輸入一個可解析爲真或假的表達式。僅當條件爲真時，執行會在此暫停

若是你想讓程序在某處歷來都不要暫停，能夠編輯一個條件永遠爲false的條件斷點。另外，你也能夠在該行代碼的邊欄(gutter line)前單擊右鍵選擇「Never pause here」便可，你會發現「Never pause here」其實就是在該行代碼上設了一個永遠爲false的條件斷點

管理斷點

你能夠經過Chrome開發者工具的右邊面板來統一管理你的斷點

你能夠經過斷點前的複選框來啓用和禁用斷點，也能夠單擊右鍵來進行更多的操做(如：移除斷點，移除全部斷點，啓用禁用斷點等)

全局斷點

全局斷點的做用是，當程序出現異常時，會在異常的地方暫停，這對快速定位異的常位置很方便。 作iOS開發的同窗都知道在Xcode中能夠設置全局斷點，其實在Chrome 開發者工具中也一樣有與之對應的功能，叫'Pause On Caught Exceptions'。若是勾選上此功能，則即便所發生運行時異常的代碼在 try/catch 範圍內，Chrome 開發者工具也可以在錯誤代碼處停住

控制檯

DevTools控制檯(Console)可讓你在目前已暫停的狀態下進行試驗。按 Esc 鍵打開/關閉控制檯

你能夠在控制檯(Console)上打印變量，執行腳本等操做。在開發調試中最經常使用

更多文章

• 做者React Native開源項目OneM【500+ star】地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
• 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！

小夥伴們掃下方二維碼加入RN技術交流QQ羣