USB连接设备调试时浏览器工具无法命中断点问题

1. 核对Angular构建的Source Map配置 #

确保构建时正确生成并暴露source map：

• 打开angular.json，确认对应调试环境的sourceMap配置未隐藏符号：

  "sourceMap": {
    "scripts": true,
    "styles": true,
    "hidden": false,
    "vendor": true
  }
  

• 构建时指定调试环境：执行ionic build --configuration=development，避免误触发生产环境的source map隐藏逻辑。

2. 修复Android Studio符号目录警告 #

该警告直接关联native项目的调试配置，按以下步骤处理：

• 打开Android Studio中的android/项目，执行File > Sync Project with Gradle Files，同步依赖与符号目录。
• 检查android/app/build.gradle的debug构建类型配置，确保启用调试且未压缩符号：

  buildTypes {
      debug {
          debuggable true
          minifyEnabled false
          shrinkResources false
          proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
      }
  }
  

• 执行ionic capacitor sync android同步Capacitor配置，再在Android Studio中依次执行Build > Clean Project和Build > Rebuild Project。

3. 调整浏览器调试工具设置 #

即使source map存在，工具可能未正确映射源码：

• 在Chrome/Edge DevTools的Settings > Experiments中，勾选Enable JavaScript source maps和Enable CSS source maps。
• 连接设备后，在DevTools的Sources面板中找到webpack://路径下的原始源码，在此处设置断点，避免直接依赖本地编辑器的debugger语句（打包后代码行号可能偏移）。
• 使用Angular DevTools时，在Elements面板选中组件后切换到Angular标签页，直接在组件源码内设置断点。

4. 启用Capacitor WebView调试权限 #

确认WebView允许调试：

• 在Android项目的MainActivity.java中添加调试启用代码：

  import android.webkit.WebView;
  import com.getcapacitor.BridgeActivity;
  
  public class MainActivity extends BridgeActivity {
      @Override
      public void onResume() {
          super.onResume();
          WebView.setWebContentsDebuggingEnabled(true);
      }
  }
  

5. 清除缓存残留 #

设备WebView缓存可能导致旧代码加载：

• 执行ionic capacitor copy android后，卸载设备上的应用再重新安装。
• 在浏览器DevTools的Network面板设置中勾选Disable cache，重新加载应用。

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