Chrome Developer Tool 介紹 希望新手網頁開發者能嘗試看看囉

1. CHROME DEVELOPER TOOL
(BASIC)
NNNN
2013/10/30

2. 為啥需要 DEVELOPER TOOL?
• 你怎知道你的js
跑得如何?
• 以前debug⽅方法就是瘋狂的”alert(....)”
• 以前CSS
runtime 狀況只能靠⾁肉眼
• 你怎知道DOM的⼀一些attribute是否符合預期?
• Ajax
有沒有實際呼叫?
• 到底載⼊入哪些resource

3. 了解網⾴頁產⽣生順序
http://taligarsiel.com/Projects/image008.jpg

4. 為啥選擇CHROME

5. IE 表⽰示
(抱歉助教⽤用mac, 無法做screenshot)
• 單⼀一版本就好了, 搞啥這麼多版本
• F12好醜
• IE的developer
tool就是慢啊
• IE雖然⽀支援很多, 但還是⼀一對std不⽀支援

6. 怎麼開啓?
• 右鍵
->檢查元素
或

7. DEVELOPER TOOL
Elements 可以看⾒見Render的結果
Styles 可以看CSS Runtime結果

8. DEVELOPER TOOL
點兩下, 可以修改css property作預覽

9. RESOURCE
Resource可以看⾒見載⼊入哪些東⻄西,
當然就可以”另存”他⼈人的資源^.<

10. NETWORK
Network 可以看⾒見資源載⼊入效率,
和相關類型
就知道誰是導致網⾴頁載⼊入慢的原因
聊天室的例⼦子: 可以看⾒見他在背後送訊息給server

11. CONSOLE
• 查看Log的地⽅方(
console.log(.... , .... , ..., ... ,...); )
• 終於不⽤用alert
• Chrome
Developer tool會parse json的內容
• 可以查查哪些潛在的function可⽤用
• 測試js
code的地⽅方

12. CONSOLE

13. CONSOLE
1.測試Code
2. Autocomplete, 避免寫錯字(js 沒有compile)

14. CONSOLE
查看object的內容, 和function
看得到的都可以取⽤用, 甚⾄至可以修改

15. 下⼀一次談論怎麼改別⼈人的
CHROME EXTENSION