Chrome dev tool

671 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

Chrome dev tool

  1. 1. CHROME DEVELOPER TOOL (BASIC) NNNN 2013/10/30
  2. 2. 為啥需要 DEVELOPER TOOL? • 你怎知道你的js 跑得如何? • 以前debug⽅方法就是瘋狂的”alert(....)” • 以前CSS runtime 狀況只能靠⾁肉眼 • 你怎知道DOM的⼀一些attribute是否符合預期? • Ajax 有沒有實際呼叫? • 到底載⼊入哪些resource
  3. 3. 了解網⾴頁產⽣生順序 http://taligarsiel.com/Projects/image008.jpg
  4. 4. 為啥選擇CHROME
  5. 5. IE 表⽰示 (抱歉助教⽤用mac, 無法做screenshot) • 單⼀一版本就好了, 搞啥這麼多版本 • F12好醜 • IE的developer tool就是慢啊 • IE雖然⽀支援很多, 但還是⼀一對std不⽀支援
  6. 6. 怎麼開啓? • 右鍵 ->檢查元素 或
  7. 7. DEVELOPER TOOL Elements 可以看⾒見Render的結果 Styles 可以看CSS Runtime結果
  8. 8. DEVELOPER TOOL 點兩下, 可以修改css property作預覽
  9. 9. RESOURCE Resource可以看⾒見載⼊入哪些東⻄西, 當然就可以”另存”他⼈人的資源^.<
  10. 10. NETWORK Network 可以看⾒見資源載⼊入效率, 和相關類型 就知道誰是導致網⾴頁載⼊入慢的原因 聊天室的例⼦子: 可以看⾒見他在背後送訊息給server
  11. 11. CONSOLE • 查看Log的地⽅方( console.log(.... , .... , ..., ... ,...); ) • 終於不⽤用alert • Chrome Developer tool會parse json的內容 • 可以查查哪些潛在的function可⽤用 • 測試js code的地⽅方
  12. 12. CONSOLE
  13. 13. CONSOLE 1.測試Code 2. Autocomplete, 避免寫錯字(js 沒有compile)
  14. 14. CONSOLE 查看object的內容, 和function 看得到的都可以取⽤用, 甚⾄至可以修改
  15. 15. 下⼀一次談論怎麼改別⼈人的 CHROME EXTENSION

×