程式不會動就不能下班！給新手工程師的 Debug 攻略 (1版)

類似書籍推薦給您

【簡介】 程式寫好了卻不會動，到底怎麼辦？【寫程式不再「撞牆」，就靠這一本！】寫過程式的人，一定都遇過這樣的情況： ◇ 出現一堆錯誤訊息，根本看不懂 @@ ◇ 執行結果不正確，但看不出問題在哪裡？ ◇ 找到問題的位置了，但試過所有方法都沒用?!不論是功力多麼高強的程式設計師，工作依然必須與 bug 為伍。「迅速找出問題並解決」也就成為了程式設計中最重要的技能之一。本書網羅各種寫程式時會遭遇的難題，說明破解的手法，是新手工程師不可或缺的攻略秘笈。內容包含▶▶▶‧讀懂錯誤訊息、從中找出重要資訊的方法 ‧蒐集必要線索、循跡找出源頭、有條有理解決問題的方法 ‧使用 debug 的常用技巧與除錯器的方法 ‧寫出高品質程式，將 bug 防患於未然的方法從剛開始寫程式的新人，到已經進入職場的工程師，只要心中有著「希望能變得更擅長 debug」的想法，相信都能從本書習得需要的知識。 本書特色: ★ 少見以「犯錯」切入的 debug 教學，「從錯中學」最有效 ★ 情境式漫畫與對話，快速代入自身經驗 ★ 程式碼範例還原常見 bug，實際演示 debug 技巧 ★ 圖示解說程式觀念，整體印象更加深 ★ 小專欄補充程式設計知識，拓展專業視野 【目錄】 序章 第一章 錯誤訊息為什麼這麼不討喜？ 1-1 讀讀看錯誤訊息吧 1-2 錯誤訊息難以讀懂的原因 1-3 面對錯誤訊息的心理準備 第二章 看懂錯誤訊息的秘訣 2-1 瞭解錯誤訊息的組成結構 2-2 瞭解錯誤訊息的類型 第三章 如何快速找出問題的原因？ 3-1 什麼是 Debug？ 3-2 從 Print 法開始嘗試吧 3-3 用二分搜尋法加速 Debug 3-4 用最少量的程式碼進行 Debug 3-5 高效 Debug 的正確態度 第四章 善用工具讓 Debug 更輕鬆 4-1 強大的工具：除錯器 4-2 使用中斷點 4-3 各式各樣的 Step 功能 4-4 條件中斷點 4-5 使用變數監看 第五章 用盡方法也無法解決怎麼辦？ 5-1 程式設計相關的資料蒐集技巧 5-2 找不到錯誤訊息怎麼辦？ 5-3 無法重現問題怎麼辦？ 5-4 正式執行環境的錯誤資訊蒐集 第六章 寫出更容易 Debug 的程式碼 6-1 避免重複賦值 6-2 盡可能限縮變數範圍 6-3 認識單一責任原則 6-4 使用純粹函式 6-5 寫程式時注意型別 6-6 有助於 Debug 的測試程式碼

你所不知道的必學前端Debug技巧: 即學即用! 讓你Debug不求人

類似書籍推薦給您

