引言

最近老大在cr我代碼時(shí)，我就靜靜坐在他旁邊看他裝逼。他一頓斷點(diǎn)+抓包+各種騷操作給我看楞了，我沒忍住就讓他手把手教我，他就和我在一個(gè)小屋子里xxxx了幾個(gè)小時(shí)，他手法太快了俺看一遍就忘了，于是乎就靠回憶和資料查找整理了哈高頻的js調(diào)試技巧，希望能幫助到各位。

一：console.dir

在打印dom節(jié)點(diǎn)時(shí)，普通的console.log是純文本格式，而dir的打印是以對(duì)象的方式。因此在輸出dom節(jié)點(diǎn)時(shí)，務(wù)必使用dir打印

<div id="main">
    <div class="box1">
      <p>p1</p>
    </div>
  </div>

  let oD = document.querySelector('.box1')
  console.log(oD)//普通的log輸出
  console.dir(oD)//dir輸出方式

二：二次發(fā)起請(qǐng)求

在調(diào)試接口時(shí)，通常我們會(huì)刷新頁面然后觀察network的接口信息，如果項(xiàng)目加載時(shí)間過長(zhǎng)，刷新頁面查看接口的效率是十分低的。

• 對(duì)接口請(qǐng)求右鍵
• 選擇Relpy xhr發(fā)送請(qǐng)求

三：接口請(qǐng)求參數(shù)修改

借助瀏覽器控制臺(tái)可以不用修改代碼就可以發(fā)送不同參數(shù)的新請(qǐng)求了。具體操作如下

• 對(duì)接口請(qǐng)求右鍵
• 選擇copy。
• 再選擇copy as fetch。
• 在console區(qū)域粘貼上面的請(qǐng)求信息，然后修改請(qǐng)求體參數(shù)。
• 然后切換到networkl查看最新請(qǐng)求的結(jié)果

效果展示

四：css查看偽類hover,active樣式

在控制臺(tái)右側(cè)選擇:hov可以選擇對(duì)應(yīng)dom各種偽類狀態(tài)下的css樣式，十分的便捷

五：css樣式跳轉(zhuǎn)到對(duì)應(yīng)文件查看

選擇css樣式，按住alt點(diǎn)擊就可以跳到對(duì)應(yīng)文件查看具體代碼

六：控制臺(tái)輸出選擇的dom

首先在頁面選擇指定的位置dom,然后在在控制臺(tái)使用$0就表示當(dāng)前選中的dom了

七：展開全部dom

有時(shí)候我們?cè)陧撁娌檎乙粋€(gè)dom時(shí)，它嵌套層級(jí)特別深。這巨他媽蛋疼一層層展開，這個(gè)時(shí)候我們就需要找到一鍵全部展開來幫助我們解決這個(gè)問題了。

右鍵選擇expand就可以展開選擇的dom了。

八：斷點(diǎn)調(diào)試

斷點(diǎn)調(diào)試是本節(jié)最后一個(gè)內(nèi)容了，它也是最核心的內(nèi)容了，玩的6的是真的6，老大說我搞懂?dāng)帱c(diǎn)調(diào)試和對(duì)應(yīng)的堆棧上下文就可以畢業(yè)了。（畢業(yè)=辭退？還是。。。）下面我列舉的僅僅是入門級(jí)別的斷點(diǎn)調(diào)試，只是說明如何上手操作，里面許多東西還望大家多多探索。

1. 打斷點(diǎn)方式

代碼中：debugger

在需要斷點(diǎn)的地方寫入debugger，此時(shí)程序運(yùn)行后代碼就會(huì)卡在這里，等待主人的安排

let a = 10
debugger
a++

瀏覽器中：

• 選擇sources
• 在指定代碼行左側(cè)單擊

2. 斷點(diǎn)間調(diào)試

第一種斷點(diǎn)調(diào)試是十分常用的方式，代碼會(huì)從當(dāng)前斷點(diǎn)直接運(yùn)行到下一個(gè)斷點(diǎn)處執(zhí)行，中間經(jīng)過代碼都默認(rèn)被執(zhí)行且跳過。如下圖紅色按鈕就是斷點(diǎn)間調(diào)試。

例子演示

我們?cè)谏蠄D中打了3個(gè)斷點(diǎn)，逐個(gè)點(diǎn)擊，首先從斷點(diǎn)15行直接跳到斷點(diǎn)17行，最后跳到19行。由于異步最后執(zhí)行，所以最后又跳到斷點(diǎn)15行結(jié)束。斷點(diǎn)經(jīng)過的地方鼠標(biāo)移動(dòng)到變量上可以查看其內(nèi)部數(shù)據(jù)。

3. 逐步調(diào)試

逐步調(diào)試很明顯就是字面意思，從當(dāng)前斷點(diǎn)位置開始一行一行的運(yùn)行代碼，稍微注意的是，遇到函數(shù)不進(jìn)入函數(shù)的內(nèi)部，而是直接執(zhí)行完函數(shù)。

例子演示

4. 進(jìn)入與進(jìn)出函數(shù)調(diào)試

逐步調(diào)試遇到函數(shù)是不進(jìn)入函數(shù)內(nèi)部的，因此需要借助進(jìn)入和進(jìn)出調(diào)試方式控制函數(shù)的訪問

例子演示

5. 逐步調(diào)試詳細(xì)版

上面講述了第一種逐步調(diào)試方式，其遇到函數(shù)是不進(jìn)入函數(shù)內(nèi)部的，而是直接執(zhí)行函數(shù)。因此下面這種方式是逐步調(diào)試的詳細(xì)版，它也是從斷點(diǎn)位置逐步的調(diào)試運(yùn)行，遇到函數(shù)也會(huì)進(jìn)入函數(shù)的內(nèi)部進(jìn)行逐步執(zhí)行。

九：React/Vue中嘗試

有吊毛說react和vue咋調(diào)試？嗯，那個(gè)吊毛其實(shí)就是我，其實(shí)也很簡(jiǎn)單滴。

• 在需要調(diào)試的代碼位置插入debugger
• 在瀏覽器控制臺(tái)需要查看變量的地方插入斷點(diǎn)
• 使用各種調(diào)試連招一頓操作就行。

代碼例子

例如下面的例子，頁面最后顯示的num是多少？最后是101，不了解批量setState的開始肯定蒙，我們調(diào)試看看

import React,{useEffect, useState} from "react";
const Home = () => {
  const [num,setNum] = useState(1)
  useEffect(()=>{
    debugger
    setNum(100)
    setTimeout(() => {
      setNum(num+100)
    }, 0);
  },[])
  return (
    <div>num:{num}</div>
  )
}
export default Home;

調(diào)試演示 根據(jù)調(diào)試發(fā)現(xiàn)，進(jìn)入定時(shí)器的時(shí)候num還未更新，還是1。

到此這篇關(guān)于值得學(xué)習(xí)的JavaScript調(diào)試技巧分享的文章就介紹到這了,更多相關(guān)JavaScript調(diào)試技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論