loading
cover

你所不知道的必學前端Debug技巧:即學即用!讓你Debug不求人(iT邦幫忙鐵人賽系列書)

點閱數

作者
楊楚玄

出版社
博碩文化

格式
PDF

一本可精進你的Debug技巧,讓你從有效率的解決問題到避免問題發生的前端Debug技巧工具書!


✪以Debug技巧為主軸,有效提升整體問題解決能力,不限於特定環境或框架。
✪詳細說明問題成因和解決方式,協助讀者深入理解,並應用於實際情境中。
✪提供範例網站及程式碼,一步步帶領讀者進行操作,熟悉工具使用方式。

【內容簡介】
本書改編自第12屆iT邦幫忙鐵人賽Modern Web組冠軍系列文章《你所不知道的各種前端Debug技巧》。雖然Debug占據了開發者大多數的時間,卻較少人著墨在精進Debug技巧。本書將從心態、通用方法開始切入Debug技巧,再深入至不同主題如HTML、CSS、JavaSciprt、效能分析、使用者體驗、錯誤處理、工具等,並搭配範例程式碼進行說明,以協助讀者理解及應用在實際情境中,提升解決問題的效率。

【內容重點】
✪不限於前端的Debug心態及通用技巧。
✪網頁元素、樣式的即時調整與檢查技巧。
✪利用斷點、逐步執行檢查JavaScript的方式及容易造成錯誤的寫法。
✪API請求資訊的分析技巧及快取、CORS、Cookies等重要觀念。
✪程式碼、記憶體、網頁渲染流程的效能問題分析技巧。
✪行動裝置的模擬、Debug技巧及瀏覽器行為差異。
✪網站體驗指標(Web Vitals)、無障礙網頁及相關檢測工具。
✪錯誤拋出、攔截和非同步錯誤處理技巧與最佳實踐。
✪Chrome DevTools的設定和功能細節。

【適用讀者】
✪前端初心者:開發時遇到問題卻不知道如何解決,希望學習實務經驗和Debug訣竅。
✪前端工程師:希望提高問題解決能力及開發效率。
✪有經驗的開發者:想要學習或更深入理解前端開發知識和相關工具。



【專業推薦】
「本書中涵蓋的方法、技巧和情境都是實用的、經過「實戰測試」的,被許多經驗豐富的軟體工程師用在每天的工作上。關於軟體工程師工作的描述,我最喜歡的是:軟體工程師是「問題解決者」,在軟體開發職業生涯中,我們可能被稱為「編碼員、程式設計師、測試員、主管、技術領導」,但我們終歸是問題解決者,我們重複地處理業務或客戶問題、分析最佳解決方式、提供可靠的方案來解決問題。許多提出解決方案及解決問題所需的工具和知識都被整理於本書之中。」

──Appier工程資深副總 | Robert S.Liu


「解決問題被譽為在21世紀職場的核心技能之一。作為一個工程師,你每天的工作就是在解決問題。你能解決的問題有多困難、多複雜,你的薪資就會有多高,發展機會就會有多好。而debugging就是你建立解決問題能力的一個重要環節。本書精心設計的教案中,可感染到作者的思維與做事態度。」

──前Yahoo!亞太區產品總監、ALPHA Camp 校長 | 陳治平(Bernard Chan)


「本書可說是前端Debug完全手冊,從CSS到JavaScript,從手機、桌機再到無障礙網頁的除錯方式都含括在內,除了詳細介紹瀏覽器開發者工具中的各個功能,讓讀者能夠更清楚程式在瀏覽器上執行的過程外,更珍貴的是作者根據自己豐富的經驗,整理大量前端開發實務中常碰到的問題,再輔以程式範例,讓讀者能透過實際範例來了解問題、觀察問題、到解決問題。」

──PJCHENder網頁開發咩腳版主、《從 Hooks 開始,讓你的網頁 React 起來》作者 | 陳柏融
楊楚玄
✪現任Appier前端工程師,同時擔任ALPHA Camp課程講師。
✪以《你所不知道的各種前端Debug技巧》系列文章參加iT邦幫忙鐵人賽Modern Web組獲得冠軍。
✪樂於參與開源專案,在GitHub上的個人專案擁有超過五千顆星星。
CHAPTER 01 暖身準備
CHAPTER 02 通用技巧
CHAPTER 03 DOM和CSS技巧
CHAPTER 04 JavaScript技巧
CHAPTER 05 API技巧
CHAPTER 06 JavaScript效能分析技巧
CHAPTER 07 頁面載入流程分析技巧
CHAPTER 08 瀏覽器渲染效能分析技巧
CHAPTER 09 裝置模擬及Debug技巧
CHAPTER 10 使用者體驗和無障礙網頁
CHAPTER 11 錯誤處理技巧
CHAPTER 12 Chrome DevTools
CHAPTER 13 Elements面板
CHAPTER 14 Console面板
CHAPTER 15 Sources面板
CHAPTER 16 Network面板
CHAPTER 17 Performance面板

其他人也在看