今天開(kāi)始應(yīng)該使用 5 個(gè)JavaScript調(diào)試技巧

k00baa 發(fā)布于2019-08-21 12:35 / 2477人閱讀

摘要：開(kāi)發(fā)人員工有調(diào)試這個(gè)問(wèn)題的超級(jí)有用技能。斷點(diǎn)斷點(diǎn)或我稱作的斷點(diǎn)，也允許當(dāng)一個(gè)預(yù)期請(qǐng)求創(chuàng)建時(shí)斷開(kāi)。當(dāng)調(diào)試你的應(yīng)用的網(wǎng)絡(luò)時(shí)這是個(gè)讓人吃驚的工具。也在開(kāi)發(fā)人員工具下包含一個(gè)稱作的類似工具。使用快速審核一下你的網(wǎng)站，來(lái)獲得有用實(shí)際的優(yōu)化技巧。

我之前使用過(guò)用 printf debugging，自此之后我用這種方法似乎總能更快地解決bug。
在某些情況下需要更好的工具，下面是其中的一些佼佼者，我敢肯定你會(huì)發(fā)現(xiàn)它們的有用之處：

1. debugger;

正如我之前提到的，你可以使用“debugger;”語(yǔ)句在代碼中加入強(qiáng)制斷點(diǎn)。
需要斷點(diǎn)條件嗎？只需將它包裝它在IF子句中：

if (somethingHappens) {
    debugger;
}

只需記住在上線前移除。

2. 當(dāng)節(jié)點(diǎn)變化時(shí)斷開(kāi)

有時(shí)DOM像有了自己的想法。當(dāng)不可思議的變化發(fā)生時(shí)很難找到問(wèn)題的根源。
Chrome開(kāi)發(fā)人員工有調(diào)試這個(gè)問(wèn)題的超級(jí)有用技能。這就是所謂的“Break on…”，你可以通過(guò)在元素選項(xiàng)卡上右鍵DOM節(jié)點(diǎn)找到它。

斷點(diǎn)可以在節(jié)點(diǎn)被刪除后設(shè)置，當(dāng)節(jié)點(diǎn)的屬性更改或者其子樹(shù)中的節(jié)點(diǎn)變化時(shí)。

3. Ajax斷點(diǎn)

XHR斷點(diǎn)或我稱作的Ajax斷點(diǎn)，也允許當(dāng)一個(gè)預(yù)期Ajax請(qǐng)求創(chuàng)建時(shí)斷開(kāi)。
當(dāng)調(diào)試你的web應(yīng)用的網(wǎng)絡(luò)時(shí)這是個(gè)讓人吃驚的工具。

4. 模擬不同的移動(dòng)設(shè)備

Chrome增加了內(nèi)置的移動(dòng)設(shè)備模擬工具，這將簡(jiǎn)化你的日常工作。
選擇任何非Console的選項(xiàng)卡找到它們，按鍵盤(pán)上的esc鍵并選擇你想摸你的移動(dòng)設(shè)備。

你當(dāng)然不會(huì)得到一個(gè)真正的iPhone，但尺寸、觸摸事件和agemt都會(huì)為你效仿。

5. 通過(guò)審核提升你的站點(diǎn)

YSlow是個(gè)偉大的工具。Chrome也在開(kāi)發(fā)人員工具下包含一個(gè)稱作Audits的類似工具。
使用快速審核一下你的網(wǎng)站，來(lái)獲得有用實(shí)際的優(yōu)化技巧。

還有什么呢?
沒(méi)有這些工具我不能想象如何開(kāi)發(fā)。當(dāng)我發(fā)現(xiàn)新的后我會(huì)發(fā)布更多，敬請(qǐng)期待。

via WEB前端開(kāi)發(fā)

GPU云服務(wù)器云服務(wù)器 javascript調(diào)試技巧調(diào)試技巧 javascript應(yīng)該學(xué)習(xí)哪部分 JAVASCRIPT技巧

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87671.html

相關(guān)文章

實(shí)用瀏覽器調(diào)試技巧（動(dòng)畫(huà)、節(jié)點(diǎn)刪除、節(jié)點(diǎn)增加）

