chrome浏览器中F12（使用开发者工具）

Chrome开发者工具中主要使用的四个功能页面：

元素（Elements）、控制台（Console）、源代码（Sources）、网络（Network）

Elements（元素）:用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

点击红色方框左侧箭头，或者使用快捷键Ctrl+Shift+C进行选择元素模式，再从页面中选择需要查看的元素，最后从页面中选择需要查看的元素（Elements），一栏中定位到该元素源代码的具体位置。

查看元素属性：可以被定位的源码中查看部分，如class、src、也可以在右边的侧栏中查看全部的属性，如下图。

右键add可以添加新的属性，但该属性只是临时生效。

Styles:中查看SS的属性
Computed:计算后的CSS属性
Event Listeners:表示事件监听
DOM Breakpoints：所设置的断点

Console（控制台）

作用
1 查看JS对象的及其属性
2 执行JS语句
3 查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。

Sources（源代码）

可以查看当前网页的所有源文件，该页面功能可以设置断点并进行调试。

Network(网络)

打开浏览器,按f12,点击Network,可以查看相关网络请求信息,记得是打开f12之后再刷新页面才会开始记录的

查看Network基本信息,请求了哪些地址及每个URL的网络相关请求信息都可以看的到URL，响应状态码，响应数据类型，响应数据大小，响应时间。

请求URL可进行筛选和分类，选择不同分类,查看请求URL,方便查找，也可以直接Filter搜索查询相关URL，可以输入关键字或者正则表达式进行查询，Waterfall能分割重要的请求耗时,查看具体请求耗时在哪个地方,鼠标指到相关区域可以看到具体耗时。

参考链接：https://zhuanlan.zhihu.com/p/138922503