Web前端調試技巧與實例詳解

邵英安 陳廣燕 孫天航 陶忠銀 朱麗雪

摘要：針對目前web前端語言、前端框架、前端工程化、小程序和跨平臺等主流技術迅猛發展，因此對前端所采用的語言、工具、框架調試能力的要求越來越高，本文以谷歌開發者工具為研究對象，簡要的介紹谷歌開發者工具的主要功能，重點講解在前端教學課程中典型案例具體應用，并給出了詳細的調試操作步驟。因此，有利于學生深入理解前端語言、原理、工具和框架實現過程，有助于提高學生實際的動手調試操作能力，從而為培養合格前端工程師夯實堅實的基礎。

關鍵詞：前端課程;前端調試;Chrome;DevTools

1、概述

隨著前端技術的日新月異，無論在PC端還是移動端，為了適應不同的業務場景的需求，導致前端頁面開發越來越雜，再加上前端語言局限性，對于前端項目的開發、維護和重用的開發成本非常高，因此，程序調試能力是前端開發人員的是必備的職業技能，豐富的調試經驗有助于提高開發效率，減少項目開發周期，降低開發成本。如何在高校相關專業中web前端課程體系當中引入調試相關教學內容，盡早讓學生了解和掌握調試工具和調試技巧就尤其重要。

2、Chrome DevTools 簡介

工欲善其事，必先利其器，如何設計和調試復雜功能的前端頁面，是前端開發人員每天必備的工作，當設計出現了錯誤或異常時，如何有效的調試排查當前頁面存在的錯誤，谷歌瀏覽器為所有的開發人員提供了內嵌于瀏覽器的開發者工具（Chrome DevTools），該工具允許開發人員對頁面進行語法檢查，并借助瀏覽器深入前端項目應用程序的頁面代碼內部，提供九種強大的調試分析功能，是所有從事web前端開發當中不可或缺的工具。

其主要功能簡介如下：元素選項卡可以查看當前頁面的DOM樹，并且對DOM元素進行實時的編輯和調試元素屬性、事件監聽和斷點的設置等功能;控制臺選項卡可以利用console對象所提供頁面的動態交互調試;源代碼選項卡主要提供的功能是查看調試前端資頁面文件;網絡選項卡、性能選項卡和內存選項卡，主要提供的功能通過分析服務器端發送的資源，從而實現相應的頁面加載優化;應用選項卡和安全選項卡主要提供的功能是記錄頁面所加載的所有資源，包括網頁文檔、JS腳本、CSS樣式等以及對頁面時行安全性檢測。

3、典型調試案例

3.1 this指向

在JavaScript語言中，this指向問題一直以來是前端教學內容的重點和難點，由于其指向會根據實際運行情況上下文來確定，其用法靈活多變，所以，學生在具體代碼語境中去應用this指向就非常容易出現問題，借助開發者工具，通過斷點調試，來深入理解各種情況this指向就非常必要，本示例代碼以圖1為例：

首先創建id為btn的按鈕，通過JS為按鈕綁定單擊事件，并在單擊時件中輸入this對象。其具體的操作步驟如下：第一步，用瀏覽器加載頁面，并打開開發者源代碼工具選項卡;第二步，設置this斷點（代碼14行）;第三步，單擊Event Listener Breakpoints菜單，選擇Mouse事件并勾選 click事件，最后重新加載頁面，并將鼠標懸停this斷點上，此時，瀏覽器自動識別this所指向的對象為名為button#btn的DOM元素，如圖2所示。因此，通過開發者工具，很容易分析this指向問題，事半功倍，一目了然。

4、結束語

本文以谷歌開發者工具做為web前端頁面主要分析調試工具，簡要介紹其功能，并給出了典型案例詳細的調試演示過程，讓同學們更好的利用工具所提供的功能，深入理解體會前端理論，從而快速準確的分析、追蹤和定位錯誤，更加高效的進行前端頁面開發。

參考文獻：

[1] 李丹.JavaScript調試方法以及常見錯誤[J].中小企業管理與科技（下旬? 刊），2011（07）：295-297.

[2] 葉家彬，于海波.JavaScript程序動態切片技術的研究[J].計算機與現代化，2016（05）：100-105.

[3] 董寧，王波.利用控制臺語句實現JavaScript代碼單元測試研究[J].軟件導刊，2017，16（02）：13-15.

作者簡介：

邵英安，1982年，男，漢族，籍貫：吉林白城，;學歷：碩士，研究方向：web全棧開發，

陳廣燕，1996年，女，土家族，籍貫：貴州銅仁，2017級本科學生.

朱麗雪，1999年，女，漢族，籍貫：吉林通化，2017級本科學生.

孫天航，1998年，女，蒙古族，籍貫：吉林松原，2017級本科學生

陶忠銀，1998，男，漢族，籍貫：安徽阜南，2017級本科

（作者單位：白城師范學院 計算機科學學院）