TypeScript動態調試
TypeScript動態調試方法可分為3種：
- 利用Node引擎動態調試TypeScript代碼
- 在瀏覽器中動態調試TypeScript代碼
- 在Visual Studio 2015開發環境中進行動態調試
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代碼進行動態調試。
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~');
}
}
用Chrome調試js的一個小坑
在進入console.log等一些函數時，會進入經過Chrome V8引擎對原js代碼進行預處理生成的js代碼。
此方法可用於調試已部署於Server的TypeScript代碼，若在開發環境下需要在調試過程中對TypeScript代碼進行修改，推薦使用以下調試方式。
3.在Visual Studio 2015開發環境中進行動態調試
在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種可調試環境：
-
在Visual Studio 2015中直接命中斷點--
將啟動瀏覽器設置為Internet Explorer，F5啟動調試。
-
在Microsoft Edge中進行動態調試--
將啟動瀏覽器設置Microsoft Edge，F5啟動調試。F12 打開開發人員工具。
-
在Google Chrome中調試----
將啟動瀏覽器設置為Google Chrome，F5啟動調試。此方法與上述利用Sourcemap開關動態調試TypeScript代碼調試方法類似。
備注：需在項目中對屬性進行配置，勾選“生成源映射”
參考文檔
- [Visual Studio Code Debugging]
https://code.visualstudio.com/docs/editor/debugging#_debugger-extensions - [how to debug typescript files in visual studio code]
http://stackoverflow.com/questions/31169259/how-to-debug-typescript-files-in-visual-studio-code - [USING SOURCE MAPS WITH TYPESCRIPT]
http://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps.html - [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 - [GitHub-vscode-chrome-debug--Issues]
https://github.com/Microsoft/vscode-chrome-debug/issues