html - 使用 Chrome 调试 React TypeScript .tsx 文件

html - 使用 Chrome 调试 React TypeScript .tsx 文件 - Webpack

转载作者：搜寻专家更新时间：2023-10-30 20:56:11

24

4

我正在使用 webpack 来捆绑我的 js 文件，所以通常我只能在 Chrome 的源代码下看到一个大的捆绑文件。但是，如果我将 debugger; 添加到我的 .tsx 文件中，我可以很好地看到单个文件。我的问题是我是否可以让 webpack 在 Chrome 源中输出我的所有文件，以便我可以在那里浏览它们，如果我不想让调试器停止，只需单击一行？

在下面的屏幕截图中，我想要一个用于Scripts/src 的文件夹，然后是我所有的文件。

示例代码:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <title>App</title>
</head>
<body>
<div id="app"></div>
<script src="/Scripts/dist/bundle.js"></script>
</body>
</html>

索引.tsx:

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import * as ReactBootstrap from "react-bootstrap";
import { Test } from "./components/test";

ReactDOM.render(
    <div>
        <Test text="Well!" />
        <Container />
    </div>,
    document.getElementById("app")
);

测试.tsx:

import * as React from "react";

export interface ITestProps {
    text: string
}

export class Test extends React.Component<ITestProps, {}> {
    render() {
        debugger;
        return <div className="well">{this.props.text}</div>;
    }
}

webpack.config.json:

var webpack = require('webpack');
var path = require("path");
var proxy = 'localhost:61299';

module.exports = {
    entry: [
        // activate HMR for React
        'react-hot-loader/patch',

        // the entry point of our app
        './Scripts/src/index.tsx',
    ],
    output: {
        filename: "./Scripts/dist/bundle.js",
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            { test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] }
        ]
    },

    plugins: [
        // enable HMR globally
        new webpack.HotModuleReplacementPlugin(),         

        // prints more readable module names in the browser console on HMR updates
        new webpack.NamedModulesPlugin(),
    ],

    devServer: {
        proxy: {
            '*': {
                target: 'http://' + proxy,
            }
        },
        port: 8080,
        host: '0.0.0.0',
        hot: true,
    },
}

最佳答案

因为您已经使用 webpack (devtool: "source-map") 生成了源映射，所以这应该已经可以工作了；)

不要在“localhost”中查看源代码，而是在 chrome 调试器中使用 webpack:// 项。这是屏幕截图中的最后一项。

如果源映射的生成工作正常，您应该在那里有源文件夹结构。它可能包含在名为 ..

的文件夹中

例如:

但我必须警告你。有时 source maps 不能正常工作，你的断点会在别处结束 :-x

关于html - 使用 Chrome 调试 React TypeScript .tsx 文件 - Webpack，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43627243/

24

4

0

文章推荐： typescript - 如何评论 .tsx 文件中的属性？

文章推荐： java - 这个正则表达式是什么意思？

文章推荐： java - 用 Java 将整数数组写入文件的最快方法？

文章推荐： java - 如何将图像插入到 JTable 单元格中

