原文作者：Shalitha Suranga
原文地址：https://blog.logrocket.com/how-to-debug-typescript-chrome/
翻譯：一川
軟件錯誤是編程錯誤或軟件程序的意外行為。調(diào)試是指檢查和刪除軟件系統(tǒng)中的錯誤的過程。程序員使用各種技術(shù)進行調(diào)試；一些開發(fā)人員將輸出寫入終端，而另一些開發(fā)人員則使用調(diào)試器工具來執(zhí)行和監(jiān)視源代碼。
google Chrome 網(wǎng)絡(luò)瀏覽器提供了一個內(nèi)置的調(diào)試器，其中包含著名的 DevTools 模塊，用于調(diào)試 JAVAScript。Chrome DevTools 實現(xiàn)了對source map的支持，并且可以檢查 Node.js 和 Deno 調(diào)試器實例。因此，無論您是在客戶端應(yīng)用（即基于TypeScript 的 React 應(yīng)用）還是在服務(wù)器端應(yīng)用中使用 TypeScript，您都可以使用 Chrome 進行調(diào)試。
Chrome DevTools 還可以檢查 Android WebViews。幾乎所有基于 JavaScript 的跨平臺移動應(yīng)用開發(fā)框架都實現(xiàn)了 DevTools 協(xié)議或提供內(nèi)置的基于 Web 的調(diào)試器 UI，因此在 Chrome 中也可以調(diào)試基于TypeScript的移動應(yīng)用。
Chrome DevTools 如何執(zhí)行 TypeScriptWeb瀏覽器內(nèi)置了對JavaScript和WebAssembly的支持，但不支持TypeScript。那么，如果 Chrome 中沒有原生執(zhí)行 TypeScript，如何調(diào)試它呢？Chrome 和所有標(biāo)準(zhǔn)網(wǎng)絡(luò)瀏覽器都支持處理 JavaScript source maps。
JavaScript source maps通常將特定 JavaScript 源代碼的特定形式映射到瀏覽器執(zhí)行的 JavaScript 源代碼。例如，很難在瀏覽器中調(diào)試縮小的 JavaScript 文件，但是如果您將源映射與縮小版本一起使用，則在執(zhí)行其縮小版本時可以輕松調(diào)試可讀的 JavaScript 文件。同樣，您可以在 Chrome 中運行 TypeScript 文件的轉(zhuǎn)譯 JavaScript 版本時對其進行調(diào)試。
官方的 TypeScript 編譯器 tsc 可以在轉(zhuǎn)譯過程中生成源映射，所以現(xiàn)在你可以編寫 TypeScript 代碼，連同源映射一起轉(zhuǎn)譯到 JavaScript，并在執(zhí)行轉(zhuǎn)譯的 JavaScript 代碼的同時在瀏覽器中調(diào)試 TypeScript 代碼。這就是Chrome允許開發(fā)人員調(diào)試客戶端TypeScript的方式。此外，Chrome可以通過內(nèi)置的遠程調(diào)試功能調(diào)試在Android WebView/Chrome上運行的客戶端TypeScript代碼。
使用服務(wù)器端運行時，如 Node 和 Deno，您可以通過 v8 運行 JavaScript/TypeScript 并偵聽 Chrome DevTools 調(diào)試器事件。這就是在Chrome中調(diào)試服務(wù)器端TypeScript代碼的方法。支持基于 TypeScript 開發(fā)的移動框架，如React Native和 NativeScript，也可以與 Chrome 桌面應(yīng)用程序互連，因此也可以在 Chrome 上調(diào)試 TypeScript 移動應(yīng)用程序。
調(diào)試任何 TypeScript 文件：手動配置當(dāng)您使用前端框架構(gòu)建應(yīng)用程序時，其 TypeScript 模板通常附帶已包含的 TypeScript 編譯器配置，并且它們會自動為您生成source map。但在某些情況下，您需要配置 TypeScript 編譯器，生成自己的source map，并使用 html script 標(biāo)記手動鏈接轉(zhuǎn)譯的 TypeScript 文件。
這是了解如何在 Chrome 中調(diào)試 TypeScript 的好方法，因為手動配置和設(shè)置可幫助您了解 TypeScript 調(diào)試的內(nèi)部結(jié)構(gòu)。讓我們準(zhǔn)備一個開發(fā)環(huán)境來調(diào)試Chrome中的任何客戶端TypeScript文件。
首先，在你喜歡的任何目錄中創(chuàng)建一個新的 npm 項目，如下所示：
npm init
# --- or ---
yarn init
接下來，安裝 typescript package：
npm install typescript
# --- or ---
yarn install typescript
現(xiàn)在，生成 TypeScript 編譯器配置文件：
npx tsc --init
默認(rèn)配置不會啟用source map生成，因此需要編輯自動生成的配置文件。取消注釋以下 tsconfig.json 行以啟用sourceMap生成：
"sourceMap": true,
添加一個 npm 腳本來生成 JavaScript，方法是修改您的 package.json ：
"scripts": {
"build": "npx tsc"
},
現(xiàn)在，您可以使用 npm run build 或 yarn build 命令轉(zhuǎn)譯 TypeScript 文件。讓我們調(diào)試以下 TypeScript 代碼：
function sayHello(name: string): void {
let message = `Hello ${name}!`;
console.log(message);
if(name == 'TypeScript') {
console.log('.ts');
}
else if(name == 'JavaScript') {
console.log('.js');
}
}
sayHello('TypeScript');
sayHello('JavaScript');
將上述代碼添加到mAIn.ts中。接下來，在 main.js中使用index.html ：
<script src="./main.js"></script>
使用以下命令生成 main.js 和 main.js.map （我們的source map）：
npm run build
# --- or ---
yarn build
在以下位置 http://localhost:3000 提供網(wǎng)頁內(nèi)容：
npx serve
上面的代碼在端口3000中啟動一個靜態(tài)服務(wù)器（Vercel的serve）。在 Chrome 中打開網(wǎng)址，打開開發(fā)者工具，然后點擊來源標(biāo)簽。您將看到 main.ts 如下：
圖片
嘗試添加斷點并重新加載應(yīng)用。您可以像在Chrome中調(diào)試JavaScript一樣調(diào)試TypeScript：
圖片
Chrome 會自動加載source map，因為 TypeScript 編譯器會將source map文件名附加到 main.js ：
//# sourceMAppingURL=main.js.map
該 debugger 關(guān)鍵字也適用于 TypeScript 調(diào)試。在 console.log(message); 語句后添加debugger并重新加載應(yīng)用程序：
圖片
為了試驗，請嘗試刪除source map文件 （main.js.map） 并進行調(diào)試 main.ts 。該文件 main.ts 將從源面板中消失，因為 TypeScript 調(diào)試基于source map工作。
使用這種方法，可以調(diào)試與 webpack、Rollup 或任何其他支持 TypeScript 轉(zhuǎn)譯的JavaScript捆綁器捆綁在一起的 TypeScript 代碼。您可以在 Chrome 中啟用調(diào)試 TypeScript，方法是將自動生成的源映射添加到您的網(wǎng)絡(luò)目錄。
前端框架中的調(diào)試：自動配置前面，我們討論了 TypeScript 調(diào)試如何在 Chrome 中使用手動配置進行。但正如我們提到的，幾乎所有的前端框架/庫都提供預(yù)先實現(xiàn)的 TypeScript 模板，其中通常包括用于生成源映射的編譯器配置。結(jié)果是，當(dāng)您在開發(fā)者模式下運行應(yīng)用時，系統(tǒng)會在 Chrome 中自動啟用 TypeScript 調(diào)試。
現(xiàn)在，我們將使用Create React App的官方TypeScript模板創(chuàng)建一個 React 應(yīng)用程序，以學(xué)習(xí)如何調(diào)試使用現(xiàn)代前端框架構(gòu)建的 TypeScript 應(yīng)用程序。運行以下命令以創(chuàng)建新的 TypeScript-React 應(yīng)用程序：
npx create-react-app my-app --template typescript
#--- or ---
yarn create react-app my-app --template typescript
現(xiàn)在，將以下代碼添加到您的 App.tsx 文件中：
import React, { useState } from 'react';
import './App.css';
function App(): JSX.Element {
const [message, setMessage] = useState('');
function generateMessage(name: string): string {
let message: string = `Hello ${name}!`;
return message;
}
function handleClick(): void {
setMessage(generateMessage('TypeScript'));
}
return (
<div>
<div>{message}</div>
<button onClick={handleClick}>Say hello</button>
</div>
);
}
export default App;
上面的代碼在我們單擊“Say hello”按鈕時呈現(xiàn)問候消息。使用以下命令運行項目以開始調(diào)試 TypeScript：
npm start
# --- or ---
yarn start
現(xiàn)在，假設(shè)您需要為 App.tsx的第 8 行設(shè)置斷點。由于有多個源文件，因此您可以通過按 Ctrl+P 輕松導(dǎo)航到 App.tsx ：
圖片
現(xiàn)在，設(shè)置斷點并單擊按鈕。DevTools 調(diào)試器按預(yù)期工作 TypeScript：
圖片
嘗試使用 Call Stack 部分來監(jiān)視 TypeScript 函數(shù)調(diào)用：
圖片
由于source map，每個調(diào)試器功能都適用于 TypeScript 調(diào)試。React 腳本模塊進行實時TypeScript編譯，因此您可以通過檢查 Chrome 或您的終端來修復(fù) TypeScript 編程錯誤。
讓我們向 generateMessage 函數(shù)發(fā)送一個整數(shù)，僅用于實驗?zāi)康模?/p>
function handleClick(): void {
setMessage(generateMessage(1));
}
現(xiàn)在，您將在Chrome和終端上看到TypeScript編譯錯誤：
圖片
所有流行的前端框架，如Angular，Vue，Svelte等，都提供TypeScript開發(fā)支持并自動生成JavaScript源映射。因此，當(dāng)使用前端框架工具時，調(diào)試TypeScript變得非常容易。
集成 VS Code以進行前端調(diào)試如果您使用 VS Code 編寫代碼，則可以使用編輯器界面作為調(diào)試器界面，而不是 Chrome DevTools。VS Code 通過預(yù)安裝的 JavaScript 調(diào)試器擴展提供對調(diào)試 JavaScript/TypeScript 的內(nèi)置支持。
啟動您的 Web 開發(fā)服務(wù)器（即 webpack 開發(fā)服務(wù)器）并使用以下 launch.json 設(shè)置啟動 Chrome：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"name": "Chrome",
"request": "launch",
"url": "http://localhost:3000"
}
]
}
按 F5 并開始調(diào)試時，可以從編輯器設(shè)置斷點。下面是一個示例，演示如何調(diào)試App.tsx文件：
圖片
您可以使用TypeScript編寫Node.js和Deno后端項目。讓我們討論如何使用Chrome來調(diào)試它們。
調(diào)試基于 TypeScript 的Node.js應(yīng)用程序與客戶端 TypeScript 開發(fā)一樣，在使用 Node.js 運行時執(zhí)行項目之前，我們必須將 TypeScript 轉(zhuǎn)換為 JavaScript。客戶端 JavaScript 執(zhí)行使用 Chrome 內(nèi)置的 v8 引擎，因此我們可以像以前一樣直接使用 DevTools 調(diào)試器，但 Node.js 運行時使用自己的 v8 實例，因此它提供了一個內(nèi)置的調(diào)試器工具，因為它不能直接使用 Chrome 的調(diào)試器JavaScript 執(zhí)行環(huán)境。
使用我們在客戶端調(diào)試中遵循的相同步驟創(chuàng)建新的 npm 項目和一個 TypeScript 配置文件（啟用了source map）。接下來，將以下代碼添加到 main.ts ：
function sayHello(name: string): void {
let message: string = `Hello ${name}!`;
console.log(message);
if(name == 'TypeScript') {
console.log('.ts');
}
else if(name == 'JavaScript') {
console.log('.js');
}
}
sayHello('TypeScript');
sayHello('JavaScript');
將以下腳本添加到文件中 package.json ：
"scripts": {
"build": "npx tsc",
"debug": "node inspect main.js"
},
生成 JavaScript 文件和源映射：
npm run build
# --- or ---
yarn build
現(xiàn)在，使用以下命令啟動 Node.js 調(diào)試器：
npm run debug
# --- or ---
yarn debug
上面的 npm 腳本初始化內(nèi)置的 Node.js 調(diào)試器實用程序，并開始通過 WebSockets 偵聽 Chrome DevTools 協(xié)議消息。您可以通過命令行使用內(nèi)置的 Node.js 調(diào)試器實用程序，也可以通過 Chrome DevTools 使用 GUI 調(diào)試器。
運行上述命令后，調(diào)試器會自動將斷點設(shè)置為第一個可執(zhí)行語句，如下所示：
圖片
內(nèi)置調(diào)試器不支持 TypeScript 調(diào)試，因為它不理解source map— 它只是一個帶有多個命令的最小調(diào)試器。例如，可以使用以下命令在第 5 行設(shè)置斷點，并在新添加的斷點處停止代碼執(zhí)行：
sb(5)
c
您可以在官方文檔中查看所有內(nèi)置的調(diào)試器命令。我們不會進一步討論內(nèi)置調(diào)試器，因為 Chrome 調(diào)試器是本教程的重點。
讓我們在Chrome中調(diào)試這個TypeScript項目。使用 debug npm 腳本運行項目，然后在Chrome上轉(zhuǎn)到以下網(wǎng)址：
chrome://inspect
現(xiàn)在，打開 DevTools 調(diào)試器 GUI，如下所示：
圖片
您可以通過Chrome DevTools界面調(diào)試TypeScript文件。調(diào)試器實用程序反映終端上的調(diào)試操作。查看以下預(yù)覽：
圖片
早些時候，示例React項目在代碼更改期間預(yù)轉(zhuǎn)譯了修改后的 TypeScript 代碼。您可以使用 tsc --watch 和 nodemon 或 ts-node-dev 對服務(wù)器端TypeScript項目執(zhí)行相同的操作。
調(diào)試 Deno 應(yīng)用程序Deno 是一個安全的TypeScript運行時，您可以將其用作 Node.js 運行時的替代方案。在 Deno 中調(diào)試TypeScript不需要像基于 TypeScript 的 Node.js 應(yīng)用程序那樣手動配置，因為 Deno 本身支持 TypeScript。
首先，請確保您的計算機上已經(jīng)安裝了Deno。如果沒有，請根據(jù)官方安裝指南安裝最新的Deno運行時版本。
在我們之前創(chuàng)建的基于TypeScript的 Node.js 項目目錄中使用以下命令啟動Deno調(diào)試器：
deno run --inspect-brk main.ts
然后，打開 DevTools 并開始調(diào)試：
圖片
可以按 F5 并調(diào)試 Node.js 應(yīng)用，而無需額外的擴展，因為內(nèi)置調(diào)試器擴展支持 Node.js 調(diào)試。
對于 Deno，您可以安裝 Deno 擴展以進行自動 launch.json 配置，也可以手動使用以下 launch.json 設(shè)置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Deno",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "deno",
"runtimeArgs": ["run", "--inspect-brk", "-A", "${file}"],
"attachSimplePort": 9229
}
]
}
看看我如何使用 VS Code 調(diào)試TypeScript文件：
圖片
基于 JavaScript 的跨平臺移動應(yīng)用程序開發(fā)框架，允許開發(fā)人員使用獨立于平臺的單一代碼庫構(gòu)建應(yīng)用程序，從而使開發(fā)工作流程更加輕松。有兩種類型的基于 JavaScript 的移動框架：
使用webviews（即Android WebView）來執(zhí)行JavaScript并呈現(xiàn)類似本機的HTML UI元素的框架，例如Ionic和Apache Cordova。
具有自己的 JavaScript 解釋器實例（即 v8 實例）的框架，用于通過 JavaScript 原生接口或橋接執(zhí)行 JavaScript 和呈現(xiàn)本機 UI 元素，例如React Native和 NativeScript
我們可以使用 TypeScript 創(chuàng)建使用這兩種框架類型的應(yīng)用程序，因此能夠調(diào)試基于 TypeScript 的移動應(yīng)用程序代碼非常重要。Chrome 和Android WebView實現(xiàn)協(xié)同工作，讓開發(fā)者通過Android開發(fā)者模式和 Chrome 遠程調(diào)試功能在Chrome桌面應(yīng)用上調(diào)試 TypeScript Web 應(yīng)用（加載在 WebView 中）。第二種框架類型帶有內(nèi)置的調(diào)試工具，允許我們使用Chrome DevTools進行調(diào)試。
讓我們仔細看看如何使用Chrome調(diào)試各種TypeScript移動應(yīng)用程序。
調(diào)試基于 Android Web View 的應(yīng)用
之前，我們看到了如何通過 chrome://inspect 內(nèi)部頁面輸入Chrome DevTools來調(diào)試Node.js/Deno服務(wù)器端應(yīng)用。同樣，我們可以檢查當(dāng)前運行的Android WebView。如果 WebView 加載了 TypeScript的source map，我們可以從 Chrome 桌面應(yīng)用調(diào)試 TypeScript Web 應(yīng)用源。為了演示此方案，我們需要一個運行 TypeScript Web 應(yīng)用的 Web 視圖。
首先，在開發(fā)模式下啟動任何基于 TypeScript 的Web應(yīng)用程序。如果您使用本教程創(chuàng)建了以前的 TypeScript React 應(yīng)用程序，您也可以使用以下命令之一啟動它：
npm start
# --- or ---
yarn start
這是我們將在Android WebView組件中加載的應(yīng)用程序。我們無法引用來自手機的 localhost URL，即使計算機和手機使用相同的 wifi 網(wǎng)絡(luò)也是如此。要從移動設(shè)備加載 TypeScript 應(yīng)用程序，我們需要使用計算機的 IP 地址，如下所示：
圖片
使用此 URL，您將能夠在移動設(shè)備上查看您的 TypeScript 應(yīng)用程序。接下來，讓我們創(chuàng)建一個Android WebView實例并加載此 URL。我將使用 Flutter 輕松創(chuàng)建原生 Web 視圖，因此請務(wù)必在開始之前安裝最新的Flutter SDK版本。
創(chuàng)建一個新的 Flutter 應(yīng)用程序：
flutter create webview_app_demo
cd webview_app_demo
安裝 webview_flutter 插件：
flutter pub add webview_flutter
更新 android/app/build.gradle 種的最低 SDK 版本屬性：
defaultConfig {
// ----
// ---
minSdkVersion 19
// ---
}
現(xiàn)在，讓移動應(yīng)用程序訪問互聯(lián)網(wǎng)并加載 HTTP 頁面 AndroidManifest.xml ，方法是將以下權(quán)限和 usesCleartextTraffic 屬性添加到：
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTE.NET" />
<application
android:usesCleartextTraffic="true"
....
....
....
最后，將以下代碼添加到文件中 main.dart ，以將TypeScript Web應(yīng)用加載到 Web 視圖中。請務(wù)必替換為<computer_ip>您之前記下的真實計算機 IP：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
),
home: const MyStatefulWidget());
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
late final WebViewController controller;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse('http://<computer_ip>:3000'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView Demo'),
),
body: WebViewWidget(controller: controller));
}
}
使用以下命令運行 Flutter 應(yīng)用程序：
flutter run
現(xiàn)在，您可以使用Chrome遠程調(diào)試功能檢查此Web視圖。首先，進入 chrome://inspect 內(nèi)部頁面，找到 WebView 實例，單擊“檢查”：
圖片
要為 TypeScript React 應(yīng)用設(shè)置斷點，請點擊手機上的“Say hello”按鈕，然后查看 DevTools。調(diào)試過程可以通過遠程方式進行：
圖片
在這里，我們使用 Flutter 創(chuàng)建了一個基于Android WebView的應(yīng)用程序，但這種調(diào)試技術(shù)適用于使用原生 Android SDK（基于 Java/Kotlin）和其他框架（如 Xamarin、React Native 等）創(chuàng)建的 Web 視圖。
您還可以使用這種 Chrome 遠程調(diào)試方法來調(diào)試使用 Ionic、Capacitor.js 和 Apache Cordova 框架編寫的基于 TypeScript 的混合移動應(yīng)用。Chrome無法檢查IOS移動設(shè)備中基于WKWebView的混合應(yīng)用程序，但您可以使用Apple Safari的網(wǎng)絡(luò)檢查功能來執(zhí)行此操作。
集成VS Code用于調(diào)試基于 Web 視圖的應(yīng)用
之前，我們看到了如何使用Chrome DevTools調(diào)試界面進行基于WebView的TypeScript移動應(yīng)用程序調(diào)試。如果您是 VS Code 的死忠粉絲，您可以使用此免費擴展直接在編輯器中調(diào)試 Android WebView。
繼續(xù)在您的移動設(shè)備上運行以前的 TypeScript 混合應(yīng)用程序。現(xiàn)在，讓我們在 VS Code 上調(diào)試它。
安裝 Android WebView 調(diào)試擴展后，可以使用以下 launch.json 配置將 VS Code 調(diào)試器接口附加到移動應(yīng)用中正在運行的 Android WebView 實例。請確保為application屬性使用正確的應(yīng)用程序標(biāo)識符：
{
"version": "0.2.0",
"configurations": [
{
"type": "android-webview",
"request": "attach",
"name": "Attach to Android WebView",
"application": "com.example.webview_app_demo"
}
]
}
將上述配置用于 TypeScript Web 應(yīng)用項目后，可以按 F5，將 VS Code 內(nèi)置調(diào)試器前端附加到首選WebView應(yīng)用，然后開始調(diào)試，如以下預(yù)覽所示：
圖片
調(diào)試React Native應(yīng)用程序
從 v0.71 開始，官方的 React Native CLI 腳手架應(yīng)用程序默認(rèn)使用 TypeScript，因此我們有更多的動力使用 TypeScript 來構(gòu)建 React Native 應(yīng)用程序。React Native 框架附帶了一個內(nèi)置的調(diào)試器 Web 應(yīng)用程序，該應(yīng)用程序在Web worker中托管TypeScript移動應(yīng)用程序代碼。因此，您可以使用 Chrome 或任何支持 Web Worker 規(guī)范的瀏覽器來調(diào)試TypeScript React Native應(yīng)用程序源代碼。
現(xiàn)在，讓我們看看如何使用Chrome調(diào)試基于TypeScript的React Native應(yīng)用程序。首先，使用以下命令創(chuàng)建一個新的 React Native 應(yīng)用程序：
npx react-native init MyApp
cd MyApp
接下來，將以下 TypeScript 代碼片段添加到您的 App.tsx 文件中：
import React, { useState } from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Button,
Text
} from 'react-native';
function App(): JSX.Element {
const [message, setMessage] = useState('');
function generateMessage(name: string): string {
let message: string = `Hello ${name}!`;
return message;
}
function handlePress(): void {
setMessage(generateMessage('TypeScript'));
}
return (
<SafeAreaView style={styles.container}>
<View>
<Text style={styles.message}>{message}</Text>
<Button onPress={handlePress} title="Say hello"/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
marginTop: 32,
padding: 24,
},
message: {
marginBottom: 32,
fontSize: 20
}
});
export default App;
接下來，使用以下命令啟動應(yīng)用程序并在移動設(shè)備上運行它：
npm start
# --- or ---
yarn start
加載應(yīng)用程序后，您可以從終端按 d 打開移動應(yīng)用程序中的開發(fā)人員工具菜單。然后，選擇“調(diào)試”菜單項以啟用調(diào)試功能。React Native 將在您的默認(rèn)瀏覽器中打開調(diào)試器 UI。如果 Chrome 不是您的默認(rèn)網(wǎng)絡(luò)瀏覽器，您也應(yīng)該能夠使用 Chrome 手動訪問以下網(wǎng)址：
http://localhost:8081/debugger-ui/
打開調(diào)試器 Web 應(yīng)用的 DevTools 并開始調(diào)試 TypeScript 移動代碼：
圖片
也可以從VS Code調(diào)試React Native應(yīng)用程序。您可以閱讀本文并了解VS Code React Native調(diào)試配置。
調(diào)試NativeScript應(yīng)用
NativeScript 是一個面向 JavaScript 的跨平臺移動應(yīng)用程序開發(fā)框架，使用 React Native 遵循的類似概念實現(xiàn)。它將 JavaScript 運行時 （v8） 嵌入到跨平臺移動應(yīng)用程序中，并創(chuàng)建一個 JavaScript 原生接口，讓 JavaScript 訪問原生 SDK，類似于 React Native。
NativeScript 允許開發(fā)人員使用 TypeScript 就緒的 Web 框架（如 Angular、React 和 Svelte）構(gòu)建應(yīng)用程序，因此我們能夠調(diào)試 TypeScript NativeScript 應(yīng)用程序非常重要。NativeScript 實現(xiàn)了Chrome DevTools協(xié)議，讓開發(fā)人員在 Chrome 中調(diào)試 NativeScript 應(yīng)用。
讓我們看看如何使用Chrome調(diào)試基于TypeScript的普通NativeScript應(yīng)用程序。
首先，根據(jù)官方文檔配置開發(fā)環(huán)境，使用 TypeScript 模板創(chuàng)建新的 NativeScript 應(yīng)用，如下所示：
ns create MyApp --ts
此 TypeScript 初學(xué)者項目已經(jīng)實現(xiàn)了一個按鈕回調(diào)，因此您無需為即將到來的調(diào)試演示修改源代碼。
在 NativeScript 調(diào)試模式下在移動設(shè)備上運行應(yīng)用，如下所示：
ns debug android
# --- or ---
ns debug ios
在調(diào)試模式下加載應(yīng)用后，NativeScript CLI 將打印 Chrome DevTools UI UR
devtools://devtools/bundled/inspector.html?ws=localhost:40000
使用 Chrome 導(dǎo)航到此調(diào)試器網(wǎng)址。然后，您可以調(diào)試 TypeScript 應(yīng)用源，如以下預(yù)覽所示：
圖片
若要使用 VS Code 內(nèi)置調(diào)試器接口調(diào)試 NativeScript 應(yīng)用，可以使用此免費擴展[https://marketplace.visualstudio.com/items?itemName=NativeScript.nativescript]。
總結(jié)
調(diào)試的主要目標(biāo)是通過監(jiān)視源代碼執(zhí)行和手動審查代碼來識別軟件錯誤。在大多數(shù) Web 開發(fā)調(diào)試活動中，我們可以通過讀取代碼和使用眾所周知的調(diào)試器實用程序功能來識別錯誤。但是，在某些復(fù)雜的場景中，我們必須生成許多測試用例并使用高級調(diào)試器功能。
大多數(shù) Web 開發(fā)人員使用標(biāo)準(zhǔn)控制臺 API（即console.log）進行調(diào)試;其他人從Chrome DevTools調(diào)試器或VS Code的調(diào)試器UI開始。開始跟蹤 Bug 時，首先從上到下分析可疑代碼段。如果尚未找到 bug，則嘗試在邏輯流不復(fù)雜時記錄運行時值。如果邏輯流很復(fù)雜，從 Chrome 調(diào)試器或 VS Code 調(diào)試器界面開始可以節(jié)省您的時間。
在本教程中，我們討論了如何使用 Chrome 調(diào)試用 TypeScript 編寫的瀏覽器、Node.js、Deno 和移動應(yīng)用程序。我們還討論了如何使用 VS Code 的調(diào)試器 UI。
您可以根據(jù)自己的要求和個人喜好自定義和使用這些調(diào)試技術(shù)。與前端框架的 TypeScript 模板類似，您可以使用 通過 node-typescript-boilerplate [https://Github.com/jsynowiec/node-typescript-boilerplate]預(yù)配置的調(diào)試環(huán)境更快地創(chuàng)建基于 TypeScript 的 Node.js 項目。或者，您可以使用本教程中討論的步驟創(chuàng)建自己的模板。
