Toru Yoshikawa highlights 10 awesome features of Chrome DevTools including the ability to pick colors from the screen in Elements, adjust animation speed in Elements, define animation timing in Elements, search by selector in Elements, take timeline screenshots in Timeline, show layers in Layout, enable network throttling in Network, display variable values inline in Sources, store variables as globals in Sources, manage framework blackboxing in Sources, and enable remote debugging of WebViews. Yoshikawa also provides links to resources on using Chrome DevTools and its official documentation.

1. Chrome DevTools
Awesome 10 Features +1
2015/11/17
Webプラットフォーム部
Toru Yoshikawa (@yoshikawa_̲t)

2. Who?
html5j 代表
Google Developer Experts (Chrome)
HTML5 Experts.jp 副編集⻑⾧長兼エキスパー
ト
html5j ビギナー部（副部⻑⾧長）／Web先端
技術味⾒見見部 (顧問)／⽇日本jQuery Mobile
ユーザー会 (管理理⼈人)／Sublime Text 2
Japan Users Group (管理理⼈人)などなど
Blog: http://d.hatena.ne.jp/pikotea/
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t

3. Chrome DevTools
使ってますか？

4. How to use
Chrome DevTools
Chrome DevTools for beginners
http://www.slideshare.net/
yoshikawa_̲t/devtools-‐‑‒beginner
Chrome Developer Toolsを使いこなそ
う！
http://www.slideshare.net/yoshikawa_̲t/
chrome-‐‑‒developer-‐‑‒tools-‐‑‒17787728
公式 Chrome DevTools
https://developers.google.com/web/
tools/chrome-‐‑‒devtools/

5. Chrome DevTools
Awesome 10 Features

6. Elements
Color picker from screen

7. Elements
Animation speed adjust

8. Elements
Defining animation Timing

9. Elements
Search by selector

10. Timeline
Timeline screenshot

11. Layout
Show Layers

12. Network
Network Throttling

13. Sources
Display variable values inline

14. Sources
Store as Global Variable

15. Sources
Manage framework blackboxing

16. Remote Debugging
Debugging WebViews
https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews

17. console.log(ʻ‘Thank you!!ʼ’)
(@yoshikawa_̲t)