因为F12是前端开发者的利器，所以我自己也在反复试验中，看了一些博客和资料后，自己总结出来帮助自己理解和记忆。 另外，我也想帮助有需要的伙伴。 嘿嘿！
首先，我将介绍Chrome开发人员工具中调试时使用最多的三个功能页。 元素(ELements )、控制台)、源代码)以及网络)等。
元素(Elements ) :用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。 控制台：控制台通常用于执行一次性代码、查看JavaScript对象、查看调试日志信息和异常信息。 源代码(Sources ) :此页面用于显示页面的HTML文件源代码、JavaScript源代码和CSS源代码。 另外，最重要的是可以调试JavaScript源代码，也可以在JS代码中添加断点。 网络(Network ) :网页主要用于显示有关网络连接的信息，如header。1、元素（Elements）
要查看元素代码，请单击图中的箭头，或使用快捷键Ctrl Shift C进入元素选择模式，然后从页面中选择要显示的元素。 然后，可以在开发人员工具的元素" Elements "栏中导航到该元素源代码的特定位置。
显示元素属性：可以从置入的源代码(如class和src )中查看部分内容，也可以在右侧边栏中查看所有属性。 请参照下图的位置
要修改元素的代码和属性，请直接双击要修改的部分进行修改，或选择要修改的部分并右键单击进行修改，如下图所示
注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。
右侧侧栏的功能介绍：如下图所示
2、控制台（Console）
查看JS对象及其属性执行JS语句以显示控制台日志。 如果在网页的JS代码中使用console.log ()函数，则控制台中将显示从该函数输出的日志信息。 日志信息通常在开发调试时生效，但正式联机后将删除函数。
3、源代码（Sources）其主要功能介绍如下
4、网络（Network）大体功能如下：
请求文件具体说明
一共分为四个模块：
Preview :“预览”面板，列出资源的请求url、HTTP方法、响应状态代码、请求标头和响应标头、各自的值、请求参数等。 用于预览资源。 响应：响应信息面板包含尚未设置资源格式的内容。时间：资源请求详细信息需要时间
以上是我的总结。 内容有点多，希望你耐心检查。 Chrome DevTools有很多非常有用的功能。 请大家继续探索。 我希望我的总结对大家有帮助。