0920~0926_夏季暢銷第三波BN

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

  • 480

活動訊息

用閱讀開啟視野,讓書成為照亮你人生的光
【金石堂選書】本月推薦您這些好書👉 快來看看

內容簡介

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

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

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

本書特色

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

作者

楊楚玄

✪現任Appier前端工程師,同時擔任ALPHA Camp課程講師。
✪以《你所不知道的各種前端Debug技巧》系列文章參加iT邦幫忙鐵人賽Modern Web組獲得冠軍。
✪樂於參與開源專案,在GitHub上的個人專案擁有超過五千顆星星。

Email
shizukuichi@gmail.com

GitHub
github.com/ShizukuIchi

目錄

|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列表

詳細資料

詳細資料

    • 語言
    • 中文繁體
    • 裝訂
    • ISBN
    • 9789864348954
    • 分級
    • 普通級
    • 頁數
    • 368
    • 商品規格
    • 23*17
    • 出版地
    • 台灣
    • 適讀年齡
    • 全齡適讀
    • 注音
    • 級別

商品評價

訂購/退換貨須知

加入金石堂 LINE 官方帳號『完成綁定』,隨時掌握出貨動態:

加入金石堂LINE官方帳號『完成綁定』,隨時掌握出貨動態
金石堂LINE官方帳號綁定教學

提醒您!!
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機,請不要聽從指示,以免受騙上當!

購買須知:

使用金石堂電子書服務即為同意金石堂電子書服務條款

電子書分為「金石堂(線上閱讀+APP)」及「Readmoo(兌換碼)」兩種:

金石堂 電子書
  • 將儲存於會員中心→電子書服務「我的e書櫃」,點選線上閱讀直接開啟閱讀。
    1. 線上閱讀:
      建議使用Chrome、Microsoft Edge 有較佳的線上瀏覽效果, iOS 14.2 或以上版本,Android 6.0 以上版本,建議裝置有6GB以上的記憶體,至少有 30 MB以上的容量。
    2. 離線閱讀:
      APP下載:iOS Android
      安裝電子書APP後,請依照提示登入「會員中心」→「我的E書櫃」→「電子書APP通行碼/載具管理」,取得通行碼再登入下載您所購買的電子書。完成下載後,點選任一書籍即可開始離線閱讀。
Readmoo 電子書
  • 請至會員中心→電子書服務「我的e書櫃」領取複製『兌換碼』至電子書服務商Readmoo進行兌換。

退換貨須知:

  • 因版權保護,您在金石堂所購買的電子書僅能以金石堂專屬的閱讀軟體開啟閱讀,無法以其他閱讀器或直接下載檔案。
  • 依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」,非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書、電子雜誌、下載版軟體、虛擬商品…等),不受「網購服務需提供七日鑑賞期」的限制。為維護您的權益,建議您先使用「試閱」功能後再付款購買。
※ 本品無額外回饋
金石堂門市 全家便利商店 ok便利商店 萊爾富便利商店 7-11便利商店
World wide
活動ing