引言

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

一：console.dir

在打印dom節(jié)點時，普通的console.log是純文本格式，而dir的打印是以對象的方式。因此在輸出dom節(jié)點時，務(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ā)起請求

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

• 對接口請求右鍵
• 選擇Relpy xhr發(fā)送請求

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

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

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

效果展示

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

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

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

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

六：控制臺輸出選擇的dom

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

七：展開全部dom

有時候我們在頁面查找一個dom時，它嵌套層級特別深。這巨他媽蛋疼一層層展開，這個時候我們就需要找到一鍵全部展開來幫助我們解決這個問題了。

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

八：斷點調(diào)試

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

1. 打斷點方式

代碼中：debugger

在需要斷點的地方寫入debugger，此時程序運行后代碼就會卡在這里，等待主人的安排

let a = 10
debugger
a++

瀏覽器中：

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

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

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

例子演示

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

3. 逐步調(diào)試

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

例子演示

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

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

例子演示

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

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

九：React/Vue中嘗試

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

• 在需要調(diào)試的代碼位置插入debugger
• 在瀏覽器控制臺需要查看變量的地方插入斷點
• 使用各種調(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)，進入定時器的時候num還未更新，還是1。

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

最新評論