PC／APP前端項目調試方式
pc項目的調試方法
pc上的調試的好像沒什麼東西，首選你要選擇一個用的習慣的瀏覽器，然後找到報錯或者問題所在的地方打個斷點跟下去就行了。。。
瀏覽器選擇
基本來說比較受歡迎的應該就是chrome和firefox了，比較推薦chrome，沒有理由的推薦，不過firefox也還好。沒什麼大的差別。
react項目調試
瀏覽器中打斷點
當然首先你還得找到文件在哪，如果直接去看對應的index.jsx文件，你會看到懷疑人生的。
正確的路徑是這樣的:
打開控制檯->點擊sources標籤欄->一堆列表中的webpack->點開之後，那個.文件夾->打開之後就是對應你src的目錄了。
因爲es6等語法瀏覽器支持性不太好，所以我們瀏覽器下看到的和你寫的代碼好像有哪裏不太對。
本來是這樣的：
getLink(module){
const key = module.get('key')
return key ?<a href={module.get('val')} className="send-link" target="_blank">傳送門：至 <b>{key}</b> 文檔處</a>:null
}
看到的卻是這樣的：
Header.prototype.getLink = function getLink(module) {
var key = module.get('key');
return key ? _react2['default'].createElement('a', { href: module.get('val'), className: 'send-link', target: '_blank' }, '傳送門：至 ', _react2['default'].createElement('b', null, key), ' 文檔處') : null;
};
其實也沒什麼差別，就是把es6的語法轉化之後的語法。基本上找到該打斷點的地方，跟進去調試就可以了。(這裏就不介紹如何打斷點了，聰明如你必須會，下面配一張調試時的截圖)
APP項目的調試方法
app項目調試的話一般分一下幾種情況。單純的h5頁面調試、模擬器調試、真機調試這三大類。下面簡單介紹一下。
純h5頁面調試
首先，這裏的純h5頁面是指不涉及到jsBridge的內容。和pc頁面基本沒有差別只不過運行在手機中。這樣的調試的話可以直接在chrome中調試，只需要打開移動端調試模式即可。
打開控制檯，左上角有個類似手機的按鈕。然後就可以看到頁面已經變成適配不同屏幕了。簡單粗暴，沒什麼好說的。
模擬器調試
如果用到native的部分功能的話，在瀏覽器上部分功能就沒辦法代替了。這樣就需要模擬器了。因爲大家基本用的都是mac。所以這裏就介紹一下ios開發的工具xcode。
1、下載xcode
下載的話比較簡單，直接在appstore搜索xcode就行。請在網絡比較好的情況下下載，畢竟太大
2、拉native代碼
需要找到native同學，拉下來對應app的代碼。畢竟xcode只是個工具，具體app什麼樣還是需要native代碼的。公司內部的話比較麻煩需要申請各種權限，慢慢來就行。
3、啓動模擬器
等正確代碼拉下來之後，在項目裏找到 app名.xcworkspace文件，用xcode打開，應該會報錯，請在ios同學+搜索引擎的幫助下解決。
正常啓動成功之後，就會打開一個模擬器。
4、調試h5頁面
完全啓動之後，進入用到要調試的頁面，你就需要打開safari瀏覽器了。畢竟蘋果的配套全家桶。
5、進入要調試的webivew頁面
在safari瀏覽器中【開發】->【iOS Simulator】->【正在調試的網站】打開對應的調試窗口
在彈出的調試窗口中，可以看到當前正在加載網頁的各種信息，包括源碼、請求頭、圖片、加載的資源與腳本、控制檯輸出等。
（在執行這一步的時候，有人可能在safari中沒有找到[開發]按鈕，則需要在safari的偏好設置–》高級–》勾選開發者模式（在最下面,具體見圖））
還有一個點需要注意的是：開發】->【iOS Simulator】->【正在調試的網站】，中【正在調試的網站】僅出現你正在調試的幾個頁面地址。剛開始我選擇ios simulator時發現：沒有可以選擇的網址。
更多可以參考這篇博文：http://blog.fantasy.codes/front-end/2014/01/11/debug-ios-with-safari/
並且它和chrome的調試方式相同，你可以直接修改網頁的CSS樣式，對網頁佈局等進行修改，而不用重新運行整個App。
接下來就是愉快的調試吧
android真機調試
真機調試的話，ios比較麻煩需要的東西比較多。安卓調試就比較方便了，下面介紹一下如何調試安卓。
1、啓動手機上的開發者模式
這個分手機而異，應該要在關於設備中查找。實在不行，外事不決問百度。
USB鏈接電腦和手機
2、Chrome中調試
打開電腦中的 Chrome，瀏覽器中輸入 chrome://inspect ，進入後勾選 Discover USB devices，就可以看到手機的 Chrome 上打開的頁面了。
點擊 inspect，會在新窗口打開一個 Chrome Developer Tools 的頁面，在此頁面輸入網址便可以看到手機上加載了相同的網址，順利的話就手機上就打開頁面了，即可以調試了。
到這裏關於調試的介紹就完了，都是些基本介紹。拋個磚而已，深入瞭解可以自行專研一下。
ios真機調試
對於比較麻煩的ios真機測試還是簡單介紹一下，ios調試還是離不開xcode的。這是ios開發必備工具。
1、登錄開發者中心，創建APP ID；
將你的設備（iPhone或iPad）註冊到開發者中心，需要安裝一個APP獲取設備的UUID，APP Store搜索可以得到很多這樣的APP；
2、創建一個證書，證書分爲開發證書和發佈證書兩種。調試階段使用開發證書即可；
3、創建一個Provisioning Profile 文件，同樣也分開發和發佈兩種，這裏創建開發版即可。創建時，需要選擇一個開發者證書，選擇允許調試的設備。
好了，將設備用USB連接到電腦，在Xcode中選擇你的設備，運行APP，就可以進行真機調試了。
小結
PC上調試、模擬器調試以及android真機上調試，親測按照上述步驟都是ok的。確實又漲知識了。