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

Question

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

Ogg*_*las 4 html google-chrome typescript reactjs webpack

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

在下面的屏幕截图中，我想要一个文件夹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>

Run Code Online (Sandbox Code Playgroud)

index.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")
);

Run Code Online (Sandbox Code Playgroud)

test.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>;
    }
}

Run Code Online (Sandbox Code Playgroud)

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,
    },
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Seb*_*ald 5

由于您已经使用webpack（devtool: "source-map"）生成了源地图，因此这应该已经可以工作了；）

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

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

例如：

我必须警告你。有时源贴图无法正常工作，并且断点最终会出现在其他地方：-x

归档时间：	8 年，6 月前
查看次数：	3406 次
最近记录：	8 年，6 月前