幾個常用的快捷鍵 在這裡我想分享幾個我最常用到的快捷鍵，強迫自己使用快捷鍵可以讓自己的工作速度提昇，強列建議大家可以把你常用的快捷鍵背起來。如果你想要找特定的快...
今天我們要開始來一起討論如何使用原始碼面版 (Sources panel) 來除錯你的網頁。在開發者工具中，我最常用的面版就是元素面版跟原始碼面版，每當我在進行...
因著現在行動裝置的流行，還有響應式網頁設計 (Responsive Web Design, RWD) 在這幾年成為設計網站流程中重要的一環，Chrome 開發者...
接下來的幾天我們會很快的把所有的 Chrome 開發者工具的面版走過一遍，並且有一點簡單的介紹，讓大家對這些面版有些基本的認識，之後我們會針對幾個我認為比較重要...
到目前為止，我們已經知道怎麼在開發工具裡設置中斷點，也一起討論了兩種設置中斷點的方法跟它們的差異。今天我們要介紹更多除錯的小技巧，準備好了嗎？ 使用 JS 除錯...
我們用了兩天的時間把如何透過元素面版來動態編輯文件物件模型 (DOM) 講完了，今天我們要一起看的功能是動態編輯元素的樣式。樣式控制台 (Styles pane...
圖 1 : 在早期電腦中發現真正的臭蟲 較早期的除錯方式 今天要來談談一點前端除錯的歷史。在開發者工具出來前，比較常見用來除錯的JavaScript 工具有 a...
今天算是正式文章的最後一篇 (明天要發完賽感言XD)，在鐵人賽一開始的時候，我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance pane...
今天要一起來看的面版是元素面版，如果你是第一次使用 Chrome 開發者工具，元素面版應該就會是你打開開發者工具後的第一個面版，這個面版其實是由幾個小的控制面版...
昨天我們簡單的介紹了控制台面版的讀取-求值-輸出循環功能，今天我們要一起要來看它提供的一些方便的 API，以及如何透過這些 API 與元素面版一起使用。 常見...
到目前為止我們已經看過幾個主要的面版，今天要介紹剩下的一個面版：記憶體面版。但是除了這些面版外，其實 Chrome 開發者工具裡還有提供一些方便的工具來協助工程...
今天我們要介紹的工具是記憶體面版中的最後一個工具: Record Allocation Profiler，這個工具可以讓我們按函數來檢視說那些函數佔用了許多記憶...
今天我們要把 JS 除錯控制台 裡的功能講完，然後再介紹在中斷點作用中的時候，我們如何使用控制台 (Console) 來快速除錯。 使用 JS 除錯控制台 在開...
昨天我們一起看了一段官方文件裡提供的程式，它會產生分離的 DOM 節點，這些節點不會被垃圾回收 (Garbage Collection) 所以會造成記憶體洩漏。...
今天我們會再簡單的介紹幾個面版：原始碼、安全性、應用還有審查。好，廢話不多說，就讓我們開始吧！ 原始碼面版 Sources panel 這個面版是在進行 JS...
經過這幾天的介紹，我想大家對這個面版已經有一定的認識了，但是我們其實還沒有進到每個 HTTP 請求裡面，去查看這個請求細節，而這就是我們今天要做的。好，就讓我們...
前言 前端工程在過去這幾年變化快的驚人，JavaScript 從原先在頁面上只負責簡單的介面互動操作，到現在像是 SPA (Single Page Applic...
我們在前面有簡單介紹了審查面版(Audits panel)，它可以幫我們檢測我們的網站是不是有遵循最佳實踐 (Best practices)，並提供我們每個問題...
今天我們要一起來討論的 Chrome 開發者工具的控制台面版 (Console panel)，這個面版我們在前面有很簡單的介紹過，其實它就像是一個讀取-求值-輸...
昨天我們介紹了網路面版的介面，也一起看部份 HTTP 請求列表的功能 (Request row)，今天我們要一起來討論總覽 (overview)。 但在開始之前...
今天我們要開始一起來討論記憶體面版 (Memory panel)，這個面版的主要功能就是讓你做網站的記憶體體檢，像是記憶體洩漏、記憶體膨脹和頻繁的垃圾回收都可以...
在 HTML5 的標準裡面，加入了很多以前所沒有的前端儲存方式像是 Local and session storage, IndexedDB 等等。而 Chro...
今天我們要接續昨天還沒討論完的部份，把動態編輯文件物件模型的功能介紹完。 編輯 HTML 昨天我們有介紹了編輯元素標籤跟屬性的功能，但還有一個功能是可以編輯整個...
今天要一起來看的是網路面版 (Network panel)，網路面版主是要拿來檢查資源透過 HTTP 傳輸的狀況。當我們的瀏覽器向網頁伺服器發出要求直到伺服器把...
昨天我們花了一點時間看了如何使用樣式控制台 (Styles pane) 來檢視樣式，今天我們則要來看如何動態編輯樣式。 再次提醒大家，我們在元素面版裡的編輯都...
昨天我們中斷點講到了一半，今天我們就接著一起來看在中斷點作用後，我們可以做些什麼。 使用中斷點來除錯 請重覆昨天的步驟，並使用官方的 Demo 來打開中斷點，如...
過去的幾天，我們一起討論了如何動態編輯 DOM 元素及樣式，這就是元素面版最常用的兩個功能，而今天要跟大家一起來探討的是在元素面版中剩下的幾個控制台，而這當中除...
今天我們要透過記憶體面版的另一個工具來檢測記憶體洩漏的這個問題，先來看一下今天我們要用來檢測的程式： 今天的測試程式範例一樣來自官方文件，而我也把範例程式放到...
今天我們要來看 HTTP 請求列表的欄位所代表的意義 HTTP 請求列表 請先打開開發者工具並切換到網路面版，然後重新載入畫面一次。這時候你的 HTTP 請求列...
konekoya
Joe
iThome鐵人賽
看影片追技術