1. 首頁 > 生活百科 > >

chrome工具調試

生活百科chrome工具調試

項目調試的困境程序開發總會遇到各種各樣的問題，為什么實際結果和預期結果不一致？這個時候如果能深入程序內部抽絲剝繭去一探究竟再好不過！而chrome工具是前端開發的殺手锏，經常聽到的一句話是：出問題了？F12看看...前端調試的手法一般就兩種：

  1. 服務端（添加調試代碼）
  2. 客戶端（開發者工具）對于簡單的頁面來說，都能很快的找到問題所在面對大型的網站項目（react、vue），頁面成千上萬的組合嵌套 。很多頁面很多相似的按鈕 ， 當我們接受一份項目代碼，如何快速的定位bug所在頁面？如果從項目結構上層層遞進，不僅項目時間不允許，而且容易陷入代碼的海洋！如果從頁面斷點入手，現在的前后端分離項目，代碼經過編譯，面對一串編譯壓縮后的字串，如同天書！怎么辦？客戶和領導就在身后，問題解決完才能下班？怎么能早點回家吃口熱飯？
chrome調試工具常用功能介紹
chrome工具調試

文章插圖
一、Elements（元素）
  • Styles（樣式）
    chrome工具調試

    文章插圖
  • 說明：選中元素的自身樣式、繼承樣式等 ， 可以手動修改進行調試
  • 場景：手動修改選中元素樣式、選中元素添加斷點調試
實戰1.1 修改元素樣式
chrome工具調試

文章插圖
實戰1.2 排查樣式來源
chrome工具調試

文章插圖
實戰1.3 查看元素事件
chrome工具調試

文章插圖
二、Console（控制臺）
  • 說明：進行簡單的變量輸出調試、服務端添加輸出信息等
  • 場景：debug過程種的變量輸出查看、服務端調試信息輸出
三、Source
  • 說明：網站的源代碼，包含html、css、js、debug
  • 場景：源碼斷點調試、dom斷點、事件斷點
實戰3.1 添加代碼斷點
chrome工具調試

文章插圖
斷點添加方式
  • Elements選中元素，右鍵添加dom事件
  • debug面板，添加鼠標、鍵盤等事件（見下圖）
實戰3.2 斷點調試
chrome工具調試

文章插圖
技巧1：添加鼠標、鍵盤事件后，調用堆棧首先看到的框架源碼，怎么快速進入自己的源碼？
  • 忽略框架代碼 ， 這樣就可以進到自己編寫的事件處理方法里邊
    chrome工具調試

    文章插圖
技巧2：大型項目，如何快速攔截包含某種關鍵字的api，以快速定位代碼位置？
  • 在XHR/fetch Breakpoint里添加/api/test關鍵字匹配串，這樣就會攔截所有包含該關鍵字的api請求
    chrome工具調試

    文章插圖
實戰3.3 tooltip鼠標移開就沒了，如何調試？
  • 前端使用setTimeout調試代碼的小技巧
四、Network
  • 說明：網站發起的所有遠程請求信息詳情
  • 場景：請求信息詳情（header、param、body等信息）
技巧1：大型項目 ， 某一個請求報錯，如何快速定位請求的源碼js位置？
  • 查看initiator面板的請求堆棧信息，找到對應的源碼發起位置
    chrome工具調試

    文章插圖
五、Application
  • 說明：cookie、session、localStorge等存儲數據的位置
  • 場景：查看cookie的失效時間、編輯localStorge存儲的鍵值對
其它的頁簽不常用，在本文不做介紹 。
【chrome工具調試】

    推薦閱讀