浏览器控制台中的当前DOM节点

当涉及到在浏览器控制台中进行调试时,我发现在日常工作流程中,获取当前的DOM节点,React和Vue.js组件或当前的Angular作用域非常有用。 在本文中,您将学习如何$0在浏览器的控制台中使用当前的DOM节点,以及在元素树中显示的CSS伪元素上运行它时的期望。 厦门网站建设 摘要 $0返回当前的DOM节点。$0DOM中CSS伪元素上的相同结果在不同浏览器中返回不一致的结果。 $r 返回当前的React组件。 $vm0 返回当前的Vue.js组件。 angular.element($0).scope() 返回绑定到当前DOM节点的Angular范围。 例如,在页面上选择DOM元素时,例如,如果您使用的是Chrome,则可能会注意到== $0元素树中当前突出显示的元素旁边的。这意味着$0在控制台中键入将使您可以访问返回的对象的属性和方法。 在Chrome浏览器中,您可以看到== $0已选DOM元素旁边的附加内容,当您将其悬停时会显示标题。 尽管$0未在DOM元素选项卡中显示(如在Chrome DevTools $0中一样),但据我测试,在控制台中的键入也可以在其他流行的浏览器中正常工作。 厦门网站建设 $0在Firefox浏览器的控制台中键入,将显示当前对象的方法和属性。 DOM中的CSS伪元素 即使CSS ::before和::after伪元素显示在浏览器的元素树中,它们也不是真正的DOM元素。这些元素之所以称为伪元素,是因为它们的内容是由CSS而不是HTML或JavaScript生成的。 伪元素以前没有出现在元素树中,但是现在它们出现了,我想它们不会很快离开任何地方。话虽如此,如果您滥用浏览器的“元素”或“检查器”选项卡中的DOM元素选择,则在输入$0伪元素选择时控制台返回的内容会有一些不一致之处: 尝试$0在控制台中获取当前DOM节点时,伪元素上的Chrome和Firefox在伪元素之间的DevTools比较。 Restricted {}尝试获取当前的DOM节点(一个伪元素)时,您可能会注意到Firefox控制台中显示的返回对象。乍一看,这不是很容易解释。 不过,这似乎是Firefox的回报Object {},Inaccessible {}或者Restricted {}对象显然是由于
脚本安全原因而其他浏览器如Chrome例如甚至让你对当前伪元素的节点称为与添加类$0:$0.classList.add(“what”)。 在Chrome DevTools中,您可以使用classList属性和add()方法在当前选定的CSS伪元素上添加一个类。 反应的 当在
React DevTools中选择一个组件并$r在浏览器的控制台中编写时,您将获得对所选组件实例的引用。 Vue.js’ $vm0 与上述类似,如果
已将Vue.js devtools安装到浏览器中,则选择Vue组件,然后可以使用在浏览器的控制台中与其进行交互$vm0。 Angular的 angular.element($0).scope() 与Angular中的React和Vue.js组件类似,作用域是一个包含应用程序数据和方法的对象。使用浏览器中的
AngularJS Batarang扩展,您可以angular.element($0).scope()用来获取绑定到当前DOM节点的Angular范围$0。 Edge,扩展和DevTools命名约定 新发布的Edge浏览器支持从其他商店(例如Chrome Web Store)安装的扩展程序,这意味着,除了众所周知的Chrome和Firefox支持之外,现在您还可以为流行的JavaScript框架获得Microsoft Edge浏览器支持。 请注意,选择React和Vue.js组件或Angular当前作用域通常适用于以开发模式构建的应用程序。在大多数情况下,将生产模式设置为时true,这就是预期的行为。 该DevTools命名约定的一致使用的大多数流行的浏览器,当谈到自己的集成开发工具。哦,还有使用Web Inspector的Safari 。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 浏览器控制台中的当前DOM节点
分享到:
赞(0)
广告位820*80