前端調試入門

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

本文由 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 送你一份技術課程大禮包！

海量技術實踐經驗，盡在雲加社區！