聊聊Chrome DevTools

Taichung Frontend Group

簡報連結: http://frontend.inow.tw/events/1106/

今日流程

• 來賓自我介紹
• 關於Chrome Devtools
• 中場休息
• DevTools與Android裝置連動
• Chrome與Devtools的擴充套件
• QnA
• 交流時間

自我介紹時間

• 我的名字是
• 任職的公司與職務
• 關於Chrome DevTools，我的了解是...
• Or 關於瀏覽器除錯工具，我知道的是...

DevTools是網頁開發人員工具

開啟DevTools的方式

介面介紹

設定方式

DevTools的選單介紹

• 行動裝置
• Elements 元素
• Network 網路
• Sources 下載的資源
• Timeline 時間軸
• Profile
• Resources 資源
• Audits 統計
• Console 控制台

行動裝置

• DEMO瀏覽網頁
• 可模擬畫面大小
• 可模擬裝置與版本
• 可模擬手指觸碰
• 可模擬多指觸碰
• 可模擬地理位置
• 可模擬多指觸碰
• 可模擬手機加速器(Canary Only)

Elements 元素

• 可查看原始碼，以目前頁面狀態
• 可編輯與改變DOM的內容
• 可觀察CSS載入順序與改變CSS設定
• 可查看CSS原始碼(與Source串接)
• 偽類/元素的觀察
• 可觀看Box Model

Network 網路

查看這個頁面載了什麼檔案

• 下載的檔案類別,大小,尺寸,資訊
• 各檔案的表頭,隱藏資訊,預覽,Cookies與下載時間
• 檔案下載的方式與狀態
• 整個頁面的下載時間軸，以便找出下載瓶頸
• 找出頁面有指定但找不到的檔案

Source 下載的資源

• 編輯資源檔並儲存
• 查看本地編輯紀錄
• 可指定儲存位置

Timeline 時間軸

• 資源載入後產生畫面的執行效果
• 依照動作細分消耗資源的程度

Profile

• 記錄瀏覽時消耗CPU資源
• 用在資料都下載完畢後

Resource 資源

• 資料庫
• 快取
• Session
• 本機儲存資料

Audits 統計

提供效能改善建議

DEMO

Console 控制台

• 操作javascript
• 找尋未載入之資源
• 透過console.log將必要資訊列印到主控台
• 找出javascript的bug行數
• 使用Bling方法

中場休息

與Android裝置連動

影片網址: http://youtu.be/Q7rEFEMpwe4

選單 > 更多工具 > 檢查裝置

啟動行動裝置的USB Debug模式

Chrome與Devtools的擴充套件

• LiveStyle與編輯器綁定
• EditThisCookies Cookies編輯器
• Rails Panel
• PageSpeed 測試網頁速度
• AngularJS
• Gulp-devtools
• 其他Chrome工具

Q & A

關於DevTools，我想知道/分享的是...

交流時間

參考文件

• https://developer.chrome.com/devtools/docs/device-mode
• http://discover-devtools.codeschool.com/
• http://www.smashingmagazine.com/2013/08/08/release-livestyle-css-live-reload/
• http://www.dotblogs.com.tw/hatelove/archive/2012/03/01/introducing-chrome-web-developer-tool.aspx
• https://code.tutsplus.com/tutorials/chrome-devtools-features-you-may-have-missed--cms-20850

Thank You