使用Ionic Cordova run browser时无法访问TS文件进行调试

方案1：启用调试模式生成SourceMap #

直接在运行命令时添加--debug参数，强制以开发模式编译，生成TS到JS的映射文件：

ionic cordova run browser --debug

也可以通过--prod=false明确禁用生产模式：

ionic cordova run browser --prod=false

同时确保Angular配置中开发环境的SourceMap已开启：
打开angular.json，找到对应项目的architect > build > configurations > development节点，确认sourceMap设为true：

"development": {
  "sourceMap": true,
  // 其他配置...
}

启动后在浏览器开发者工具的Sources面板里，就能找到webpack://下的TS源文件进行断点调试了。

方案2：用ionic serve配合插件Mock（更推荐） #

既然ionic serve不支持原生插件，我们可以通过环境判断+模拟实现的方式，在浏览器环境下Mock插件功能，这样既能享受ionic serve的热更新和TS调试能力，又能正常开发插件相关逻辑：

1. 创建一个封装插件的服务，比如AppPreferenceService：

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';

@Injectable({ providedIn: 'root' })
export class AppPreferenceService {
  constructor(private platform: Platform) {}

  // 获取偏好设置
  async get(key: string): Promise<string | null> {
    if (this.platform.is('browser')) {
      // 浏览器环境用localStorage模拟
      return localStorage.getItem(key);
    }
    // 真机环境调用真实插件
    return window.cordova.plugins.preferences.fetch(key);
  }

  // 保存偏好设置
  async set(key: string, value: string): Promise<void> {
    if (this.platform.is('browser')) {
      localStorage.setItem(key, value);
    } else {
      await window.cordova.plugins.preferences.store(key, value);
    }
  }
}

2. 项目中所有调用App Preference的地方，都通过这个服务来操作，不用直接调用插件API。
3. 日常开发用ionic serve启动，就能正常调试TS文件；真机测试时再用ionic cordova run android/ios/browser即可，服务会自动切换到真实插件实现。

方案3：自定义Webpack配置（进阶） #

如果必须使用ionic cordova run browser且需要自定义Webpack行为，可以通过@ionic/angular-toolkit添加自定义配置：

1. 安装依赖：

npm install @ionic/angular-toolkit --save-dev

2. 在项目根目录创建webpack.config.js，添加SourceMap相关配置：

module.exports = {
  devtool: 'source-map',
  // 其他自定义配置...
};

3. 修改angular.json，在项目的architect > build > options中添加customWebpackConfig：

"options": {
  "customWebpackConfig": {
    "path": "./webpack.config.js"
  },
  // 其他配置...
}

之后运行ionic cordova run browser --debug就能生效。

内容的提问来源于stack exchange，提问作者Lak