网站首页几天做完,免费咨询英文,如何设置企业网站,中介系统房产软件【1】DevTools触发伪类右键单击Elements面板中的元素节点并选择“ force state ”。或者在Sytle子窗格中单击“#xff1a;hov ”图标。可以触发元素上的伪类来研究元素在悬停时的效果和样式【2】DevTools-在任何网页上运行预定义的代码片段DevTools中有一个叫做代码段的特性…【1】DevTools触发伪类右键单击Elements面板中的元素节点并选择“ force state ”。或者在Sytle子窗格中单击“hov ”图标。可以触发元素上的伪类来研究元素在悬停时的效果和样式【2】DevTools-在任何网页上运行预定义的代码片段DevTools中有一个叫做代码段的特性它允许您可以在网页上运行的测试代码(这比在控制台面板中重新键入JavaScript代码要方便一些)单击Sources左侧小窗口选择snippets单击New snippet 新建输入文件名和需要测试的代码片段右击文件并选择Run(或Ctrl/CmdEnter)单击Console查看代码运行结果【3】使用CSS选择器搜索DevTools-DOM树当使用Elements面板浏览DOM时尝试通过CSS选择器搜索节点。【4】DevTools-转到特定列的行号打开Sources面板中的文件, 按快捷键ctrl o输入520 Enter请注意您被带到了第5行第20栏【5】DevTools- Ctrl单击可以在Sources面板中添加多个游标【6】快速编辑HTML元素标记您可以双击Elements面板中节点的开始标记来编辑它结束标记将随着您的更改而自动更新。【7】ALT单击可以展开所有子节点在Elements面板中,使用Alt单击可以展开该Dom节点下的所有Dom子节点【8】在任何节点上显示该节点绑定的事件【9】扩展CSS缩写属性在Style窗格中可以展开css缩写属性如background或padding并查看为您定义的全部属性【10】将元素滚动到视图中右击Elements面板中的DOM节点。选择 Scroll into view【11】ctrld 选择下一个相同的单词在Sources面板编辑器中可以使用ctrl d 选择多个相同的单词做操作【12】添加一个新的自定义维度设备作为预置【13】DOM的改进面包屑线索Elements元素面板中有一个面包屑痕迹它可以帮助您在浏览DOM时跟踪您的步骤。【14】netWork网络请求过滤器larger-than:100将 查找大于100个字节的资源并进行筛选。您可以通过在查询前面加上“-”来否定查询。例如-larger-than:50K找到以下资源不大于50K。status-code: 200若要查找具有状态代码响应的资源请执行以下操作200mime-type 查找请求资源类型【15】在DevTools控制台面板中编辑HTML【16】从DevTools生成的调色板中选择一个新的颜色【17】DOM属性中的增量和递减数可以使用键盘上/下箭头修改DOM属性或样式的数量值【18】使用样式规则工具栏增加常见样式【19】通过控制台更好地记录对象和数组【20】通过控制台了解JS代码的速度console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。console.time方法是开始计算时间console.timeEnd是停止计时输出脚本执行的时间。这两个方法中都可以传入一个参数作为计时器的名称它的作用是在代码并行运行时分清楚各个计时器。测试代码写在这两个方法之间。【21】使用切换元素类功能进行即时视觉反馈在样式窗格中单击.cls标签可显示隐藏Dom元素的类名【22】DevTools黑色主题【23】在没有浏览器扩展的情况下捕获全尺寸屏幕截图在控制台中按快捷键Ctrl Shift p进入命令菜单再输入screenshot【24】用DevTools实现JavaScript代码库的现代化新的“copy for fatch”功能扩展了NetworkPanel上下文菜单,右击网络请求然后以curl形式复制。用FETCH API替换代码库中现有的Ajax调用。如果要验证剪贴板中的FETCH API调用可以将其粘贴到控制台面板中并在其前缀加上await【25】查看WebSocket消息【26】console.dir显示一个对象所有的属性和方法如果说你想要查看Dom节点所关联到的真实的Javasript对象并且想要查看他的属性就可以使用console.dir【27】通过h来隐藏可以按下h来隐藏在元素面板中被你选中的元素。再次按下h使它出现。某些时候这是很有用的例如你想截图但是又不想里面包含一些敏感信息。【28】隐藏netWork请求的时间轴如果你仅仅只是查看请求列表- 来确认状态大小和响应那么你可以选择隐藏请求的时间轴因为它占了你将近一半的空间【29】Console的代码换行在Console面板中调试多行代码时使用Shift Enter组合键进行换行Enter键将直接执行代码【30】DOM 断点调试基本上大家都会用JavaScript的断点调试但是应该很多人不知道Dom节点也可以进行断点调试DevTools提供了三种针对Dom元素的断点调试子元素改变时、属性改变时 和元素被移除时。在Elements 标签页选中一个元素右击选择 Breakon-subtree modifications(子元素改变时断点)、attribute modifications (属性改变时断点)、node removal(元素被移除时断点)【31】缓存上一步操作的结果$_在DevTools上运行JavaScript表达式的时候可以使用$_来获取到上一步操作的返回值。【32】console中的 $0-$4在Elements面板中$0是当前我们选中的html节点的引用。理所当然$1 就是我们上一次选择的节点的引用$2 是在那之前选择的节点的引用一直到 $4【33】选择dom节点$和?如果你没有在App中定义过 $ 变量 (例如JQ)的话它在console中就是对这一大串函数document.querySelector的别名。如果是 ? 就更加厉害了还能节省更多的时间因为它不仅执行document.querySelectorAll并且它返回的是一个节点的数组
