【TypeScript】TypeScript动态调试方法总结

Posted by 西维蜀黍 on 2017-03-02, Last Modified on 2024-05-07

Approach 1 - 利用Node引擎动态调试TypeScript代码

以Visual Studio Code为例,构建一个TypeScript项目,新建一个tsconfig.json配置文件,新建一个app.ts TypeScript文件。其实在tsconfig.json中需将sourceMap属性设置为true(以指定tsc生成.ts对应的.map文件)。

tsconfig.json文件配置参考:

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "module": "amd",
        "removeComments": false,
        "sourceMap": true
    }
}

对ts代码进行编译(Ctrl+Shift+B)。

在根目录下的.vscode文件夹中配置launch.json和tasks.json文件 launch.json文件配置如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/app.ts",
            "sourceMaps": true,
            "outDir": null
        }
    ]
}

tasks.json文件配置如下:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

配置完成后,F5启动调试,即可使用node对TypeScript代码进行动态调试。

Approach 2 - 在浏览器中动态调试TypeScript代码

以Chrome调试环境为例,在Developer Tools中,打开SourceMap开关以自动识别关联.js和.ts文件,.map文件可由tsc(TypeScript编译器)生成,用于将生成的.js文件与源.ts文件进行关联。

此时在我们需要调试的.ts文件中打上断点,即可命中(如在其对应的.js中打断点,Chrome会自动将.js中断点位置自动匹配到对应的.ts中代码位置)。 index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML1 App</h1>
    <div id="content"></div>
</body>
</html>

app.ts如下:

window.onload = () => {
    var el = document.getElementById('content');
    console.log('window.onload~');
    HelloWorld.Hello();
};

class HelloWorld {
    static Hello(): void {
        console.log('Hello~');
    }
}

此方法可用于调试已部署于Server的TypeScript代码,若在开发环境下需要在调试过程中对TypeScript代码进行修改,推荐使用以下调试方式。

Approach 3 - 在Visual Studio 2015开发环境中进行TypeScript代码调试

在Visual Studio 2015中新建一个TypeScript项目。

为简化文件结构及内容,修改index.html、app.ts文件。 index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML1 App</h1>
    <div id="content"></div>
</body>
</html>

app.ts:

window.onload = () => {
    var el = document.getElementById('content');
    alert('asd');
};

分为3种可调试环境:

1. 在Visual Studio 2015中直接命中断点

将启动浏览器设置为Internet Explorer,F5启动调试。

2. 在Microsoft Edge中进行动态调试

将启动浏览器设置Microsoft Edge,F5启动调试。F12 打开开发人员工具。

3. 在Google Chrome中调试

将启动浏览器设置为Google Chrome,F5启动调试。此方法与上述利用Sourcemap开关动态调试TypeScript代码调试方法类似。

备注:需在项目中对属性进行配置,勾选“生成源映射”

Reference

  1. [Visual Studio Code Debugging] https://code.visualstudio.com/docs/editor/debugging#_debugger-extensions
  2. [how to debug typescript files in visual studio code] http://stackoverflow.com/questions/31169259/how-to-debug-typescript-files-in-visual-studio-code
  3. [USING SOURCE MAPS WITH TYPESCRIPT] http://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps.html
  4. [TYPESCRIPT DEBUGGING IN VISUAL STUDIO WITH IE, CHROME AND FIREFOX USING SOURCE MAPS] http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx
  5. [GitHub-vscode-chrome-debug–Issues] https://github.com/Microsoft/vscode-chrome-debug/issues