打开Developer Tools的方法：
a. 点击F12
b. 在浏览器中选择Tools-->F12 Develooper Tools
打开后图示：
从上图我们可以看到，Developer Tools有八个独立的选项卡：
DOM资源管理器(DOM Explorer): 显示了在浏览器中渲染网页时的结构，并使在活动页中编辑HTML和样式的操作成为可能。不必编辑或重新加载资源，即可执行操作，以便你可以快速解决显示问题或试用新思路。
控制台(Console): 提供了与运行代码交互、使用控制台命令行发送信息和使用控制台调试API获取信息的方式。
调试器(Debugger):检查代码的作用、代码执行时间及其执行方式。在执行过程中暂停代码，逐行操作代码，然后查看每个步骤中变量和对象的状态。
网络(Network): 提供了涉及加载和网页操作的任何网络请求的详细信息。
UI响应能力(UI Responsiveness): 在页面减慢时帮助我们寻找问题症结，可以使用它分析速度缓慢的特定点，也可以显示导致这些问题的操作。
探查器(Profiler)：JavaScript速度的单纯计量工具，显示了在分析会话过程中调用的函数、调用次数以及完成所需的时间。
内存(Memory): 如果某个网页开始很快，但使用一会儿后就变慢，主要原因通常是内存泄漏，该工具跟踪网页的内存使用情况，帮助你标识何处的内存使用处于增长趋势，增长原因以及如何修复它。
模拟(Emulation): 帮助你测试你的网页在不同的屏幕大小和硬件功能上的运行方式，以及它们如何响应不同的用户代理字符串。
接下来的文章将详细介绍这八个工具。