Debug

react native 官方 或者 中文版

若使用nuclide 可參考 此網址

開發者菜單

Android有以下幾種方式打開 開發者菜單（Developer Menu）

• command + M

• 搖晃設備

• 命令 $ import adb shell input keyevent 82

IOS 有以下幾種方式打開 開發者菜單（Developer Menu）

• command + D

在使用實(真)機測試時，確保你的手機和電腦處在同一網段內(同個路由器下)

如果在previous session已開啟Debug，debugging會一直開著，則步驟2就不用了

Android必須選用Android5.0以上的設備

如何 Debug

1.開啟模擬器

2.打開 開發者菜單（Developer Menu），並且選擇Debug JS Remotely 啟動JS遠程調試功能，此時Chrome會自動打開http://localhost:8081/debugger-ui 此頁面。 3.在Chrome中打開 開發者工具 使用以下方式打開 開發者工具

• command + option + I

• Chrome菜單 > 更多工具 > 開發者工具

• 

開啟後如下圖

Chrome 開發工具詳細介紹

以下文章出自 React Native調適技巧與心得 該文章作者(crazycodeboy)的React Native研究與實踐

Chrome 開發工具 巧用Source面板 Google Chrome 開發工具，是基於google瀏覽器內涵的一套網頁製作和調試工具。開發者工具允許網頁開發者深入瀏覽器和網頁應用程式的內部。該工具可以有效的追蹤佈局問題，設置JavaScript斷點並可深入了解程式碼的最優化策略。

Chrome 開發工具一共提供了8大组工具：

• Element 面板： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。

• Network 面板：用於查看 HTTP 請求的詳細訊息，如請求頭、響應頭及返回内容等。

• Source 面板：用於查看和條是當前頁面所家載的腳本的原文件。

• TimeLine 面板： 用於查看腳本的執行時間、頁面元素渲染時間等信息腳本的執行時間。

• Profiles 面板：用於查看 CPU 執行時間與內存佔用等訊息。

• Resource 面板：用於查看當前頁面所請求的資源文件，如HTML，CSS 樣式文件等。

• Audits 面板：用於優化前端頁面，加速網頁家載速度等。

• Console 面板：用於顯示腳本中所輸出的調適訊息，或運行測試腳本等。

提示：對於調適React Native應用來說，Sources和Console是使用頻率很高的兩個工具。

你可以像調適JavaScript程式碼一樣來調適你的React Native程式。

巧用Source面板

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

執行控工具 從上圖可以看到“執行控工具”按鈕在側板頂部，讓你可以按步執行程式碼，當你進行調適的時候這幾個按鈕非常有用：

• 繼續(Continue):繼續執行程式碼直到遇到下一個斷點。

• 單步執行(Step over):步進程式碼以查看每一行程式碼對變量做出的操作，當程式碼調用另一個函數時不會進入這個函數，使你可以專注於當前的函數。

• 跳入(Step into):與Step over類似，但是當程式碼調用函數時，調試器會進去這個函數並跳轉到函數(function)的第一行。

• 跳出(Step out):當你進入一個函數後，你可以點擊Step out執行函數剩餘的程式碼並跳出該函數。

• 斷點切換(Toggle breakpoints):控制斷點的開啟和關閉，同時保持斷點完好。

查看js文件 如果你想再開發者工具上瀏覽你的js文件，可以再打開Sources tab下的debuggerWorker.js選項卡，該選項卡下會顯示當前調適項目的所有js文件。

斷點 斷點(Breakpoint)是在腳本中設置好的暫停處。在DevTools中使用斷點可以調適Js程式碼，DOM更新和network calls。 在Source面板的文件導航面板中打開一個js文件來調適，點擊邊欄(line gutter)為當前行設置一個斷點，已經設置的斷點處會有一個藍色的標籤，單擊藍色標籤，斷點即被移除。

斷點的高級操作 右鍵點擊藍色標籤會打開一個菜單，菜單包含以下選項：執行到此(Continue to Here)、黑色腳本盒(Blackbox Script)、移除斷點(Remove Breakpoint)、編輯斷點(Edit Breakpoint)和禁用斷點(Disable Breakpoint)。在這裡你可以對斷點進行更高級的定制化的操作。

• 執行到此(Continue to Here):如果你想讓程式立即跳到某一行時，這個功能會幫到你。如果在該行之前還有別的斷點，程式會依次經過前面的斷點。另外需要提出的是這個功能在任意一行程式碼的邊欄(gutter line)前單擊右鍵都會看到。

• 黑盒腳本(Blackbox scripts):黑盒腳本會從你的調用堆棧中隱藏第三方程式碼。

• 編輯斷點(Edit Breakpoint):通過該功能你可以創建一個條件斷點，你也可以在邊欄右鍵並選擇添加條件斷點(Add Conditional Breakpoint)。再輸入框中，輸入一個可解析為真或假的表達式。僅當條件為真時，執行會在此暫停。

管理斷點 可以通過Chrome開發者工具的右邊面板來統一管理斷點。 ps.你可以通過斷點前的複選框來啟用和禁用斷點，也可以單擊右鍵來進行更多的操作（如:移除斷點、移除所有斷點，啟用禁用斷點等）。

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

不要忽略控制台 DevTools控制台(Console)可以讓你在目前已暫停的狀態下進行試驗。按Esc鍵打開/關閉控制台。 ps.你可以在控制台上打印變量，執行腳本等操作。在開發調適中非常有用。

快捷鍵(mac):

• cmd+p or cmd+o - 快速搜尋和打開你Project的文件

• cmd+f - 在當前文件內查找內容

• cmd+option+f - 在所有文件內查找內容

• cmd+g - 在Sources標籤中打開一個文件後，按下此快捷，可跳至妳所輸入的行號

ps. 在Android上，若連不到 方式一： 將Android5.0以上設備上，將手機通過usb連接到你的電腦，然後通過adb命令行工具運行如以下命令來設置端口轉發 adb reverse tcp:8081 tcp:8081 方式二： 你也可以通過在"Developer Menu"下的”Dev Settings“中設置妳的電腦ip來進行調試。 在使用實機debug時，請確保手機和電腦的網路在同一個網段內