作为web开发者，浏览器开发者工具是我们必不可少的工具，用好浏览器开发者工具是一项基本技能。大家对于windows上的chrome应该很熟悉了，但是在Mac上是怎样使用浏览器开发工具的呢？
工具/原料
1
Mac
2
Chrome浏览器
方法/步骤
1
在chrome浏览器中打开任意网页，鼠标右键选择检查或者快捷键Command+Alt+I，打开浏览器开发工具。和windows上一样，开发工具有9个tab。下面就讲一些常用的操作。
2
Elements这个tab是网页的标签代码结构页面，鼠标定位到某个标签，页面会突出显示出来。也可以点击前面的箭头图标，来选择页面的元素，来查看它的代码。
3
选择第二个手机屏幕图标，可以打开移动设备调试，屏幕切换为手机屏幕大小，还可以自己设置大小。这个是做响应式设计的最好的调试工具啦。
4
Memory这个tab是用于测试页面性能表现的。对于有些网页长时间打开就会崩溃的问题，可以借助这个工具来分析。选择'Take heap snapshot'，点击take snapshot，就可以得到第一次内存使用情况，后面就点左边的小圆点，就可以看两次的内存使用情况差别了，右边有详细的数据，这里就不展开讲了。
5
Sources这个tab是用来查看页面的源代码，包括html，css，js等，通常会被用来debug js代码。
6
Network这个tab是用来记录所有的网络请求的，包括静态资源（css，js，image等）下载，http请求等，每个请求花费的时间，在做页面请求时间优化时，非常好用。
7
Console这个tab是用来调试代码的，可以打印出运行结果，还有我们写在js代码中的输出语句。它本身就是一个编辑器，我们可以在这里编辑函数并运行。
8
其它tab，包括Audits，Performance，Application，Security等，基本没有用到，暂时忽略。
下一篇：蜜释迦应该怎么吃