用于 Javascript 导入的对象或函数的 Intellij 调试器控制台

问题描述

我有一个正在 Intellij 中调试的 Jest 文件。

import { screen,waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';


    describe('<SamplePage />',() => {
      afterEach(() => {
        jest.clearallMocks();
      });
    
      it('Correct text in SampleForm',() => {
        renderPage();
        expect(screen.getByRole('heading')).toHaveTextContent(
          "Text to check",);
      });
    });

然后我通常在 expect() 行放置一个断点，以便那时视图已经呈现。到达断点后，我打开调试器控制台，然后通过测试各种语句开始使用测试 API。但是，当我尝试调用 screen.debug() 时，我立即在调试器控制台中收到一个错误：

虽然自动完成在屏幕调试器中工作：

例如，我一直使用的解决方法是将导入的对象屏幕分配给变量 x。然后，当我到达断点时，我可以将 x 变量用作屏幕并调用各种方法，例如 debug 或 getByRole。

然而，这很麻烦，因为我可能想要探索多个导入的对象，并且将它们中的每一个分配给一个临时变量是不可扩展的。有人知道如何在 Intellij 中解决这个问题吗？

解决方法

在调试期间评估代码时未定义的变量（在您的情况下为 screen）是由奇怪的导入对象转换方式+源映射中缺少名称映射引起的：如果在转换/混淆时变量被重命名，并且没有适当的提供了名称映射，调试器将无法将源代码中的变量与 VM 中的变量进行匹配。

在评估由 babel 转译/由 webpack 构建的模块中的 ES6 导入时，存在一些已知问题。详情请参阅https://github.com/webpack/webpack/issues/3957、https://github.com/babel/babel/issues/1468。遗憾的是，IDE 端无法解决此问题。

intellij-idea javascript javascript-debugger jestjs