Chrome—— 浅谈谷歌F12开发者工具

简介

• 按F12调出
• 右键检查（或快捷键Ctrl+Shift+i）调出 

 

 

chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）

• 元素（Elements）：

用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。

• 控制台（Console）：

控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息

• 源代码（Sources）：

该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，可以给JS代码添加断点等。

• 网络（Network）：

网络页面主要用于查看header等与网络连接相关的信息。

元素（Elements）

• 查看元素的代码：

a、点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式

b、然后从页面中选择需要查看的元素

c、然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置

• 查看元素的属性：

a、可以从源代码中读出改元素的属性。

b、如下图中的class、src、width等属性的值。

• properties

a、从源代码中读到的只是一部