> For the complete documentation index, see [llms.txt](https://twins-bamboo.gitbook.io/react-native-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://twins-bamboo.gitbook.io/react-native-note/start/debug.md). # Debug [react native 官方](https://facebook.github.io/react-native/docs/debugging.html) 或者 [中文版](http://reactnative.cn/docs/0.49/debugging.html#content) 若使用nuclide 可參考 此[網址](https://nuclide.io/docs/features/debugger/#basics) ### 開發者菜單 Android有以下幾種方式打開 開發者菜單（Developer Menu） * command + M * 搖晃設備 * 命令 `$ import adb shell input keyevent 82` IOS 有以下幾種方式打開 開發者菜單（Developer Menu） * command + D 在使用實(真)機測試時，確保你的手機和電腦處在同一網段內(同個路由器下) 如果在previous session已開啟Debug，debugging會一直開著，則步驟2就不用了 {% hint style="danger" %} Android必須選用Android5.0以上的設備 {% endhint %} ### 如何 Debug 1.開啟模擬器 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/1.png) \ 2.打開 開發者菜單（Developer Menu），並且選擇Debug JS Remotely 啟動JS遠程調試功能，此時Chrome會自動打開 此頁面。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/2.png) ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/3.png)\ 3.在Chrome中打開 開發者工具 使用以下方式打開 開發者工具 * command + option + I * Chrome菜單 > 更多工具 > 開發者工具 * ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/4.png) 開啟後如下圖 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/5.png) ### Chrome 開發工具詳細介紹 \ 以下文章出自 [React Native調適技巧與心得](http://lib.csdn.net/article/reactnative/38144) [該文章作者(crazycodeboy)的React Native研究與實踐](https://github.com/crazycodeboy/RNStudyNotes/) 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面板 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/6.png) Source面板可以讓你看到你所要檢查的頁面的所有腳本程式碼，並在面板選擇欄下方提供了一組標準控件，提供了暫停、恢復、步進等功能。在窗口最下方的按鈕可以再遇到異常(Exception)時強制暫停。源碼顯示在單獨的標籤頁，通過點擊 打開文件導航面板，導航欄中會顯示所有已打開的腳本文件。 **執行控工具** 從上圖可以看到“執行控工具”按鈕在側板頂部，讓你可以按步執行程式碼，當你進行調適的時候這幾個按鈕非常有用： * 繼續(Continue):繼續執行程式碼直到遇到下一個斷點。 * 單步執行(Step over):步進程式碼以查看每一行程式碼對變量做出的操作，當程式碼調用另一個函數時不會進入這個函數，使你可以專注於當前的函數。 * 跳入(Step into):與Step over類似，但是當程式碼調用函數時，調試器會進去這個函數並跳轉到函數(function)的第一行。 * 跳出(Step out):當你進入一個函數後，你可以點擊Step out執行函數剩餘的程式碼並跳出該函數。 * 斷點切換(Toggle breakpoints):控制斷點的開啟和關閉，同時保持斷點完好。 **查看js文件** 如果你想再開發者工具上瀏覽你的js文件，可以再打開Sources tab下的debuggerWorker.js選項卡，該選項卡下會顯示當前調適項目的所有js文件。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/7.png) **斷點** 斷點(Breakpoint)是在腳本中設置好的暫停處。在DevTools中使用斷點可以調適Js程式碼，DOM更新和network calls。 在Source面板的文件導航面板中打開一個js文件來調適，點擊邊欄(line gutter)為當前行設置一個斷點，已經設置的斷點處會有一個藍色的標籤，單擊藍色標籤，斷點即被移除。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/8.png) **斷點的高級操作** 右鍵點擊藍色標籤會打開一個菜單，菜單包含以下選項：執行到此(Continue to Here)、黑色腳本盒(Blackbox Script)、移除斷點(Remove Breakpoint)、編輯斷點(Edit Breakpoint)和禁用斷點(Disable Breakpoint)。在這裡你可以對斷點進行更高級的定制化的操作。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/9.png) * 執行到此(Continue to Here):如果你想讓程式立即跳到某一行時，這個功能會幫到你。如果在該行之前還有別的斷點，程式會依次經過前面的斷點。另外需要提出的是這個功能在任意一行程式碼的邊欄(gutter line)前單擊右鍵都會看到。 * 黑盒腳本(Blackbox scripts):黑盒腳本會從你的調用堆棧中隱藏第三方程式碼。 * 編輯斷點(Edit Breakpoint):通過該功能你可以創建一個條件斷點，你也可以在邊欄右鍵並選擇添加條件斷點(Add Conditional Breakpoint)。再輸入框中，輸入一個可解析為真或假的表達式。僅當條件為真時，執行會在此暫停。 **管理斷點** 可以通過Chrome開發者工具的右邊面板來統一管理斷點。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/10.png) ps.你可以通過斷點前的複選框來啟用和禁用斷點，也可以單擊右鍵來進行更多的操作（如:移除斷點、移除所有斷點，啟用禁用斷點等）。 **有一種斷點叫全局斷點** 全局斷點的作用是，當程式出現異常時，會在異常的地方暫停，這對快速定位異常的位置很方便。 做ios開發的同學都知道在Xcode中可以設置全局斷點，其實在Chrome開發者工具中也同樣有與之對應的功能，叫“Pause On Caught Exceptions”。如果勾選上此功能，則即使所發生運行時異常的程式碼在try/catch範圍內，Chrome開發者工具也能夠在錯誤代碼處停住。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/11.png) **不要忽略控制台** DevTools控制台(Console)可以讓你在目前已暫停的狀態下進行試驗。按Esc鍵打開/關閉控制台。 ![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/debug/12.png)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時，請確保手機和電腦的網路在同一個網段內