Chrome dev tool
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Chrome dev tool

on

  • 440 views

Chrome Developer Tool 介紹

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

Statistics

Views

Total Views
440
Views on SlideShare
440
Embed Views
0

Actions

Likes
1
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Chrome dev tool Presentation Transcript

  • 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