调试中使用最多的功能页包括元素(ELements )、控制台)、源代码)和网络)。
“元素”(Elements )用于查看或修改HTML元素的属性、CSS属性、监听事件和断点。 (DOM断点) JavaScript调试常用于调试断点，但调试DOM结构时也可以使用断点方法。 这就是DOMBreakPoint ) ) DOM断点。 源代码(Sources ) :此页面用于显示页面的HTML文件源代码、JavaScript源代码和CSS源代码。 另外，最重要的是可以调试JavaScript源代码，也可以在JS代码中添加断点。 网络(Network ) :网页主要用于显示有关网络连接的信息，如header。元素（Elements）
要查看元素代码，请单击图中的箭头，或使用快捷键Ctrl Shift C进入元素选择模式，然后从页面中选择要显示的元素。 然后，可以在开发人员工具的元素" Elements "栏中导航到该元素源代码的特定位置。
显示元素属性：可以从置入的源代码(如class和src )中查看部分内容，也可以在右侧边栏中查看所有属性。 请参照下图的位置
要修改元素的代码和属性，请直接双击要修改的部分进行修改，或选择要修改的部分并右键单击进行修改，如下图所示
注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。
右边的侧栏个功能的介绍：如下图所示
控制台（Console）
查看JS对象及其属性执行JS语句以显示控制台日志。 如果在网页的JS代码中使用console.log ()函数，则控制台中将显示从该函数输出的日志信息。 日志信息通常在开发调试时生效，但正式联机后将删除函数。源代码（Sources)
网络（Network）
请求文件的具体介绍：
一共分为四个模块：
Preview :“预览”面板，列出资源的请求url、HTTP方法、响应状态代码、请求标头和响应标头、各自的值、请求参数等。 用于预览资源。 响应：响应信息面板包含尚未格式化资源的内容。 Timing :有关资源请求的详细信息，请花时间打开浏览器，按F12键，然后单击Network查看相关的网络请求信息。 我记得打开F12后刷新页面才开始记录。
查看网络的基本信息，可以看到请求了哪个地址，以及每个URL的网络相关请求信息。 可以过滤和分类URL、响应状态代码、响应数据类型、响应数据大小和响应时间请求URL。 选择不同的分类，查看请求URL，即可轻松搜索
也可以直接在Filter中搜索与查询相关的URL，或者通过输入关键字或正则表达式来执行查询
Waterfall拆分关键请求，确定特定请求需要时间的位置，然后用鼠标指向相关区域以确定需要特定时间
我们将具体分析里面的各位代表的意义、各自需要多长时间，从而分析服务器在哪个阶段存在问题
意思是排队
Stalled阻止请求访问该URL的主机，有并发连接数和连接数限制，必须等待以前的运行，需要很长时间
DNS Lookup是指解析域名所需的时间
初始连接初始化连接时间。 这里通常是TCP 3次连接握手时间
SSL https特有的协议
请求中心发送请求所用的时间
等待等待响应时间，但这里一般最费时间
内容下载下载内容所需的时间
原文连接： https://www.cn blogs.com/unique snail/p/10761887.html