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

当涉及到在浏览器控制台中进行调试时,我发现在日常工作流程中,获取当前的DOM节点,React和Vue.js组件或当前的Angular作用域非常有用。 在本文中,您将学习如何$0在浏览器的控制台中使用当前的DOM节点,以及在元素树中显示的CSS伪元素上运行它时的期望。 WP网站建设 摘要 $0返回当前的DOM节 WP网站建设

当涉及到在浏览器控制台中进行调试时,我发现在日常工作流程中,获取当前的DOM节点,React和Vue.js组件或当前的Angular作用域非常有用。

在本文中,您将学习如何$0在浏览器的控制台中使用当前的DOM节点,以及在元素树中显示的CSS伪元素上运行它时的期望。

WordPress网站建设

WordPress网站建设

摘要

  • $0返回当前的DOM节点。$0DOM中CSS伪元素上的相同结果在不同浏览器中返回不一致的结果。
  • $r 返回当前的React组件。
  • $vm0 返回当前的Vue.js组件。
  • angular.element($0).scope() 返回绑定到当前DOM节点的Angular范围。

例如,在页面上选择DOM元素时,例如,如果您使用的是Chrome,则可能会注意到== $0元素树中当前突出显示的元素旁边的。这意味着$0在控制台中键入将使您可以访问返回的对象的属性和方法。

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

在Chrome浏览器中,您可以看到== $0已选DOM元素旁边的附加内容,当您将其悬停时会显示标题。

尽管$0未在DOM元素选项卡中显示(如在Chrome DevTools $0中一样),但据我测试,在控制台中的键入也可以在其他流行的浏览器中正常工作。

WordPress网站建设

WordPress网站建设

$0在Firefox浏览器的控制台中键入,将显示当前对象的方法和属性。

DOM中的CSS伪元素

即使CSS ::before::after伪元素显示在浏览器的元素树中,它们也不是真正的DOM元素。这些元素之所以称为元素,是因为它们的内容是由CSS而不是HTML或JavaScript生成的。

伪元素以前没有出现在元素树中,但是现在它们出现了,我想它们不会很快离开任何地方。话虽如此,如果您滥用浏览器的“元素”或“检查器”选项卡中的DOM元素选择,则在输入$0伪元素选择时控制台返回的内容会有一些不一致之处:

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

尝试$0在控制台中获取当前DOM节点时,伪元素上的Chrome和Firefox在伪元素之间的DevTools比较。

Restricted {}尝试获取当前的DOM节点(一个伪元素)时,您可能会注意到Firefox控制台中显示的返回对象。乍一看,这不是很容易解释。

不过,这似乎是Firefox的回报Object {}Inaccessible {}或者Restricted {}对象显然是由于脚本安全原因而其他浏览器如Chrome例如甚至让你对当前伪元素的节点称为与添加类$0$0.classList.add("what")

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

在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 。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/10692

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code