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