课程表

Chrome 开发者工具课程

工具箱
速查手册

Chrome 开发者工具教程

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

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

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

开始学习Chrome 调试工具!


适用人群

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

学习前提

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

简介

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

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

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

Chrome 开发者工具界面

你还可以点击左上角的“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。
部分原创内容未经授权禁止转载,违者必究。