Chrome 开发者工具教程

Chrome 开发者工具，是基于Chrome 浏览器内含的一套网页制作和调试工具。

开发者工具允许网页开发者深入浏览器和网页应用程序的内部。

该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略。

开始学习Chrome 调试工具！

适用人群

这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程，你将学会如何使用这些工具，并且学会如何通过它来分析调试提供的 Demo 。

学习前提

在你继续本教程之前，你必须对简单的术语有一定的了解，比如源码，文档等等。因为在你的组织下处理各级软件项目，如果你有软件工作的知识在软件开发和软件测试流程那是最好的。

简介

如果作为一个前端，你还不知道Chrome的开发者工具，那可能说明你真的落伍了。实际上，微软的IE系列浏览器也有类似功能，但不如Chrome 开发者工具好用。

Chrome 开发者工具一般按键盘上的F12键打开，当然还有其他打开方式，每个人习惯不一样，比如有的人就喜欢“鼠标右键->审查元素”的方式。

开发工具调试出后，你会见到如下界面：

你还可以点击左上角的“Toggle device mode”来模拟手机模式。

点击后的效果如下：

最左上角放大镜是用来定位DOM元素的，选择要查看的网页内容，点击一下，看Elements选项卡，就可以定位到你点击的那个元素了。

除此之外，还有8个选项卡，他们分别是：

• Elements：查看当前文档的DOM信息
• Network：查看网络请求
• Sources：查看当前资源文件（如CSS、JS、图像文件等）
• Timeline：文件的加载时间线
• Profiles：检测JS等的内存占用情况等
• Resources：查看本地资源信息（cookie,local storage,session storage等）
• Audits：页面中的文件审查情况
• Console：查看调试用，也可以直接写JS代码

总之，Chrome 开发者工具不可谓不强大。用好它，对你的前端开发将大有裨益！

转载本站内容时，请务必注明来自W3xue。
部分原创内容未经授权禁止转载，违者必究。