Chrome dev tool
2 likes•916 views
Chrome Developer Tool 是一个用于调试和分析网页性能的重要工具。用户可以通过它查看 JS 运行情况、CSS 样式和资源加载效率等信息，避免使用传统的 debug 方法。相比 IE 的开发工具，Chrome 工具更为高效和友好，支持 JSON 解析和代码测试。
Chrome dev tool
- 2. 為啥需要 DEVELOPER TOOL? • 你怎知道你的js 跑得如何? • 以前debug⽅方法就是瘋狂的”alert(....)” • 以前CSS runtime 狀況只能靠⾁肉眼 • 你怎知道DOM的⼀一些attribute是否符合預期? • Ajax 有沒有實際呼叫? • 到底載⼊入哪些resource
- 4. 為啥選擇CHROME
- 5. IE 表⽰示 (抱歉助教⽤用mac, 無法做screenshot) • 單⼀一版本就好了, 搞啥這麼多版本 • F12好醜 • IE的developer tool就是慢啊 • IE雖然⽀支援很多, 但還是⼀一對std不⽀支援
- 7. DEVELOPER TOOL Elements 可以看⾒見Render的結果 Styles 可以看CSS Runtime結果
- 8. DEVELOPER TOOL 點兩下, 可以修改css property作預覽
- 11. CONSOLE • 查看Log的地⽅方( console.log(.... , .... , ..., ... ,...); ) • 終於不⽤用alert • Chrome Developer tool會parse json的內容 • 可以查查哪些潛在的function可⽤用 • 測試js code的地⽅方
- 12. CONSOLE
- 13. CONSOLE 1.測試Code 2. Autocomplete, 避免寫錯字(js 沒有compile)