CHROME DEVELOPER TOOL(BASIC)

NNNN2013/10/30

為啥需要 DEVELOPER TOOL?

•你怎知道你的js 跑得如何?

•以前debug⽅方法就是瘋狂的”alert(....)”

•以前CSS runtime 狀況只能靠⾁肉眼

•你怎知道DOM的⼀一些attribute是否符合預期?

• Ajax 有沒有實際呼叫?

•到底載⼊入哪些resource

了解網⾴頁產⽣生順序

http://taligarsiel.com/Projects/image008.jpg

為啥選擇CHROME

IE 表⽰示

(抱歉助教⽤用mac, 無法做screenshot)

•單⼀一版本就好了, 搞啥這麼多版本

• F12好醜

• IE的developer tool就是慢啊

• IE雖然⽀支援很多, 但還是⼀一對std不⽀支援

怎麼開啓?

•右鍵 ->檢查元素

或

DEVELOPER TOOL

Elements 可以看⾒見Render的結果

Styles 可以看CSS Runtime結果

DEVELOPER TOOL

點兩下, 可以修改css property作預覽

RESOURCE

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

NETWORK

Network 可以看⾒見資源載⼊入效率, 和相關類型

就知道誰是導致網⾴頁載⼊入慢的原因聊天室的例⼦子: 可以看⾒見他在背後送訊息給server

CONSOLE

•查看Log的地⽅方( console.log(.... , .... , ..., ... ,...); )

•終於不⽤用alert

• Chrome Developer tool會parse json的內容

•可以查查哪些潛在的function可⽤用

•測試js code的地⽅方

CONSOLE

CONSOLE

1.測試Code2. Autocomplete, 避免寫錯字(js 沒有compile)

CONSOLE

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

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