Chrome Devtools調試技巧詳情 - 前端,chrome-devtools,debugging,優化大衞talk 動態日志

由於圖片和格式解析問題，可前往閲讀原文

Chrome DevTools 是開發者用於調試 Web 應用程序、分析性能、檢查元素和網絡請求的重要工具。無論是前端開發人員還是後端工程師，熟練掌握 Chrome DevTools 都能顯著提高開發效率和調試精度。通過 DevTools，我們可以快速識別並解決性能瓶頸、修復 bug、優化用户體驗

Chrome DevTools 提供了多種強大的功能，包括但不限於：元素檢查、網絡調試、JavaScript 調試、性能分析、內存泄漏檢測、日誌查看等。通過這些功能，開發者可以實時查看頁面結構、調試腳本、分析請求響應、監控應用狀態，甚至在瀏覽器端進行模擬測試

:::warning 注意
本文只從JavaScript斷點角度進行調試，其他方面如請求、性能、內存會以新的文章方式分享
:::

斷點技巧

Chrome DevTools 提供了強大的斷點調試功能，幫助開發者逐步執行代碼，檢查變量、查看調用堆棧，並實時觀察代碼的執行情況。以下是一些常用的 Chrome DevTools 斷點調試技巧，幫助你更高效地定位問題

基本斷點

通常開發時大家都喜歡console.log打印東西來看一些預期結果，你也可以通過在需要console的地方加上debugger來斷住js，當執行到這裏時，不僅可以看到你想要的信息，還可以看到當前作用域、變量、調用棧等一些信息，這樣看起來更直觀也更方便

// 假如有下面一段代碼
button.addEventListener('click', clickCB);
function clickCB(e) {
  debugger;
  console.log(e);
}

條件斷點

同樣這裏也是先在源碼中指定位置debugger，或者如果你的源碼並沒有採取打包，源碼好找的情況下可以直接在瀏覽器中找到對應的js文件直接打個條件註釋斷點就行

// 假如有下面一段代碼 (當x<=0，斷住)
const add = (x, y) => {
  x = 2 * x;
  return x + y;
}

DOM斷點

DOM斷點只能在瀏覽器中調試，有三種：

subtree modifications
attribute modifications
node removal

以上三種斷點，也可用MutationObserverAPI來代替，方便配置使用靈活，官方文檔

// 假如下面一段代碼，當點擊不同的按鈕對ul進行增刪改查，修改自身屬性
<div class="domDebugger">
      <button>增加節點</button>
      <button>刪除節點</button>
      <button>刪除自己</button>
      <button>更新子節點</button>
      <button>更新子節點屬性</button>
      <button>更新當前元素屬性</button>
</div>
<ul class="list">
  <li>1</li>
  <li>2</li>
</ul>

<script>
  const dbtns = document.querySelectorAll('.domDebugger button');
  const list = document.querySelector('.list');
  dbtns[0].addEventListener('click', () => {
          const li = document.createElement('li');
          li.innerText = '新增的節點';
          list.appendChild(li);
  });
  dbtns[1].addEventListener('click', () => {
          list.removeChild(list.lastElementChild);
  });
  dbtns[2].addEventListener('click', () => {
          list.remove();
  });
  dbtns[3].addEventListener('click', () => {
          const li = document.createElement('li');
          li.innerText = '更新的節點';
          list.replaceChild(li, list.lastElementChild);
  });
  dbtns[4].addEventListener('click', () => {
          list.lastElementChild.setAttribute('class', 'li-class');
  });
  dbtns[5].addEventListener('click', () => {
          list.setAttribute('class', 'newclass');
  });
</script>

subtree modifications

節點監聽:

當監聽子節點變化時，只有當子節點(node)發生變化時，才會監聽的到，如：子節點替換、子節點刪除、子節點增加、子節點的字節點變化(像：文本節點、註釋節點、元素節點等等都會監聽的到)，但是節點的屬性發生變化不會監聽到

當點擊上面的刪除節點時就會被監聽到，如上圖；而當點擊更新子節點屬性或者當前元素屬性時反而監聽不到的

attribute modifications

屬性監聽:

監聽當前元素屬性發生變化時，而子節點屬性變化監聽不到;(想監聽子節點的屬性變化或者或者節點變化可以用開頭提到的MutatorObserverAPI)

當點擊更新當前元素屬性時如下圖所示，點擊更新子節點屬性不會監聽到

node removal

這個只監聽當前元素被刪除，子幾點的改變不會監聽到，比較單一

當點擊刪除自己就會監聽到

除了單獨監聽外，還可以同時監聽三種類型，只要勾選上就行；除了這種調試，也可以通過前面提到的MutatorObserverAPI來調試

URL斷點

添加對XHR的請求url的斷點，當瀏覽器發起http請求時，如果斷點的url包含請求url，就會打住斷點

// 假如下面代碼，點擊按鈕發起請求
const fetchApi = async () => {
  try {
    const rs = await fetch("http://localhost:3001/xxxx")
    const data = await rs.json()
    console.log(data)
  } catch(err) {
    console.log(err)
  }
}
const btn = document.querySelector('#btn');
btn.addEventListener('click', fetchApi)

// ===== 服務代碼 =====
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.json({
    code: 200,
    message: 'Hello World',
  })
})
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
})

以上請求http://localhost:3001服務，現在我們在瀏覽器中添加對應的斷點

事件監聽斷點

監聽對應的事件當觸發時就會打住斷點，如：點擊、鼠標、鍵盤事件等等

// 假如給一個元素綁定click、mouseover事件
// <div id="box" />
const target = document.querySelector("#box")
target.addEventListener("click", () => console.log('click...'))
target.addEventListener("mouseover", () => console.log('mouseover...'))

在瀏覽器上打上對應的斷點

異常斷點

異常斷點可以在vscode中設置，如果拋出異常就會打住斷點
添加vscode調試配置:

{
  "name": "Debugger Exception",
  "request": "launch",
  "type": "chrome",
  "url": "http://localhost:5500",
  "webRoot": "${workspaceFolder}/trandition"
}

在程序中直接拋出錯誤：

throw new Error('This is a test error');

調試React

React項目，用react-create-app啓動項目，然後添加.vscode配置，點擊debugger，在vscode中打個斷點，就可以在vscode中調試代碼了

{
  "name": "React",
  "request": "launch",
  "type": "chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

當點擊對應的程序後打住斷點：

調試Vue

目前用vite或者webpack生成的vue項目目前這樣的都可以這樣調試，以前的wepack要用sourcemap進行映射

{
  "name": "VueCli",
  "request": "launch",
  "type": "chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}",
  // 映射sourcemap
  "sourceMapPathOverrides": {
    // "webpack://?:*/*": "${workspaceFolder}/*"
  }
}

和React一樣運行到對應的代碼後打住斷點