前端調試入門
歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~
本文由MarsBoy發表於雲+社區專欄
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。
相關閱讀 【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識
此文已由作者授權騰訊雲+社區發布，更多原文請點擊
搜索關注公眾號「雲加社區」，第一時間獲取技術乾貨，關注後回復1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社區！
推薦閱讀：