項(xiàng)目調(diào)試的困境

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

在農(nóng)安等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作專業(yè)公司,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計(jì),營(yíng)銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè)公司,農(nóng)安網(wǎng)站建設(shè)費(fèi)用合理。

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

chrome調(diào)試工具常用功能介紹

一、Elements（元素）

• Styles（樣式）
  

• 說明：選中元素的自身樣式、繼承樣式等，可以手動(dòng)修改進(jìn)行調(diào)試

• 場(chǎng)景：手動(dòng)修改選中元素樣式、選中元素添加斷點(diǎn)調(diào)試

實(shí)戰(zhàn)1.1 修改元素樣式

實(shí)戰(zhàn)1.2 排查樣式來源

實(shí)戰(zhàn)1.3 查看元素事件

二、Console（控制臺(tái)）

• 說明：進(jìn)行簡(jiǎn)單的變量輸出調(diào)試、服務(wù)端添加輸出信息等
• 場(chǎng)景：debug過程種的變量輸出查看、服務(wù)端調(diào)試信息輸出

三、Source

• 說明：網(wǎng)站的源代碼，包含html、css、js、debug
• 場(chǎng)景：源碼斷點(diǎn)調(diào)試、dom斷點(diǎn)、事件斷點(diǎn)

實(shí)戰(zhàn)3.1 添加代碼斷點(diǎn)

斷點(diǎn)添加方式

• Elements選中元素，右鍵添加dom事件
• debug面板，添加鼠標(biāo)、鍵盤等事件（見下圖）

實(shí)戰(zhàn)3.2 斷點(diǎn)調(diào)試

技巧1：添加鼠標(biāo)、鍵盤事件后，調(diào)用堆棧首先看到的框架源碼，怎么快速進(jìn)入自己的源碼？

• 忽略框架代碼，這樣就可以進(jìn)到自己編寫的事件處理方法里邊
  

技巧2：大型項(xiàng)目，如何快速攔截包含某種關(guān)鍵字的api，以快速定位代碼位置？

• 在XHR/fetch Breakpoint里添加/api/test關(guān)鍵字匹配串，這樣就會(huì)攔截所有包含該關(guān)鍵字的api請(qǐng)求
  

實(shí)戰(zhàn)3.3 tooltip鼠標(biāo)移開就沒了，如何調(diào)試？

• 前端使用setTimeout調(diào)試代碼的小技巧

四、Network

• 說明：網(wǎng)站發(fā)起的所有遠(yuǎn)程請(qǐng)求信息詳情
• 場(chǎng)景：請(qǐng)求信息詳情（header、param、body等信息）

技巧1：大型項(xiàng)目，某一個(gè)請(qǐng)求報(bào)錯(cuò)，如何快速定位請(qǐng)求的源碼js位置？

• 查看initiator面板的請(qǐng)求堆棧信息，找到對(duì)應(yīng)的源碼發(fā)起位置
  

五、Application

• 說明：cookie、session、localStorge等存儲(chǔ)數(shù)據(jù)的位置
• 場(chǎng)景：查看cookie的失效時(shí)間、編輯localStorge存儲(chǔ)的鍵值對(duì)

其它的頁簽不常用，在本文不做介紹。