iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

你所不知道的各種前端 Debug 技巧 系列

內容主體將會以 Chrome DevTools 為主,介紹各種常用功能,與其他瀏覽器的 DevTools 比較,另外會提及一些前端優化工具來應付網頁的問題(如 Web Vitals、SEO),盡可能詳盡的解釋各個功能的用法並搭配 Debug 情境來協助理解及應用。

鐵人鍊成 | 共 30 篇文章 | 109 人訂閱 訂閱系列文 RSS系列文 團隊Outcome First
DAY 1

[Day 01] 既然天天都要 Debug,何不從 Debug 技能著手呢?

相信 Debug 是開發者每天必經的過程,能否順利 Debug 決定了開發者一整天的心情,即使如此卻較少看到開發者著墨在 Debug 技巧上,因此接下來的...

2020-09-14 ‧ 由 shizuku 分享
DAY 2

[Day 02] 你所知道的 Chrome DevTools

身為一個網頁開發者,肯定對 Chrome DevTools 不陌生,雖然每天都會用到,可能都是不斷重複使用某些功能而已,如果現在讓讀者為自己打個「對 Chro...

2020-09-15 ‧ 由 shizuku 分享
DAY 3

[Day 03] Elements - CSS

想要又快又穩的滿足各種 UI 需求,每天肯定花不少時間在 Debug CSS,不過總有某些特殊情境讓 Debug 過程非常繁瑣,甚至是難以完成,此時心中就會逐...

2020-09-16 ‧ 由 shizuku 分享
DAY 4

[Day 04] Elements - CSS 之 2

概覽 上一篇文章主要講解了 Elements 面板中設定 CSS 的部分,今天筆者將會繼續說明 CSS 相關功能,包括 Styles 分頁上方的小工具列以及 C...

2020-09-17 ‧ 由 shizuku 分享
DAY 5

[Day 05] Elements - DOM

概覽 今天的文章主要會提到筆者在瀏覽、操作 DOM 結構時常用到或覺得不可不知的功能,雖然大部分的功能都很簡單或有很多種達成的方式,不過筆者的確因此省了不少時間...

2020-09-18 ‧ 由 shizuku 分享
DAY 6

[Day 06] Console - Messages & Settings

完全掌握 Console 面板,從認識 Console message 開始。 概覽 Console 面板做為網頁開發者的 Debug 神器,在許多網站開啟...

2020-09-19 ‧ 由 shizuku 分享
DAY 7

[Day 07] Console - API

Debug JavsScript 的時候最簡單直覺的方式就是 console.log,不過除了 log 以外,Console API 其實還有非常多好用的 Me...

2020-09-20 ‧ 由 shizuku 分享
DAY 8

[Day 08] Console - Utilities Function

除了可以在 JavaScript 執行的 Console API 外,Console 還提供了一些 Debug 專用的 Function,每一個都身懷絕技。 閱...

2020-09-21 ‧ 由 shizuku 分享
DAY 9

[Day 09] Console - Run JavaScript

Run JavaScript 今天的文章是 Console 系列的最後一篇,筆者會講解在 Console 中有關 JavaScript 執行的功能,還有一些在...

2020-09-22 ‧ 由 shizuku 分享
DAY 10

[Day 10] Sources - Source Map & File Editing

終於來到了重頭戲 Sources 面板,前面的文章提到了許多提高 Debug 效率的小撇步,但如果遇到了更加複雜的情境,透過 Console、Elements...

2020-09-23 ‧ 由 shizuku 分享