摘要：今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。如圖彩蛋介紹一個(gè)在瀏覽器中全局搜索代碼的方法，點(diǎn)擊面板，會(huì)看到左側(cè)有目錄結(jié)構(gòu)，右鍵目錄結(jié)構(gòu)。如圖小擴(kuò)展還有一個(gè)場(chǎng)景一個(gè)頁(yè)面會(huì)從后臺(tái)請(qǐng)求字體包，字體包會(huì)在某個(gè)時(shí)刻通過(guò)加入到標(biāo)簽中。今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。先來(lái)看一個(gè)H5頁(yè)面，下面是地址http://liticool.info/wsvist/i...

honmaple 2019-08-30 11:11 評(píng)論0 收藏0
實(shí)用瀏覽器調(diào)試技巧（動(dòng)畫(huà)、節(jié)點(diǎn)刪除、節(jié)點(diǎn)增加）

摘要：今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。如圖彩蛋介紹一個(gè)在瀏覽器中全局搜索代碼的方法，點(diǎn)擊面板，會(huì)看到左側(cè)有目錄結(jié)構(gòu)，右鍵目錄結(jié)構(gòu)。如圖小擴(kuò)展還有一個(gè)場(chǎng)景一個(gè)頁(yè)面會(huì)從后臺(tái)請(qǐng)求字體包，字體包會(huì)在某個(gè)時(shí)刻通過(guò)加入到標(biāo)簽中。今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。先來(lái)看一個(gè)H5頁(yè)面，下面是地址http://liticool.info/wsvist/i...

jsbintask 2019-08-23 18:10 評(píng)論0 收藏0
實(shí)用瀏覽器調(diào)試技巧（動(dòng)畫(huà)、節(jié)點(diǎn)刪除、節(jié)點(diǎn)增加）

摘要：今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。如圖彩蛋介紹一個(gè)在瀏覽器中全局搜索代碼的方法，點(diǎn)擊面板，會(huì)看到左側(cè)有目錄結(jié)構(gòu)，右鍵目錄結(jié)構(gòu)。如圖小擴(kuò)展還有一個(gè)場(chǎng)景一個(gè)頁(yè)面會(huì)從后臺(tái)請(qǐng)求字體包，字體包會(huì)在某個(gè)時(shí)刻通過(guò)加入到標(biāo)簽中。今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。先來(lái)看一個(gè)H5頁(yè)面，下面是地址http://liticool.info/wsvist/i...

sherlock221 2019-08-30 11:24 評(píng)論0 收藏0
實(shí)用瀏覽器調(diào)試技巧（動(dòng)畫(huà)、節(jié)點(diǎn)刪除、節(jié)點(diǎn)增加）

摘要：今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。如圖彩蛋介紹一個(gè)在瀏覽器中全局搜索代碼的方法，點(diǎn)擊面板，會(huì)看到左側(cè)有目錄結(jié)構(gòu)，右鍵目錄結(jié)構(gòu)。如圖小擴(kuò)展還有一個(gè)場(chǎng)景一個(gè)頁(yè)面會(huì)從后臺(tái)請(qǐng)求字體包，字體包會(huì)在某個(gè)時(shí)刻通過(guò)加入到標(biāo)簽中。今天分享一些平時(shí)不常用，但總有一天你會(huì)用到的瀏覽器調(diào)試技巧。先來(lái)看一個(gè)H5頁(yè)面，下面是地址http://liticool.info/wsvist/i...

henry14 2019-08-26 18:36 評(píng)論0 收藏0
白鷺引擎王澤：重度H5游戲性能優(yōu)化技巧標(biāo)題的文章

摘要：據(jù)不完全統(tǒng)計(jì)，這五年中，白鷺引擎累計(jì)運(yùn)轉(zhuǎn)的游戲和微信小游戲的流水?dāng)?shù)據(jù)約為億。我們的引擎架構(gòu)師做某一沙龍活動(dòng)的演講速記，純純的干貨，分享給大家。王澤：各位開(kāi)發(fā)者下午好！我叫王澤，是白鷺引擎的首席架構(gòu)師。今天給大家分享的題目是《重度H5游戲性能優(yōu)化技巧》。之所以決定用這個(gè)題目，是因?yàn)槲易罱鼛字茉趶V深一帶拜訪了很多使用白鷺引擎的開(kāi)發(fā)者，發(fā)現(xiàn)特別是在廣州一帶，大部分開(kāi)發(fā)者都在做重度H5游...

xbynet 2019-08-23 12:12 評(píng)論0 收藏0