Mac上如何使用浏览器开发工具
作为web开发者，浏览器开发者工具是我们必不可少的工具，用好浏览器开发者工具是一项基本技能。大家对于Windows上的Chrome应该很熟悉了，但是在Mac上是怎样使用浏览器开发工具的呢？
打开浏览器开发工具
在Mac上使用浏览器开发工具和在Windows上使用类似，都是通过快捷键或右键点击来打开。在Chrome浏览器中打开任意网页，可以鼠标右键选择检查，或者使用快捷键Command Alt I来打开浏览器开发工具。
常用操作
浏览器开发工具有9个tab，下面讲一些常用的操作：
Elements
Elements这个tab是网页的标签代码结构页面，当鼠标定位到某个标签时，页面会突出显示出来。你还可以点击前面的箭头图标来选择页面的元素，并查看它的代码。
手机屏幕调试
选择第二个手机屏幕图标，可以打开移动设备调试。屏幕切换为手机屏幕大小，你还可以自己设置大小。这是做响应式设计的最好的调试工具。
Memory
Memory这个tab是用于测试页面性能表现的。对于一些长时间打开就会崩溃的网页问题，可以借助这个工具进行分析。选择"Take heap snapshot"，然后点击"take snapshot"，就可以得到第一次内存使用情况。之后，每次点击左边的小圆点，就可以看到两次内存使用情况的差别。右边还提供了详细的数据供参考。
Sources
Sources这个tab用来查看页面的源代码，包括HTML、CSS、JS等。通常会被用来debug JavaScript代码。
Network
Network这个tab记录了所有的网络请求，包括静态资源（CSS、JS、图片等）的下载以及HTTP请求等。它对于页面请求时间优化非常有用，你可以看到每个请求花费的时间。
Console
Console这个tab用来调试代码，可以打印出运行结果，还可以显示我们在JS代码中加入的输出语句。它本身就是一个编辑器，我们可以在这里编辑函数并运行。
其他tab
除了上述提到的几个tab，还有一些其他的tab，如Audits、Performance、Application、Security等。在日常使用中可能用得比较少，暂时可以忽略。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
