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

Question

我有一个正在 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 变量作为屏幕并调用各种方法，如调试或 getByRole。

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

Answer 1

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

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

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

Intellij Debugger Console for Javascript imported objects or functions

javascript

intellij-idea

jestjs

javascript-debugger