浏览器开发者工具详解

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

  

浏览器开发者工具详解  

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  

console控制台  

这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作JavascriptAPI查看用。例如我想查看console都有哪些方法和属性,我可以直接在console中输入"console"并执行  

console.assert()  

判断第一个参数是否为真,false的话抛出异常并且在控制台输出相应信息。  

console.clear()  

清空控制台。  

console.count()  

以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数。  

console.countReset()  

与console.count()配合,清除调用次数。  

console.error()  

打印一条错误信息,使用方法可以参考stringsubstitution。  

console.group()  

打印树状结构,配合groupCollapsed以及groupEnd方法;  

console.groupCollapsed()  

创建一个新的内联group。使用方法和group相同,不同的是groupCollapsed打印出来的内容默认是折叠的。  

console.groupEnd()  

与console.group()配合使用,结束当前Tree  

console.info()  

打印以感叹号字符开始的信息,使用方法和log相同  

console.log()  

打印字符串,可以使用printf风格的占位符。支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。  

例如:console.log("%d年%d月%d日",2011,3,26);  

console.profile()  

可以以第一个参数为标识,开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较类似,具体可参考chromeprofiles  

console.profileEnd()  

配合profile方法,作为数据收集的结束。(暂时未发现结果)  

console.table()  

将数据打印成表格。console.table[en-US]  

console.time()  

计时器,接受一个参数作为标识。  

console.timeEnd()  

与console.time()配合使用,接受一个参数作为标识,结束特定的计时器。  

console.trace()  

打印stacktrace.  

console.warn()  

打印一个警告信息,使用方法可以参考stringsubstitution。


Tag:开发者工具
相关文章