各種雲端運算平台和豐富的雲端服務發展到現在已經很成熟了，全世界都被絕大部分企業所接受。然而今天，Akamai想要跟大家討論一個不太一樣的話題：分散式雲端運算。...
目錄 【前端動手玩創意】等待的轉圈圈效果 (1) 【前端動手玩創意】google五星評分的星星(2) 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難...
瀏覽器開發人員工具 在我們開始講選擇器種類之前，先來介紹瀏覽器中好用的工具 —— 開發人員工具。開發人員工具是瀏覽器自帶的一個開發工具套件，可以看到當前網頁結構...
隨著網頁設計的發展，圖示上色效果已成為許多網站和應用程式中不可或缺的元素之一。然而，手動編輯每個圖示的色彩是一個繁瑣的任務，因此我進行了一些搜尋製作了這個CSS...
今天是鐵人賽的最後一天，本來這一天也是要寫技術內容，不過後來想想還是來寫參賽的心得好了XD 其實這並不是我第一次參加鐵人賽，去年我也有報名並且也有發文，雖然只發...
今天算是正式文章的最後一篇 (明天要發完賽感言XD)，在鐵人賽一開始的時候，我本來想規劃幾天的時間來跟大家一起來討論效能面版 (Performance pane...
今天我們要介紹的工具是記憶體面版中的最後一個工具: Record Allocation Profiler，這個工具可以讓我們按函數來檢視說那些函數佔用了許多記憶...
今天我們要透過記憶體面版的另一個工具來檢測記憶體洩漏的這個問題，先來看一下今天我們要用來檢測的程式： 今天的測試程式範例一樣來自官方文件，而我也把範例程式放到...
昨天我們一起看了一段官方文件裡提供的程式，它會產生分離的 DOM 節點，這些節點不會被垃圾回收 (Garbage Collection) 所以會造成記憶體洩漏。...
今天我們要開始一起來討論記憶體面版 (Memory panel)，這個面版的主要功能就是讓你做網站的記憶體體檢，像是記憶體洩漏、記憶體膨脹和頻繁的垃圾回收都可以...
我們在前面有簡單介紹了審查面版(Audits panel)，它可以幫我們檢測我們的網站是不是有遵循最佳實踐 (Best practices)，並提供我們每個問題...
經過這幾天的介紹，我想大家對這個面版已經有一定的認識了，但是我們其實還沒有進到每個 HTTP 請求裡面，去查看這個請求細節，而這就是我們今天要做的。好，就讓我們...
今天我們要來看 HTTP 請求列表的欄位所代表的意義 HTTP 請求列表 請先打開開發者工具並切換到網路面版，然後重新載入畫面一次。這時候你的 HTTP 請求列...
昨天我們介紹了網路面版的介面，也一起看部份 HTTP 請求列表的功能 (Request row)，今天我們要一起來討論總覽 (overview)。 但在開始之前...
今天要一起來看的是網路面版 (Network panel)，網路面版主是要拿來檢查資源透過 HTTP 傳輸的狀況。當我們的瀏覽器向網頁伺服器發出要求直到伺服器把...
今天我們要把 JS 除錯控制台 裡的功能講完，然後再介紹在中斷點作用中的時候，我們如何使用控制台 (Console) 來快速除錯。 使用 JS 除錯控制台 在開...
到目前為止，我們已經知道怎麼在開發工具裡設置中斷點，也一起討論了兩種設置中斷點的方法跟它們的差異。今天我們要介紹更多除錯的小技巧，準備好了嗎？ 使用 JS 除錯...
昨天我們中斷點講到了一半，今天我們就接著一起來看在中斷點作用後，我們可以做些什麼。 使用中斷點來除錯 請重覆昨天的步驟，並使用官方的 Demo 來打開中斷點，如...
今天我們要開始來一起討論如何使用原始碼面版 (Sources panel) 來除錯你的網頁。在開發者工具中，我最常用的面版就是元素面版跟原始碼面版，每當我在進行...
在 HTML5 的標準裡面，加入了很多以前所沒有的前端儲存方式像是 Local and session storage, IndexedDB 等等。而 Chro...
因著現在行動裝置的流行，還有響應式網頁設計 (Responsive Web Design, RWD) 在這幾年成為設計網站流程中重要的一環，Chrome 開發者...
昨天我們簡單的介紹了控制台面版的讀取-求值-輸出循環功能，今天我們要一起要來看它提供的一些方便的 API，以及如何透過這些 API 與元素面版一起使用。 常見...
今天我們要一起來討論的 Chrome 開發者工具的控制台面版 (Console panel)，這個面版我們在前面有很簡單的介紹過，其實它就像是一個讀取-求值-輸...
過去的幾天，我們一起討論了如何動態編輯 DOM 元素及樣式，這就是元素面版最常用的兩個功能，而今天要跟大家一起來探討的是在元素面版中剩下的幾個控制台，而這當中除...
昨天我們花了一點時間看了如何使用樣式控制台 (Styles pane) 來檢視樣式，今天我們則要來看如何動態編輯樣式。 再次提醒大家，我們在元素面版裡的編輯都...
我們用了兩天的時間把如何透過元素面版來動態編輯文件物件模型 (DOM) 講完了，今天我們要一起看的功能是動態編輯元素的樣式。樣式控制台 (Styles pane...
今天我們要接續昨天還沒討論完的部份，把動態編輯文件物件模型的功能介紹完。 編輯 HTML 昨天我們有介紹了編輯元素標籤跟屬性的功能，但還有一個功能是可以編輯整個...
今天要一起來看的面版是元素面版，如果你是第一次使用 Chrome 開發者工具，元素面版應該就會是你打開開發者工具後的第一個面版，這個面版其實是由幾個小的控制面版...
幾個常用的快捷鍵 在這裡我想分享幾個我最常用到的快捷鍵，強迫自己使用快捷鍵可以讓自己的工作速度提昇，強列建議大家可以把你常用的快捷鍵背起來。如果你想要找特定的快...
Joe
konekoya
iThome鐵人賽
看影片追技術