浏览器开发者工具详解

发布时间:2021年07月30日 阅读:783 次

  

浏览器开发者工具详解  

Elements标签  

DOM  

Addattribute添加属性  

Editattribute修改属性  

EditasHTML编辑html  

Deleteelement删除节点  

Copy  

Cutelement剪切节点(仅能在内部paste)  

Copyelement复制节点  

Pasteelement粘贴在选中节点内部的最后位置  

CopyouterHTML复制节点(暂不了解区别)  

Copyselecter复制CSS选择器  

CopyXPath复制XPath选择器  

css个xPath区别点击查看  

简单来说:  

Xpath则更加强大,定位更加准确,可以匹配文本,可以寻找父级。  

例://*[@id="select"]/div[3]/div[2]/div[1]/div[2]  

css选择器更加快速,但是不能选择父级(据说css4将增加此功能)  

例:#select>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div.lf.select_title  

Hideelement隐藏节点  

Forcestate添加鼠标状态  

Breakon为DOM结构打断点,当其改变状态时,会顿住  

Expandrecursively展开所有节点  

Collapsechildren收缩子节点  

Scrollintoview使页面滚动到选中节点位置  

Focus  

Styles查看页面当前样式、此处可临时修改样式  

此处会同时会显示当前样式的来源xxx.css以及行数line,还有当前结构的盒模型。  

点击Showall则会显示所有的默认样式  

EventListeners注册的事件通过选择切换,可以查看当前结构绑定事件,以及父级绑定的事件,备注:悬浮可临时remove此事件  

Ancestors  

All、Passive、Blocking  

Frameworklisteners  

DOMBreakpoints所添加的DOM结构断点  

Properties选中节点所有的方法与属性  

Accessibility(暂不了解)  

查看DOM结构、临时修改DOM内容  

查看页面Styles、临时修改页面Styles  

查看DOM结构的Computed(计算后的属性)  

查找节点绑定的事件EvenListeners  

co

剩余50%内容付费后可查看
Tag:开发者工具
相关文章