几个panel介绍 ### [Elements] 操作DOM和css，``Computed``非常实用，可以查看各种style设定还可以检查Event Listeners. ### [Console] Show side bar 可以根据level显示console的出力。 ### [Sources] Debug javascript，设置breakpoints. - ``F9``: step by step, ``F10``: step over next, ``F11``: step out pf current, ``F8``: Pause - Preview variables in Scope panel. - Add conditional breakpoint - loop: Watch the values ### [Network] Lookup medias, xhr, etc. ### [Timeline] Check performance ### [Application] Check localStorage & sessionStorage & indexedDB & Web SQL & Cookies ## APP debug Access ``chrome://inspect/#devices`` ## src - [Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能](https://www.buildinsider.net/web/chromedevtools/01) - [Please stop using console.log(), it’s broken…](https://hackernoon.com/please-stop-using-console-log-its-broken-b5d7d396cf15)