# chrome dev tools ## 簡報者：洧杰(查理) --- # outline * element * Network * chrome extension * Boomark --- # element --- # 開啟開發人員工具 ![](https://i.imgur.com/0K5HSLw.png) --- # Element 個人常用心法 * 直接編輯程式碼，再將 Code 貼回去 * [color](http://codepen.io/liao/full/ezJjaj/) * [Scroll](http://codepen.io/liao/full/RRrYVG/) * [listeners](http://codepen.io/liao/full/pbgOwO/) * 個人畫面切割習慣 * [Event](http://codepen.io/liao/full/ezJjaj/) * [transition](http://codepen.io/liao/full/PzZdob/) * [Animation](http://codepen.io/liao/full/ZOQMEj/) --- # Network * 偵測請求數量、流量 * throttling * device Mode --- # chrome extension --- # Boomark --- # 其他補充資源 * [Chrome dev video by umaar](http://umaar.github.io/devtools-talk-aug-2014/)