java - 调试 "Step into"类调用导致 "Class not found"异常 - Eclipse 调试
昨晚我因为这个问题脑子崩溃了。在确保没有来 self 的 eclipse 错误检查的明显错误之后，我开始调试我的程序。顺便说一下，我正在使用 Jre7。无论如何，每次我进入我的类调用(我们称之为“a”
gcc - 是否可以使用 lldb 调试 gcc 编译的程序，或使用 gdb 调试 clang 编译的程序？
(前言:我对 C/C++ 还很陌生，我真的不知道 native 代码中的调试实际上是如何工作的。) 一些消息来源说 gdb 和 lldb 可以调试 any program compiled to ma
debugging - 调试 T4Scaffolding.Core Nuget 包时的 Set-DefaultScaffolder : Cannot get an instance of EnvDTE. DTE - 高级 Powershell 调试
我正在尝试从 Visual Studio 2012 外部调试 T4Scaffolding.Core Nuget 包。我使用的是安装了 Powershell 3.0 的 Powershell ISE，并
调试 assembly
如何调试汇编代码？我在 Linux 上使用 gdb。我知道我可以看寄存器。有哪些调试汇编代码的方法？最佳答案您当然可以使用 breakpoints就像 C 或任何其他编译语言一样。 This ar
Haskell 调试
如何在每次通话时打印列表或 haskell 中的内容，例如: funct a list = funct (a + 1) (a : list) print list her
调试 Makefile
让我用我对 Makefiles 或 make 知之甚少的评论作为这个问题的前缀。有一个非常大的项目，每晚自动构建。它以 Debug 和 Release 模式构建，Debug 用于 Valgrind
计算周薪和加类费的C程序不起作用？调试
我正在创建一个计算每周工资的程序，那么任何加类工资都是该周正常工资的 1.5 倍。我的代码如下: #include int main() { double payrate; double h
JavaScript 调试
我使用的是 Visual Studio 2010 Express Developer 版本。开发网站。我在我的 .aspx 页面中使用 JavaScript。如何在 Javascript 中放置断点
Javascript 调试
我最近开始修补 Project Euler 问题，并尝试用 Javascript 解决它们。这样做我往往会产生许多无限循环，现在我想知道是否有比终止 Firefox 或 Chrome 中的选项卡更好的
Python实时编码/调试
有没有办法在程序执行期间生成一个交互式 python 控制台(最好是 iPython)而不暂停主程序并且能够检查和修改程序变量？类似于浏览器为 JavaScript 提供的功能。我知道 pdb.se
android - 调试 FFmpeg
我正在使用 FFmpeg @ Android 并希望能够进入 FFmpeg 代码(Eclipse + Seqouya)，同时编译 FFmpeg 我使用 --disable-stripping --en
.net - 调试.net进程时如何找到LastError的值？
我从使用互操作调用 win32 api 函数的 .net 进程中得到一个异常。我有一个调试器，我想查看 LastError 的值。是否可以从 Visual Studio 调试器中查看 LastEr
vba - Navigate2 调试
我正在尝试通过 VBA 创建一个宏，以在 IE 的多个选项卡中打开一组指定的链接。目前我正在使用下面的代码，如果我试图打开 3 个或更少的选项卡，它大部分时间都可以工作。任何超过 3 的代码都会在“N
debugging - MonoDevelop 调试？
好的，这似乎是一个愚蠢的问题，因为 MonoDevelop 越来越成熟，所以我确定我只是想念它，但我环顾四周，所有关于这个主题的问题似乎都是关于远程调试或 Mac 上的调试。我使用的是 Ubuntu
调试 littler/Rscripts
如何调试 Rscripts是从命令行运行的？我目前正在使用 getopt传递命令行选项的包，当有错误时，我很难: 看看到底出了什么问题；在 R 中交互式调试(因为脚本需要命令行选项。) 有没有人有
Adobe ExtendScript 调试
支持 PDF 和网络上的信息很少。我碰巧在博客中看到一篇文章，提到 $.write() 或 $.writeln() 将向 javascript 控制台写入一个字符串。相当有用。有谁知道这个 $ 对象是
PyCharm JavaScript 调试
PyCharm 1.5 中是否可以使用 Firefox 和 Chrome 支持的 JavaScript 调试？如果是这样，它能否与 Python/Django 调试器一起有效运行？如果没有，有没有
debugging - 调试 Release模式应用程序的最佳方法
我确定这以前发生在人们身上，某些东西在 Debug模式下工作，你在发布时编译，但有些东西坏了。这发生在我在嵌入式 XP 环境中工作时，我发现最好的方法确实是编写一个日志文件来确定它会出错的地方。您
php - Flow3 调试
我目前正在为即将到来的项目评估 Flow3。 AOP 模式和依赖注入(inject)将非常适合我们的目的。现在我想不通的是如何在 Controller Action 中调试一些结果。 public
Django Gunicorn 调试
最初，我有一个包含测试服务器的 Django 应用程序。要调试此设置，我只需添加 import pdb; pdb.set_trace()代码中的任何位置，并且有一个断点将我扔到终端中的交互式调试器中(

首页

博学

6Ren·AI

商城

html - 使用 Chrome 调试 React TypeScript .tsx 文件 - Webpack