前端Chrome浏览器调试总结

转载博主说: 初学者只掌握警报和控制台的基本调试方法

在我自学前端时，我只使用这种方法进行调试. 天真地说，将来所有的调试都可以通过控制台来解决. 后来，我去公司实习，看到了大家伙的调试页面. 我在这里做了一个断点并在那里记录下来. 然后我立即找到了问题所在. 事实上，学习浏览器调试工具可以大大提高他们的工作效率，特别是在大型项目的过程中

首先，这张图片的顶行是一个功能菜单. 每个菜单都有相应的功能和使用方法. 从左到右依次看

箭头按钮: 用于选择页面上的某个元素以查看其相关信息. 当我们在elements按钮页面下单击一个DOM元素时，箭头按钮将成为一个选择状态

设备图标: 点击可切换到不同的终端进行开发模式. 移动终端和PC终端之间的切换允许您选择不同的移动终端设备，同时可以选择不同的大小比例. Chrome浏览器的模拟移动设备与真实设备没有区别，是一个非常好的选择

元素内容: 用于查看和修改页面上的元素，包括DOM标记、CSS样式视图和修改，以及相关框模型的图形信息

在下图中，我们可以看到，当我用鼠标选择ID为lg_tar的div元素时，右边的CSS样式将显示这个ID的样式信息，此时，我可以在右边进行修改，修改将在页面上生效

也可以添加和编写gray element.style样式. 唯一的区别是这里添加的样式被添加到元素中

同时，当我们浏览网站时，看到一些很酷的效果和很难的风格，打开这个功能，我们可以看到其他人是如何认识到的，学习到的，这些知识是你的，认真学习会有意想不到的结果

它用于打印和输出相关的命令信息. 实际上，除了众所周知的错误报告和打印console.log信息外，console控制台还具有许多相关功能. 以下是简要介绍:

页面数据上的一些指令操作，如断点，恰好在采集的数据上执行. 因为数据是嵌套对象，所以此时不方便查看键/值

可以使用此命令查看obj的JSON字符串格式的键/值. 您可以一眼看到数据中有哪些字段和属性

除了console.log之外，还有其他相关说明

JS资源页: 我们可以在浏览器页找到JS源文件，方便我们检查和调试. 在我走出校园之前，我经常读一些的JS代码. 当时，我不理解它们，但至少我可以看到代码样式、命名方法和所有的代码都是压缩的

我们可以单击下面的{}大括号按钮将代码转换为可读格式

文件的原始压缩代码:

转换为可读格式的代码:

罪状:

例如，当我们记不起某个方法的具体用法时，我们会随意打开控制台来编写一些测试代码，或者想测试刚刚编写的方法是否会如预期的那样出现，但是当控制台返回时，它会想更改行数，但执行刚刚编写的代码的一半

因此，建议使用sources下左侧的sinpets代码片段按钮. 此时，单击以创建新的代码段文件. 编写测试代码后，将鼠标放在要运行的新文件上，然后结合控制台查看相关信息

将创建名为app.js的新代码段. 在项目环境页中，代码段可以执行项目中的方法

内容脚本:

Chrome这是的一个扩展程序. 它是根据扩展名ID组织的. 这些文件也是嵌入在页面中的资源. 这些文件可以读取、写入和操作我们的资源. 如果需要调试这些扩展文件，可以打开此目录中的相关文件进行调试. 但是几乎我们的项目没有相关的扩展文件，所以您看不到任何东西，而且您通常不需要关心这个

网络请求选项卡: 您可以看到所有资源请求，包括网络请求、图像资源、HTML、CSS、JS文件和其他请求. 您可以根据需要筛选请求项. 它通常用于查看和分析网络请求，分析后端接口是否正确传输，采集的数据是否准确，请求头，以及查看请求参数

如果选择“全部”，则将请求此页上的所有资源文件. 如果只选择XHR异步请求资源，我们可以分析相关的请求信息

打开Ajax异步请求，可以看到其请求头信息. 这是一个邮政请求. 参数是什么？您还可以预览其返回的结果数据. 这些数据的使用和查看有助于我们与后端工程师进行良好的联合调试，也有助于我们前端更直观地分析数据

计划可以记录和运行分析应用程序的所有活动. 要使页面交互，请打开“时间线”面板，然后按“开始录制”按钮（），或键入键盘快捷键CMD+e（MAC）或Ctrl+e（Windows/Linux）. “录制”按钮将从灰色变为红色，“时间线”将开始从页面获取时间线. 在应用程序中完成一些操作，记录一些数据，然后再次单击按钮停止记录

红点旁边是清晰的记录. 以后的选项允许您选择要捕获的项目. 它们是网络，JS介绍，截图谷歌浏览器调试，存储和描述

下图显示了打开网页的可选计划:

第一个框是概述，在这里可以看到页面的性能

第二个框是事件，即事件监视. 这是CPU堆栈跟踪的可视化. 绿色表示媒体时间，红色表示加载事件，蓝色表示DOM事件

第三个框表示存储

在第四个框中是详细信息，它将显示事件的详细信息

中央处理器. CPU资源. 此区域图指示事件类型消耗的CPU资源

如上图所示谷歌浏览器调试，加载时间0.02s，脚本15.68s，渲染时间11.28s，绘制时间46.06s，其他时间49.06s，空闲时间1.27s

上面的图表是一个总结. 下面是一个详细的总结

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/dianqi/article-184847-1.html