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

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

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

1、概述

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

2、Chrome DevTools 簡(jiǎn)介

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

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

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

3.1 this指向

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

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

4、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

作者簡(jiǎn)介：

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

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

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

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

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

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