Web前端開發(fā)Debug技巧

第1章 熱身運(yùn)動
1.1 關(guān)于本書
1.2 適用讀者
1.3 學(xué)習(xí)Debug技巧的地圖
1.4 REPL和實(shí)時(shí)測試工具
1.5 前端開發(fā)Debug工具的選擇
1.6 Debug“心法”的建立
1.6.1 放大出錯的影響
1.6.2 治標(biāo)不治本
1.6.3 集中精神并且適度休息
1.6.4 不要鉆牛角尖
1.6.5 適時(shí)尋求協(xié)助
1.6.6 心無旁騖
第2章 通用技巧
2.1 專注于單一問題
2.2 關(guān)鍵詞搜索
2.3 閱讀文件、源代碼及規(guī)范
2.4 單方向?qū)ふ?br /> 2.5 降低變動條件
2.6 使用版本控制
2.7 善用開發(fā)工具
2.8 如何減少Bug及降低維護(hù)難度
2.8.1 靜態(tài)分析程序代碼
2.8.2 制定語法規(guī)范
2.8.3 統(tǒng)一語法格式
2.8.4 加入注釋
2.9 小結(jié)
第3章 DOM和CSS技巧
3.1 基本原則
3.2 元素檢查技巧
3.2.1 檢查工具
3.2.2 狀態(tài)鎖定
3.2.3 暫停執(zhí)行
3.2.4 節(jié)點(diǎn)隱藏
3.2.5 搜索
3.3 存取、修改DOM
3.3.1 插入節(jié)點(diǎn)
3.3.2 移動和刪除節(jié)點(diǎn)
3.3.3 ==$0
3.4 CSS基本觀察技巧
3.4.1 屬性簡寫
3.4.2 !important
3.4.3 檢查計(jì)算后的屬性
3.4.4 默認(rèn)CSS規(guī)則
3.4.5 繼承屬性
3.5 CSS高級檢查技巧
3.5.1 加入邊界提示
3.5.2 定義的屬性值和計(jì)算結(jié)果不同
3.5.3 實(shí)際顯示大小與計(jì)算結(jié)果不符
3.6 CSS調(diào)整技巧
3.6.1 添加規(guī)則
3.6.2 加入Pseudo元素
3.6.3 微調(diào)數(shù)值
3.6.4 快速切換Class
3.6.5 同時(shí)加入多項(xiàng)屬性
3.7 inline元素的問題
3.7.1 display: inline；
3.7.2 inline元素下方的空間
……
第4章 JavaScript技巧
第5章 API技巧
第6章 JavaScript性能分析技巧
第7章 頁面加載流程分析技巧
第8章 瀏覽器渲染性能分析技巧
第9章 設(shè)備仿真及 Debug技巧
第10章 用戶體驗(yàn)和無障礙網(wǎng)頁
第11章 錯誤處理技巧
第12章 Chrome DevTools
第13章 Elements面板
第14章 Console面板
第15章 Sources面板
第16章 Network面板
第17章 Performance面板