歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~
1 控制檯
這裡的控制檯特指PC端瀏覽器進入開發者模式之後新開啟的操作介面。常見的控制檯有Chrome的控制檯，Firefox的firebug。這些都能幫助我們除錯前端問題。本手冊將以Chrome瀏覽器控制檯為例進行講解。
下圖1為Chrome瀏覽器控制檯，圖2為Firefox控制檯。
圖1 Chrome瀏覽器控制檯
圖 2 Firefox瀏覽器控制檯
1.1指令碼執行
上圖1中，點選tab3 進入“console”Tab頁，即為指令碼執行區域。在這裡，可以輸入任何可執行的js程式碼，回車即可執行並列印返回值。比如：輸入“alert(`hello,world`)”。即可在瀏覽器彈出彈框，顯示‘hello,world’。
1.2網路請求
上圖1中，點選tab5進入“Network”Tab頁，可以看到當前的所有網路請求，包括url，請求引數，返回資料，請求cookie等詳細資訊。前面提到的流水號，就可以在這裡通過檢視具體介面返回值找到。網路請求截圖，請見：圖3.
圖3 Network截圖
1.3 cookie
開發者工具中也可以檢視cookie等本地儲存相關資料（包括localStorage，sessionStorage等）。Tab6進入Application選項卡，即可檢視相關資料，其中就有Cookie等詳細資訊。見圖4示意。
圖4 cookie檢視截圖
2 斷點debug
斷點是指js程式碼在執行的過程中，我們需要人為中斷執行，並檢視此刻的執行時變數等相關資訊的一種除錯方法。
2.1如何打斷點
以Chrome為例，打斷點首先需要切換到Tab4 Source。找到需要打斷點的檔案和行，在此行之前點選一下即可。然後重新整理頁面或者執行其他可以讓程式執行到斷點位置的邏輯(比如觸發一個事件，console裸調指定方法函式等)。
下圖5是在一個活動頁面對登出邏輯打斷點的示意圖，圖中，我們事先對login.js的913行打了一個斷點，然後點選頁面上的登出按鈕，程式執行到斷點位置暫停。
快捷鍵：
1） F8，恢復執行並跳到下一個斷點
2） F10，恢復執行並跳到下一個執行棧，一般為子函式。
圖5 打斷點示意圖
2.2 如何檢視執行時變數
我們打斷點是為了調查問題，程式執行到斷點位置，可以直接滑鼠移動到相關變數名或者方法上面檢視它的值。如果想在執行到斷點位置執行其它邏輯，可以直接在console區域執行相關指令碼。
3代理
前端代理是指用本地檔案替換網路檔案的一個動作，代理可以用來除錯問題。比如在本地檔案中加上alert彈框彈出關鍵節點的資訊，這可以有利於除錯。特別是前端除錯。或者當我們發現網路檔案有問題的時候，需要修復問題，就可以本地改檔案，然後代理，這樣訪問指定頁面就可以看到修改後的效果。
3.1常規代理
常規代理指http代理，即代理http協議的各種網路請求。代理需要用到第三方代理工具：Windows上推薦用Fiddler，Mac上推薦用Charles。
下面以Fiddler為例，介紹如何使用Fiddler進行常規代理。
1.首先下載Fiddler，並安裝。Fiddler實質上是一款基於網路抓包的Web Debuger工具。
2.開啟Fiddler，點選右側的AutoResponder的Tab頁，勾選圖6所示的幾個選項。
3.在左側網路列表中選擇自己需要代理的請求，拖拽到右側，進入下面的Rule Editor。
在Rule Editor中把下面的輸入框中的值設為本地檔案，可以通過下拉選擇“Find a File”彈出檔案選擇對話方塊進行選擇。
點選右下角的儲存，代理設定完畢。重新重新整理網頁，請求即可，這時，指定的網路請求將會直接用本地的檔案替代。
圖6 Fiddler代理配置示意
3.2 https代理
https是採用了SSL加密服務的Http協議，客戶端與伺服器間的通訊是加密傳輸的，Fiddler如果需要做中間人，就必須擁有被代理域名的證書，可以解密遠端資料，並且通過自己的證書傳給瀏覽器。
下面介紹如何配置https代理，可以參照圖7.
1.開啟Fiddler，一次進入選單：ToolsàFiddler Options àHTTPS
2.勾選“Captrue HTTPS CONNECTs”，
3.勾選“Decrypt HTTPS traffic”，選擇“from all process”
4.勾選“Ignore server certificate errors”
5.點選右邊“Actions”按鈕，選擇“Trust Root Certificate”選項,選擇Yes安裝證書。
至此，Https代理已經配置完畢，如果要進行代理，剩下的步驟可以參照3.1。
圖7 HTTPS代理配置示意
3.3手機代理
移動端請求如何代理，這塊也可以通過Fiddler完成。按照以下步驟完成設定：
保證手機和電腦上的Fiddler在同一個網段(連線同一個Wifi，比如LabWifi)。
1.開啟Fiddler，進入ToolsàFiddler OptionsàConnections
2.設定Port為一個固定數字，比如8888
3.勾選：“Allow remote computers to connect”
4.勾選：“Reuse client connections“
5.勾選：“Reuse server connections“
6.設定手機wifi代理到PC的ip地址，並且埠設定為上面的固定數字，比如8888。
此時完成設定，手機上的http請求也可以用fiddler抓取了。
注：如果要進行手機上的https抓包，需要在以上步驟完成之後，手機訪問PC的ip:port(和fiddler上設定的port保持一致)，獲取證書並安裝之後才可以。
4移動端debug技巧
移動端除錯指在安卓機/iphone/ipad等手持裝置上除錯前端頁面邏輯的概念。這裡將針對幾種典型的情況給出最合適的debug方法。
4.1 安卓 微信/手Q/QQ瀏覽器/騰訊產品APP
這幾種情況都有一個共性，就是app是騰訊的產品，而且在安卓手機上，我們知道安卓支援連線資料線結合Chrome核心的偵錯程式進行inspector除錯，故這幾類情況我們將推薦使用TBS Studio進行除錯。
TBS Studio是QQ瀏覽器X5核心前端除錯平臺，支援斷點除錯，抓取網路請求，檢視DOM結構，console控制檯等，功能非常豐富。電腦上安裝TBS studio之後，就可以將手機通過資料線連線到電腦，然後通過TBS Studio進行除錯。
具體的操作方法見 https://x5.tencent.com/
4.2安卓其它環境/ios環境
安卓其它環境下，或者ios環境下除錯前端問題很難進行斷點除錯，只能採用最原始的打log，即alert彈框。這種環境下我們需要藉助fiddler結合手機進行代理檔案，並在代理的js檔案中按需打alert。
此文已由作者授權騰訊雲+社群釋出，更多原文請點選
搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社群！