在運作帶RN的工程後，目前頁面下ios模拟器通過
cmd+D
(真機可以通過搖一搖),android通過Menu按鍵，調出RN的開發者菜單，如圖所示。
其中有選項“Debug in Chrome”，可以将JS腳本在Chrome中進行調試。
此時Chrome會建立一個位址為
http://localhost:8081/debugger-ui
的視窗。
視窗中提示：RN的JS腳本正在這個tab中運作，可以通過快捷鍵
⌘⌥J
打開開發工具。
按照提示打開debug模式，就可以看到這樣的一個視窗。
這個視窗事實上就是前段同學非常熟悉的視窗，但是對于初入前段的移動端同學還是有些陌生的。接下來，我們就來熟悉一下這個界面，被稱為Sources Panel。
基本環境
在左邊的一塊，就是内容源，其中可以看到頁面中的各種資源。左邊部分包括Sources和Content scripts和Snippet。
Sources
這個tab頁面本身包含的各種資源，他是按照頁面中出現的域來組織的。其中一些異步加載的JS檔案，在加載之後也會出現在這裡。
當調試時，需要檢視各種變量以及添加斷點時，可以在這個tab中進行。
調試方式和非腳本語言的調試方式一緻。
Content scripts
這個tab存放着的是 Chrome 的一種擴充程式，它是按照擴充的ID來組織的，這類擴充實際也是嵌入在頁面中的資源，它們也可以讀寫DOM。編寫、調試這類擴充的開發者才要關心它們，如果你的浏覽器沒安裝任何擴充，那麼 Content scripts 就看不到任何東西。
Snippets
這個tab可以讓你想儲存的小段的腳本、書簽或者是浏覽器中調試時經常用到的代碼，都可以使用Snippets，開發者可以在這個面闆裡面進行建立、存儲以及運作這些Snippets。
Sources Panel的中間一塊用來展示左邊資源檔案的内容。
Element
這個tab中，開發者們可以看到整個頁面的一些Dom結構。在調試時，可以通過編輯這裡的HTML，可以檢視css的元素，查找一些元素等等。
Network
這裡可以看到頁面中所加載的所有的資源響應的情況，響應時間，浏覽器的等待時間等，對于調試和網絡相關子產品有很大的作用。
Sources
顧名思義，這個tab開發者們可以看到頁面上加載的資源，比如圖檔、css、js等等。并且，在這個tab中，各個資源會被分門别類。
Timeline
與前面幾個tab相比，這個tab相對進階多了。他可以讓開發者們看到浏覽器的渲染過程。當切換到這個tab後，重新在模拟器中按下
cmd+R
，這時候，可以看到時間軸上的FPS、CPU的占用情況等。如果需要優化性能，這個tab需要優先關注。想要了解更多，可以檢視這篇文章。
Profiles
這個tab主要可以用來檢測CPU的占用程度，堆棧申請的記憶體。如下圖所示，當點選start後，可以重新重新整理頁面來記錄這些資料。這個tab可以Timeline配合使用，來更好的優化性能。
Resources
這個tab也是用來顯示資源的，和Sources不同的是，這個tab會對文檔的類型進行分類，并且可以進行增删改操作，修改頁面LocalStorage、SessionStorage、Cookies等等。
Audits
這個tab會告訴如何更好的優化頁面腳本，應該合并的css，js，應該明确大小的圖檔，還有他會告訴你在某個css檔案中無用樣式的百分比。
Console
這個tab的名字大家應該很熟悉了吧，但是，console不僅可以列印出想要元素的結果，還有很多很有用的功能。詳細情況這篇文章。
斷點調試常用功能
在源代碼上設定斷點
在調試代碼時，最常用的就是設定斷點，以下将就通常使用的斷點方式做一個總結。
斷點清單
在chrome中，可以通過左邊的内容源，打開對應的JavaScript檔案，滑鼠點選檔案行号就可以對其進行設定和删除斷點。而添加的每個斷點都會出現在右側調試區的BreakPoints清單中。這個清單可以幫助開發者快速定位斷點。
每個斷點都有激活和禁用兩種狀态。開發者們也可以在菜單右側中禁用所有斷點。
條件斷點
在斷點的位置右鍵菜單選中“Edit Breakpoint…”可以設定出發斷點條件。
斷點時調用棧
在斷點停下時，可以在右側的調試區的Call Stack中顯示目前斷點所處在的方法調用棧。
檢視變量
在Scope Bariables清單中，可以檢視到目前斷點處的局部變量和全局變量的值。
執行選中代碼
在斷點調試過程中，如果想要檢視某個變量或者表達式，可以選中後右鍵，然後選中“Evaluate in Console”來觀看選中的值的結果。
臨時修改JavaScript代碼
在調試代碼過程中，對于非腳本語言的開發者們通常會有這樣的調試過程：修改代碼–>重新run工程–>再次調試，直到修改到想要的結果。但是Chrome中可以臨時修改JS檔案中的内容，儲存後就可以立即生效，然後就可以再次調試。需要注意的是，這樣的修改是臨時的，當開發者們重新整理頁面後，修改的内容就沒有了
異常時斷點
在取消斷點的按鈕右側，有個類似禁止圖示的按鈕，該按鈕可以按下時可以捕獲異常時的情況。
在DOM元素上設定斷點
有時候開發者們需要監聽某個DOM被修改的情況，比如當資料重新整理時DOM元素是否有進行重新整理等等，如圖所示，在元素審查的Elements Panel中在某個元素上右鍵菜單裡面就可以設定三種不同情況的斷點：
1. 子節點修改
2. 自身屬性修改
3. 自身節點被删除
選中之後，當有對應的項被修改時，程式就會在該處進行斷點。
調試小技巧
了解了Sources Panel的一些基本功能，接下來介紹一些比較好的調試小技巧。
儲存修改
事實上，在Source的tab下，當開發者修改檔案後，是可以進行修改，并且支援版本回退的。在多次編輯和儲存後，點選右鍵，選擇
Local Modifications
，就可以看到之前的儲存記錄，并且可以選擇回退，另存為等等操作。
Console的功能
剛才講到，這個tab下有很多不僅僅是列印結果的功能。
$0,$_ 列印
在Element的tab中，可以通過選中某個Element，然後用0或者
_快速将這個Element列印在Console中。