Your SlideShare is downloading. ×
Chrome dev tool
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome dev tool

319

Published on

Chrome Developer Tool 介紹 …

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
319
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×