F12-开发者工具常用操作与使用说明之元素Elements
前端开发离不开浏览器 | 前端调试离不开控制台
我要开始写代码了→想看一下效果→打开浏览器→不满意或者出问题了→想要调试一下→打开控制台→主角出场 ↓↓↓
嗯~没错！就是这些。(Tips：打开方式主要有F12、ctrl+shift+i、右键检查、手动点击工具栏)
我们日常开发过程中经常会遇到不容易理解的行为出现，这个时候我们就要打开控制台（即开发者工具）来排查或解决我们的问题。
其实控制台不仅仅是协助我们调试的工具，还能很大程度上提升我们的生产力。
功能主要包括：审查元素、PC与移动端视图切换、查看元素、输出值、查看源文件、监测网络请求、内存分配信息、安全性信息、本地存储、性能分析等。
由于内容较多，因此先从元素(elements)说起。
1.点击左上角的小箭头，然后选中页面上的元素
当鼠标悬浮在该元素上时，会展示出当前的标签、大小、颜色、字体、外边距等属性，可用于快速查看这些基本信息。当单击鼠标时，元素面板中会自动定位到该元素的位置处，并且右边会出现样式、监听事件等属性面板。
会显示出应用在当前元素上的所有样式信息，包括自身样式、继承样式、代理样式等。可追加、修改、取消相应的属性，单击上方:hov可强制设置元素的状态，如：:active、:hover、:focus等，单击.cls可为元素添加新的类名，单击加号可以新建样式规则。最下方为元素经过计算之后得到的盒子模型，可在计算样式面板查看更详细信息，计算样式面板展示了所有非默认属性经过层叠覆盖最终得到的样式信息，布局面板主要用来查看grid网格布局与flex弹性布局。(Tips：对于属性值为数值类型，可通过上下按键来调整，步长为1，按住shift步长为10，按住ctrl步长为100。颜色可以通过点击小方块来细致调整)
会显示出当前元素所有被绑定或会触发的事件（包括冒泡以及事件委托），展开不同的事件类型，可以查看该事件绑定所在的文件中的位置，一般用于快速定位到事件发生的位置，从而可以进行打断点等操作。
2.可在元素上面右键进行更多的操作
在元素节点与文本节点上面进行右键，会展示不同的控制面板，基本上所有的操作都以字面上的意义去理解就可以。需要特殊说明的是元素也可以打断点，有三种触发条件：元素属性变化、移除元素、子元素变化，如果在打完断点之后，发生上述情况，那么就会自动跳转到相应的执行代码的文件所在位置。注意：如果状态改变已经发生了，打断点是没有作用的，并且刷新页面之后会清除断点，这个与在源文件中的断点是不同的，不会一直保留断点。因此遇到这种情况可以在js中设置断点或debugger，并且是在页面加载完但代码还没有执行的时候，这样可以手动给元素设置断点之后，再继续执行代码，那么发生上述改动时，就会触发断点功能，跳转到代码执行的位置。
3.快速引用元素来查看属性等信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lyV2jxbo-1653552214661)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8366fd28675240dd878a373be6a29ad4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]
有时候我们可能需要打印一些页面中的元素，但是通过在代码中输出或者通过选择器查询显得不是很灵活，这种情况下可以使用元素别名来达到引用的效果，在页面中单击元素之后，可以看到后面出现了 == $0 的字样，这个时候我们可以在控制台使用$0来输出该元素，并且可以直接进行元素的所有操作。注意：当没有任何选中元素时，输出$0会报错，$0永远指向最新的选中元素，并且$1指向次新，以此类推，最多到$4共五个元素引用。（Tips：如果是用vue开发的页面，那么可以使用\$0.\_\_vue\_\_来引用当前元素的vue实例，其他同理，调试场景可自行拓展）
总的来说
元素面板提供的功能是非常强大的，其实还有很多便利性的功能，可以极大的帮助开发者快速发现问题、定位问题、排查问题、解决问题。甚至没有问题的时候也能够帮助开发者提升生产力。希望掌握这些技能之后能减少我们的痛苦折磨与头秃预警。目前元素面板只介绍这些常用的操作，后续可增加更多调试小技巧。
与其他面板配合使用，希望我们以后代码撸得越来越爽，越来越轻松。
F12-开发者工具常用操作与使用说明之元素Elements相关推荐
- 企业IT管理员IE11升级指南【17】—— F12 开发者工具
企业IT管理员IE11升级指南 系列: [1]-- Internet Explorer 11增强保护模式 (EPM) 介绍 [2]-- Internet Explorer 11 对Adobe Flas ...
- IE11 全新的F12开发者工具
我讨厌debug,相信也没多少开发者会喜欢.但是当代码出错之后肯定是要找出问题出在哪里的.不过网页开发的时候遇到 BUG 是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的开发 ...
- 通过浏览器F12开发者工具的javascript控制台给Vue表单赋值
问题背景 做一个网页表单自动录入软件,网页不是我方开发的.自动录入软件是基于.NET的C/S客户端软件,它使用WinForm的WebBrowser控件加载网站,网站的前端是使用 Vue 和 Eleme ...
- 浏览器F12开发者工具
浏览器F12开发者工具 1.介绍 2.工具 附录 1.介绍 F12常用于网站界面测试.调试,分析问题,查看HTML元素.查看响应事件和数据等,还可帮助测试工程师定位前后端Bug: 其中使用最多的功能页 ...
- chrome F12开发者工具之preview 与response的区别
chrome F12开发者工具之preview 与response的区别 问题描述: 我们在Chrome浏览器按F12调试程序的时候会查看Network里的Preview和Response的结果,不管 ...
- 谷歌浏览器F12开发者工具格式化js代码
谷歌浏览器F12开发者工具调试代码时,查看js文件都是非格式化存储的,不能直观显示. 在最底部的工具栏有一个" { } " 样的图标, 点一下就格式化了.
- 如何使用浏览器的F12开发者工具调试页面？
一,背景介绍 通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直 ...
- 手机怎么打开f12_手机网页F12开发者工具eruda
手机上要对网页进行调试真的很麻烦,尤其是iOS系统,你还得有个苹果电脑还得装的是苹果系统,真难了. 还好现在有js模拟的F12开发者工具,虽然并不能和Chrome的比,但是一般调试使用也足矣了,前端福 ...
- 浏览器 F12 开发者工具快速入门
一.F12 开发者工具是个啥? 通俗的话讲,就是提供给 Web 前端工作者进行页面.样式.脚本.调优--的一类开发工具.是基于浏览器的扩展功能,典型的关键字就是 "console" ...
最新文章
- 选择图层_Photoshop思维导图，图层的高级操作
- php final这个关键词代表什么,php面向对象之final关键字用法及实例
- 深入理解分布式技术 - 负载均衡策略
- 全网段ip扫描工具安卓_我是如何打造个人专属网络扫描利器
- java调用matlab的jar包
- QueryDSL依赖
- w8服务器dns修改,怎么修改DNS Win8修改DNS服务器地址的具体步骤图解
- QML学习之基本元素Rectangle, Text, Button，Image介绍
- activiti学习之pvm篇
- 【HelloKitty团队项目】Alpha阶段项目展示
- 吉林大学计算机专硕和学硕的区别,在吉林大学在职研究生项目中专硕和学硕的区别是什么...
- mathtype手动延期
- 千牛插件开发，千牛SDK开发。
- C++ day22 继承（二）基类指针数组通过虚方法实现智能的多态
- mongo-节点出现recovering状态的处理办法
- HTTP的常用方法、GET和POST的区别
- C++设计模式——享元模式(高屋建瓴)
- 【AtCoder】【模拟】【模型转化】Camel and Oases（AGC012）
- Linux 如何查看内存使用情况
- Qt延时处理的四种方法