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

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

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

网站建设

摘要

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

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

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

网站建设

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

即使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 devtools安装到浏览器中，则选择Vue组件，然后可以使用在浏览器的控制台中与其进行交互$vm0。

与Angular中的React和Vue.js组件类似，作用域是一个包含应用程序数据和方法的对象。使用浏览器中的AngularJS Batarang扩展，您可以angular.element($0).scope()用来获取绑定到当前DOM节点的Angular范围$0。

新发布的Edge浏览器支持从其他商店（例如Chrome Web Store）安装的扩展程序，这意味着，除了众所周知的Chrome和Firefox支持之外，现在您还可以为流行的JavaScript框架获得Microsoft Edge浏览器支持。
请注意，选择React和Vue.js组件或Angular当前作用域通常适用于以开发模式构建的应用程序。在大多数情况下，将生产模式设置为时true，这就是预期的行为。
该DevTools命名约定的一致使用的大多数流行的浏览器，当谈到自己的集成开发工具。哦，还有使用Web Inspector的Safari 。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261900.html