Javascript 如何显示DOM元素

当我在测试中使用以下代码时：

const textAreaBefore = document.querySelector('#text-area');

我需要检查控制台中的HTML元素：

console.log('TAB: ', textAreaBefore);
// or console.log(document.getElementById('text-area'));

我仅将HTML对象作为输出：

console.log tests/client/blog.spec.js:77
    HTMLTextAreaElement {}

如何将其作为完整的HTML字符串输出

<textarea>.....  </textarea>

。。。。。

或

const textAreaBefore=document.querySelector（“#text area”）.outerHTML



据我所知，您只想检查HTML以进行调试，对吗

document.querySelector
是浏览器源代码中经过良好测试的函数，因此它在任何时候都不会导致任何问题。因此，如果您想检查是否检索到了正确的元素，只需使用浏览器的开发工具inspector:在inspector中搜索
#文本区域
，选择它，然后它将在控制台中以
$0
的形式提供。然后可以使用此变量执行检查

编辑好吧，我把你的问题搞错了。我尝试在我的Chrome开发者工具中使用
document.getElementById（'something'）
，输出是元素的HTML。但是，我认为这种行为不是通用的，因此为了确保在控制台中编写HTML，您可以执行以下操作：

var el = document.getElementById('text-area');
el && el.outerHTML;

注意在尝试访问
outerHTML
属性之前，我正在使用逻辑AND运算符以确保它存在。这是为了让您不要出错。
可能重复感谢@Victor确保我可以使用Chrome浏览器工具。。。但是我想知道，在我的单元测试期间，是否有任何方法可以在console.log中显示它，而不用启动dev服务器…？谢谢@Roy，你让我走上了正轨。innerHTML和.outerHTML（在我的例子中）是我一直在寻找的。。。
var el = document.getElementById('text-area');
el && el.outerHTML;