Your SlideShare is downloading. ×
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
Chrome dev tool
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

326

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
326
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

×