免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

  1. 首頁 > 生活 > >

chrome工具調(diào)試

生活百科chrome工具調(diào)試

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

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

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

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

文章插圖
實戰(zhàn)1.2 排查樣式來源
chrome工具調(diào)試

文章插圖
實戰(zhàn)1.3 查看元素事件
chrome工具調(diào)試

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

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

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

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

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

    文章插圖
五、Application