你所不知道的必學前端Debug技巧：即學即用！讓你Debug不求人（iT邦幫忙鐵人賽系列書） ISBN13：9789864348954 出版社：博碩文化 作者：楊楚玄 裝訂／頁數：平裝／368頁 規格：23cm*17cm*2cm (高/寬/厚) 版次：1 出版日：2021/10/18 中國圖書分類：電腦程式設計 內容簡介 　　本書改編自第12屆iT邦幫忙鐵人賽Modern Web組冠軍系列文章《你所不知道的各種前端Debug技巧》。雖然Debug占據了開發者大多數的時間，卻較少人著墨在精進Debug技巧。本書將從心態、通用方法開始切入Debug技巧，再深入至不同主題如HTML、CSS、JavaSciprt、效能分析、使用者體驗、錯誤處理、工具等，並搭配範例程式碼進行說明，以協助讀者理解及應用在實際情境中，提升解決問題的效率。 　　【內容重點】 　　✪不限於前端的Debug心態及通用技巧。 　　✪網頁元素、樣式的即時調整與檢查技巧。 　　✪利用斷點、逐步執行檢查JavaScript的方式及容易造成錯誤的寫法。 　　✪API請求資訊的分析技巧及快取、CORS、Cookies等重要觀念。 　　✪程式碼、記憶體、網頁渲染流程的效能問題分析技巧。 　　✪行動裝置的模擬、Debug技巧及瀏覽器行為差異。 　　✪網站體驗指標（Web Vitals）、無障礙網頁及相關檢測工具。 　　✪錯誤拋出、攔截和非同步錯誤處理技巧與最佳實踐。 　　✪Chrome DevTools的設定和功能細節。 　　【適用讀者】 　　✪前端初心者：開發時遇到問題卻不知道如何解決，希望學習實務經驗和Debug訣竅。 　　✪前端工程師：希望提高問題解決能力及開發效率。 　　✪有經驗的開發者：想要學習或更深入理解前端開發知識和相關工具。 目錄 |CHAPTER 01| 暖身準備 1.1 關於本書 1.2 適用讀者 1.3 本書Debug地圖 1.4 REPL和即時測試工具 1.5 前端開發Debug工具的選擇 1.6 Debug心法建立 |CHAPTER 02| 通用技巧 2.1 專注於單一問題 2.2 關鍵字搜尋 2.3 閱讀文件、原始碼及規範 2.4 單方向尋找 2.5 降低變動條件 2.6 使用版本控制 2.7 善用開發工具 2.8 如何減少Bug及降低維護難度 2.9 小結 |CHAPTER 03| DOM和CSS技巧 3.1 基本原則 3.2 元素檢查技巧 3.3 存取、修改DOM 3.4 CSS基本觀察技巧 3.5 CSS進階檢查技巧 3.6 CSS調整技巧 3.7 inline元素的問題 3.8 找出元素的定位容器 3.9 Flex和Grid 3.10 Margin問題 3.11 Overflow問題 3.12 檢查元素覆蓋順序 3.13 檢查動畫 |CHAPTER 04| JavaScript技巧 4.1 使用Debugger解決問題 4.2 使用Source map 4.3 Console訊息可讀性 4.4 以Logpoint插入程式碼 4.5 追蹤Call stack 4.6 事件監聽器 4.7 多執行環境的問題 4.8 非同步問題 4.9 比較和強制轉型 |CHAPTER 05| API技巧 5.1 分析問題原因 5.2 CORS錯誤 5.3 Mixed Content 5.4 Cookies無效 5.5 快取問題 5.6 修改請求和回應 5.7 瀏覽器相關問題 |CHAPTER 06| JavaScript效能分析技巧 6.1 基本分析流程 6.2 記憶體用量 |CHAPTER 07| 頁面載入流程分析技巧 7.1 分析 7.2 實際範例 |CHAPTER 08| 瀏覽器渲染效能分析技巧 8.1 渲染流程 8.2 JavaScript階段 8.3 Style Calculations階段 8.4 Layout階段 8.5 Paint階段 8.6 Compositing階段 |CHAPTER 09| 裝置模擬及Debug技巧 9.1 裝置模擬 9.2 Remote debugging 9.3 檢測工具 |CHAPTER 10| 使用者體驗和無障礙網頁 10.1 Web Vitals 10.2 無障礙網頁 |CHAPTER 11| 錯誤處理技巧 11.1 攔截錯誤 11.2 拋出錯誤 11.3 處理錯誤 |CHAPTER 12| Chrome DevTools 12.1 開啟方式 12.2 組成 12.3 客製化DevTools 12.4 Chrome DevTools文件 |CHAPTER 13| Elements面板 13.1 基本介紹 13.2 觀察DOM結構 13.3 編輯DOM 13.4 在Console面板中存取元素 13.5 觀察元素CSS 13.6 修改元素CSS 13.7 改變元素狀態 13.8 排版編輯器和Debugger 13.9 DOM斷點 |CHAPTER 14| Console面板 14.1 基本介紹 14.2 Console設定 14.3 Console訊息 14.4 Console API 14.5 Console Utilities API 14.6 在Console內執行JavaScript |CHAPTER 15| Sources面板 15.1 基本介紹 15.2 檔案面板 15.3 設置斷點 15.4 逐步執行JavaScript 15.5 觀察JavaScript執行狀態 15.6 Sources面板設定 |CHAPTER 16| Network面板 16.1 基本介紹 16.2 工具列 16.3 設定 16.4 Drawer 16.5 過濾請求紀錄 16.6 搜尋請求內容 16.7 請求紀錄列表設定 16.8 詳細請求資訊 |CHAPTER 17| Performance面板 17.1 基本介紹 17.2 Overview圖表 17.3 Activities列表