iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

認識 Chrome 開發者工具 系列

在日益複雜的前端工程中,開發者工具是一項非常重要但是又常被遺忘的工具,所以希望透過這一次的鐵人賽跟大家介紹 Chrome 開發者工具,讓大家的除錯功力更上一層樓。

鐵人鍊成 | 共 30 篇文章 | 131 人訂閱 訂閱系列文 RSS系列文 團隊就是有亦思
DAY 21

網路面版 - 總覽

昨天我們介紹了網路面版的介面,也一起看部份 HTTP 請求列表的功能 (Request row),今天我們要一起來討論總覽 (overview)。 但在開始之前...

2017-12-24 ‧ 由 konekoya 分享
DAY 22

網路面版 - HTTP 請求列表

今天我們要來看 HTTP 請求列表的欄位所代表的意義 HTTP 請求列表 請先打開開發者工具並切換到網路面版,然後重新載入畫面一次。這時候你的 HTTP 請求列...

2017-12-25 ‧ 由 konekoya 分享
DAY 23

網路面版 - 了解每個請求

經過這幾天的介紹,我想大家對這個面版已經有一定的認識了,但是我們其實還沒有進到每個 HTTP 請求裡面,去查看這個請求細節,而這就是我們今天要做的。好,就讓我們...

2017-12-26 ‧ 由 konekoya 分享
DAY 24

審查面版

我們在前面有簡單介紹了審查面版(Audits panel),它可以幫我們檢測我們的網站是不是有遵循最佳實踐 (Best practices),並提供我們每個問題...

2017-12-27 ‧ 由 konekoya 分享
DAY 25

記憶體面版 - 記憶體堆快照 1

今天我們要開始一起來討論記憶體面版 (Memory panel),這個面版的主要功能就是讓你做網站的記憶體體檢,像是記憶體洩漏、記憶體膨脹和頻繁的垃圾回收都可以...

2017-12-28 ‧ 由 konekoya 分享
DAY 26

記憶體面版 - 記憶體堆快照 2

昨天我們一起看了一段官方文件裡提供的程式,它會產生分離的 DOM 節點,這些節點不會被垃圾回收 (Garbage Collection) 所以會造成記憶體洩漏。...

2017-12-29 ‧ 由 konekoya 分享
DAY 27

記憶體面版 - 記憶體分配時間線

今天我們要透過記憶體面版的另一個工具來檢測記憶體洩漏的這個問題,先來看一下今天我們要用來檢測的程式: 今天的測試程式範例一樣來自官方文件,而我也把範例程式放到...

2017-12-30 ‧ 由 konekoya 分享
DAY 28

記憶體面版 - 記憶體分配分析器

今天我們要介紹的工具是記憶體面版中的最後一個工具: Record Allocation Profiler,這個工具可以讓我們按函數來檢視說那些函數佔用了許多記憶...

2017-12-31 ‧ 由 konekoya 分享
DAY 29

使用效能面版來檢測記憶體洩漏

今天算是正式文章的最後一篇 (明天要發完賽感言XD),在鐵人賽一開始的時候,我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance pane...

2018-01-01 ‧ 由 konekoya 分享
DAY 30

寫在最後

今天是鐵人賽的最後一天,本來這一天也是要寫技術內容,不過後來想想還是來寫參賽的心得好了XD 其實這並不是我第一次參加鐵人賽,去年我也有報名並且也有發文,雖然只發...

2018-01-02 ‧ 由 konekoya 分享