系列文章
DAY 2
一點點前端除錯的歷史
圖 1 : 在早期電腦中發現真正的臭蟲 較早期的除錯方式 今天要來談談一點前端除錯的歷史。在開發者工具出來前，比較常見用來除錯的JavaScript 工具有 a...
DAY 3
開發者工具面版簡介 1 - 元素、控制台、網路及效能面版
接下來的幾天我們會很快的把所有的 Chrome 開發者工具的面版走過一遍，並且有一點簡單的介紹，讓大家對這些面版有些基本的認識，之後我們會針對幾個我認為比較重要...
DAY 4
開發者工具面版簡介 2 - 原始碼、安全性、應用及審查面版
今天我們會再簡單的介紹幾個面版：原始碼、安全性、應用還有審查。好，廢話不多說，就讓我們開始吧！ 原始碼面版 Sources panel 這個面版是在進行 JS...
DAY 5
開發者工具面版簡介 3 - 記憶體面版、行動裝置工具欄及其他工具
到目前為止我們已經看過幾個主要的面版，今天要介紹剩下的一個面版：記憶體面版。但是除了這些面版外，其實 Chrome 開發者工具裡還有提供一些方便的工具來協助工程...
DAY 6
開發者工具快捷鍵跟設定
幾個常用的快捷鍵 在這裡我想分享幾個我最常用到的快捷鍵，強迫自己使用快捷鍵可以讓自己的工作速度提昇，強列建議大家可以把你常用的快捷鍵背起來。如果你想要找特定的快...
DAY 7
元素面版 - 動態編輯文件物件模型 1
今天要一起來看的面版是元素面版，如果你是第一次使用 Chrome 開發者工具，元素面版應該就會是你打開開發者工具後的第一個面版，這個面版其實是由幾個小的控制面版...
DAY 8
元素面版 - 動態編輯文件物件模型 2
今天我們要接續昨天還沒討論完的部份，把動態編輯文件物件模型的功能介紹完。 編輯 HTML 昨天我們有介紹了編輯元素標籤跟屬性的功能，但還有一個功能是可以編輯整個...
DAY 9
元素面版 - 檢查元素樣式
我們用了兩天的時間把如何透過元素面版來動態編輯文件物件模型 (DOM) 講完了，今天我們要一起看的功能是動態編輯元素的樣式。樣式控制台 (Styles pane...
DAY 10
元素面版 - 動態編輯樣式
昨天我們花了一點時間看了如何使用樣式控制台 (Styles pane) 來檢視樣式，今天我們則要來看如何動態編輯樣式。 再次提醒大家，我們在元素面版裡的編輯都...