录了个视频放到b站，https://www.bilibili.com/video...视频更清晰详细1、DOM面板1、鼠标点击选中一个DOM元素，双击编辑2、拖拽、复制、剪切、粘贴（ctrlc、ctrlv、ctrlx快捷键）3、搜索ctrlF（可以搜索strings、cssselectors、xpath、）比较复杂的css选择器也可以，比如：相邻兄弟选择器.my-button+.my-button，属性选择器[class^="nav"]这个功能很好用，调试代码有时候很有用4、鼠标右键-clickaddattribute：添加属性forcestatus：设置元素状态，可用于调试不同状态下的样式（:hover,:active,:focus,:visited,:focus-within,:focus-visible）还有样式面板的地方设置元素状态breakon：当元素改变时，打断点subtreemodifacations：子节点改变attributemodifications：属性改变noderemoval:nodeisdeletedexpandrecursively:expandcollapsechildren:collapsecapturenodescreenshot:screenshot(注意滚动条)比如你抓取b站的首页https://www.bilibili.com/，选择html标签或正文标签，您只能捕获一个屏幕。您可以在右侧看到计算面板的高度。html标签的高度只有864px。#app高度为14048px，然后截图#app，即可截取完整页面。2.样式面板过滤：filter:hov:设置元素状态样式表：双击编辑，数值按上下方向键加1/减1，关键字可以看到所有值可设置，按上下键切换。3.将计算面板上次实际应用值的相对值转换成绝对值（如em、rem、百分比、vh、vw等，用px代替）filter:filtershowall:显示全部(很多属性不是样式表设置的，有默认值)group:根据布局、文本、外观等的组合4、如果勾选了EventListeners元素（及其祖先元素）的事件监听器,会显示Ancestors,如果不勾选,onlyDisplayyourown5,DOMBreakpointers右键breakon,断点会显示在这里
