如何使用 chrome dev tools api 获取原始文件答案

【问题标题】：How to get the original files using chrome dev tools api如何使用 chrome dev tools api 获取原始文件
【发布时间】：2020-11-16 03:36:01
【问题描述】：

我正在使用

chrome.devtools.inspectedWindow.getResources(allFiles => {})

它可以工作，但我得到的是 webpack 编译的代码，而不是原始的 React 文件。在 chrome 源面板中，它使用源映射显示原始文件。可以从 chrome devtools 访问原始文件吗？请帮忙指点一下。

【问题讨论】：

【解决方案1】：

你能试试react-dev-tools 分机吗

选择 react 组件并单击右上角的 <> 将带您进入其 React 组件源代码。更多信息https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html

【讨论】：

我正在构建一个类似于 ti react-dev-tools 的工具，你知道他们是如何以编程方式做到的吗？
看看这里的源代码github.com/facebook/react/blob/master/packages/…
@AbdulazizAlaboudi 我很好奇。您正在构建什么工具？
嗨@bvaughn，我正在构建一个新的调试器，它结合了对开发人员反应代码的静态分析，以帮助他们超越现有调试工具提供的功能。您知道，大多数现有工具都专注于帮助开发人员导航和检查程序状态，我认为这很重要，但开发人员在调试时可能需要其他帮助。我正在尝试做的部分工作是获取原始反应源文件并分析它们。但是，我还没有找到可靠的方法来做到这一点。你有什么建议吗？
也许你可以在 React repo 上打开一个 GitHub 问题来告诉我更多关于你的想法。 Stack Overflow 并不是最容易进行此类讨论的地方。我很想知道您的想法。