差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 后一修订版 | 前一修订版 | ||
| typescript:第二十一章_调试 [2026/06/12 14:20] – 创建 张叶安 | typescript:第二十一章_调试 [2026/06/12 14:24] (当前版本) – 张叶安 | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| https:// | https:// | ||
| - | Visual Studio Code supports TypeScript debugging through its built-in Node.js debugger and Edge and Chrome debugger. | ||
| - | JavaScript source map support | ||
| - | TypeScript debugging supports JavaScript source maps. To generate source maps for your TypeScript files, compile with the option or set the property in the file to .--sourcemapsourceMaptsconfig.jsontrue | ||
| - | |||
| - | In-lined source maps (a source map where the content is stored as a data URL instead of a separate file) are also supported, although in-lined source is not yet supported. | ||
| - | |||
| - | For a simple example of source maps in action, see the TypeScript tutorial, which shows debugging a simple "Hello World" Node.js application using the following and VS Code default Node.js debugging configuration.tsconfig.json | ||
| - | |||
| - | JSON | ||
| - | |||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | } | ||
| - | For more advanced debugging scenarios, you can create your own debug configuration file. To see the default configuration, | ||
| - | |||
| - | This will create a file in a folder with default values detected in your project.launch.json.vscode | ||
| - | |||
| - | JSON | ||
| - | |||
| - | { | ||
| - | // Use IntelliSense to learn about possible attributes. | ||
| - | // Hover to view descriptions of existing attributes. | ||
| - | // For more information, | ||
| - | " | ||
| - | " | ||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | ] | ||
| - | } | ||
| - | VS Code has determined the program to launch, , included the build as a , and told the debugger where to find the generated JavaScript files.helloworld.tspreLaunchTask | ||
| - | |||
| - | There is full IntelliSense with suggestions and information for to help you learn about other debug configuration options. You can also add new debug configurations to with the Add Configuration button in the lower right.launch.jsonlaunch.json | ||
| - | |||
| - | launch.json IntelliSense | ||
| - | |||
| - | Also see Node.js Debugging for examples and further explanations. | ||
| - | |||
| - | Mapping the output location | ||
| - | If generated (transpiled) JavaScript files do not live next to their source, you can help the VS Code debugger locate them by setting the attribute in the launch configuration. Whenever you set a breakpoint in the original source, VS Code tries to find the generated source by searching the files specified by glob patterns in .outFilesoutFiles | ||
| - | |||
| - | Client-side debugging | ||
| - | TypeScript is great for writing client-side code as well as Node.js applications and you can debug client-side source code with the built-in Edge and Chrome debugger. | ||
| - | |||
| - | We'll create a tiny web application to show client-side debugging in action. | ||
| - | |||
| - | Create a new folder and add three files: , , and with the following content: | ||
| - | |||
| - | helloweb.ts | ||
| - | |||
| - | TypeScript | ||
| - | |||
| - | let message: string = 'Hello Web'; | ||
| - | document.body.innerHTML = message; | ||
| - | helloweb.html | ||
| - | |||
| - | HTML | ||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <script src=" | ||
| - | </ | ||
| - | </ | ||
| - | tsconfig.json | ||
| - | |||
| - | JSON | ||
| - | |||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | } | ||
| - | Run to build the app and then test by opening in your browser (you can right-click in the File Explorer and select Copy Path to paste into your browser).tschelloweb.htmlhelloweb.html | ||
| - | |||
| - | In the Run and Debug view (Ctrl+Shift+D), | ||
| - | |||
| - | Update the to specify the local file URL to : | ||
| - | |||
| - | JSON | ||
| - | |||
| - | { | ||
| - | " | ||
| - | " | ||
| - | { | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | " | ||
| - | } | ||
| - | ] | ||
| - | } | ||
| - | The Run and Debug view configuration dropdown will now show the new configuration Launch Edge against localhost. If you run that configuration, | ||
| - | |||
| - | client-side debug breakpoint | ||
| - | |||
| - | Common questions | ||
| - | Cannot launch program because corresponding JavaScript cannot be found | ||
| - | You've likely not set in your or in your and the VS Code Node.js debugger can't map your TypeScript source code to the running JavaScript. Turn on source maps and rebuild your project." | ||
张叶安