在日益複雜的前端工程中,開發者工具是一項非常重要但是又常被遺忘的工具,所以希望透過這一次的鐵人賽跟大家介紹 Chrome 開發者工具,讓大家的除錯功力更上一層樓。
昨天我們介紹了網路面版的介面,也一起看部份 HTTP 請求列表的功能 (Request row),今天我們要一起來討論總覽 (overview)。 但在開始之前...
今天我們要來看 HTTP 請求列表的欄位所代表的意義 HTTP 請求列表 請先打開開發者工具並切換到網路面版,然後重新載入畫面一次。這時候你的 HTTP 請求列...
經過這幾天的介紹,我想大家對這個面版已經有一定的認識了,但是我們其實還沒有進到每個 HTTP 請求裡面,去查看這個請求細節,而這就是我們今天要做的。好,就讓我們...
我們在前面有簡單介紹了審查面版(Audits panel),它可以幫我們檢測我們的網站是不是有遵循最佳實踐 (Best practices),並提供我們每個問題...
今天我們要開始一起來討論記憶體面版 (Memory panel),這個面版的主要功能就是讓你做網站的記憶體體檢,像是記憶體洩漏、記憶體膨脹和頻繁的垃圾回收都可以...
昨天我們一起看了一段官方文件裡提供的程式,它會產生分離的 DOM 節點,這些節點不會被垃圾回收 (Garbage Collection) 所以會造成記憶體洩漏。...
今天我們要透過記憶體面版的另一個工具來檢測記憶體洩漏的這個問題,先來看一下今天我們要用來檢測的程式: 今天的測試程式範例一樣來自官方文件,而我也把範例程式放到...
今天我們要介紹的工具是記憶體面版中的最後一個工具: Record Allocation Profiler,這個工具可以讓我們按函數來檢視說那些函數佔用了許多記憶...
今天算是正式文章的最後一篇 (明天要發完賽感言XD),在鐵人賽一開始的時候,我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance pane...