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

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

關(guān)鍵詞：前端課程;前端調(diào)試;Chrome;DevTools

1、概述

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

2、Chrome DevTools 簡介

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

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

3、典型調(diào)試案例

3.1 this指向

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

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

4、結(jié)束語

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

參考文獻：

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

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

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

作者簡介：

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

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

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

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

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

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