iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
2

前言

前端工程在過去這幾年變化快的驚人,JavaScript 從原先在頁面上只負責簡單的介面互動操作,到現在像是 SPA (Single Page Application) 架構,幾乎所有的頁面都是由 JavaScript 生成,前端工程師所需要撰寫及維護的 JavaScript 程式越來越多。面對這麼多的 JS 原始碼,我發現良好的架構、測試及工具像是 ESLint 都是可以協助讓開發及維護變的更輕鬆。而在這當中還有一項重要的工具,也是我們這一系列要介紹的:開發者工具。

開發者工具對於前端工程師來說,我覺得就像是後端的 IDE ,可以下中斷點 ( 或debugger 在你的程式碼裡 ),查看程式在這個中斷點的作用範圍 (Scope),狀態的變化甚至直接編輯及修改程式,然後再執行等等。我認為開發者工具是我所有技術的學習投資中,算是報酬率很高的一項工具,當你學會了如何善用這個工具,你的工作會變的更加輕鬆,除錯 (Debug) 的時間可以大幅縮短 ( 雖然使用開發者工具並不保證一定可以找到 bug XD)

在這個系列中,我希望可以分享開發者工具的一些主要功能,因為開發者工具可以做的事情實在太多了,而且蠻多功能我甚至也沒用過冏

為什麼要用 Chrome 開發者工具來介紹

DevTools image

而我們要使用的開發者工具是 Chrome 的開發者工具 (Chrome Developer Tools) 老外常簡寫為 DevTools 。為什麼選擇 Chrome 呢?因為 Chrome 的開發者工具是我最熟悉的,再來就是 Chrome 的開發者工具演進的非常快,新功能是一直不斷的增加,老實說,它的介面也一直不變的在變化。但是我想就算你是使用其他的開發者工具像是 IE 或是 Firefox ,除了介面之外,很多功能及概念都是相同的。

因為 Chrome 的更新頻率非常高並且開發者工具的使用者介面也常常在更動,所以在這個教學裡面提到的功能位置或是頁面擷圖,是會有可能與你實際使用的版本不同的。這個教學的寫作期間所用的是 Chrome 62.x

會討論到的主題

下面就是我們暫定接下來三十天的主題列表,之後有可能會再做調整,如果有任何更新的話我會再回來更新這個列表。

  1. 寫在前頭
  2. 一點點前端除錯的歷史
  3. 開發者工具面版簡介 1 - 元素、控制台、網路及效能面版
  4. 開發者工具面版簡介 2 - 原始碼、安全性、應用及審查面版
  5. 開發者工具面版簡介 3 - 記憶體面版、行動裝置工具欄及其他工具
  6. 開發者工具快捷鍵跟設定
  7. 元素面版 - 動態編輯文件物件模型 1
  8. 元素面版 - 動態編輯文件物件模型 2
  9. 元素面版 - 檢查元素樣式
  10. 元素面版 - 動態編輯樣式
  11. 運算及其他的幾個控制台
  12. 控制台面版 1 - 讀取-求值-輸出循環
  13. 控制台面版 2 - 結合元素面版
  14. 行動裝置工具欄
  15. 應用面版
  16. 原始碼面版 - 使用中斷點 1
  17. 原始碼面版 - 使用中斷點 2
  18. 原始碼面版 - 在中斷點間移動及觀察變數
  19. 原始碼面版 - 找到那個 Bug
  20. 網路面版 - 介面簡介
  21. 網路面版 - 總覽
  22. 網路面版 - HTTP 請求列表
  23. 網路面版 - 了解每個請求
  24. 審查面版
  25. 記憶體面版 - 記憶體堆快照 1
  26. 記憶體面版 - 記憶體堆快照 2
  27. 記憶體面版 - 記憶體分配時間線
  28. 記憶體面版 - 記憶體分配分析器
  29. 使用效能面版來檢測記憶體洩漏
  30. 寫在最後

下一篇
一點點前端除錯的歷史
系列文
認識 Chrome 開發者工具30

1 則留言

1
stana
iT邦新手 5 級 ‧ 2017-12-08 10:44:11

非常期待接下來的文章!

謝謝 Stana!

我要留言

立即登入留言