Nativescript: XCode12 breaks debug of network traffic in Chrome Devtools

[cjohn001]

Hello together,
since migration to XCode12 (NS7 project) I am not able to debug my network traffic with Chrome DevTools on IOS anymore. I build a simple app attached below which sends some http requests. If debugging the app on android, the chrome network tap shows the send packages as expected (hence I have no configuration problem with chrome). When debugging on IOS, the chrome network tap stays empty. In the attached demo app, I do no get error messages on the console.
However, In the app I am working on, I am seeing the following error, which I first thought might be related. However, as the demo app does not show this error it is not the root cause. Also I need to mention that the bug appears with both ios runtimes (v8 and tns-ios)

CONSOLE WARN Loading inspector modules failed: Error: Could not find module 'inspector_modules.js'. Computed path '/Users/cjohn/Library/Developer/CoreSimulator/Devices/111F27BA-C222-47F9-B25D-2ED4E2D524A3/data/Containers/Bundle/Application/C0763E30-5EF9-4CEF-B210-A08E5B992C5D/mnd.app/app/tns_modules/inspector_modules.js'.
NativeScript debugger attached.

Environment of the app I am developing:

Environment

• CLI: 7.0.11

• Cross-platform modules:

  "@angular/animations": "~10.1.6",
  "@angular/common": "~10.1.6",
  "@angular/compiler": "~10.1.6",
  "@angular/core": "~10.1.6",
  "@angular/forms": "~10.1.6",
  "@angular/platform-browser": "~10.1.6",
  "@angular/platform-browser-dynamic": "~10.1.6",
  "@angular/router": "~10.1.6",
  "@nativescript/angular": "~10.1.7",
  "@nativescript/core": "~7.0.11",
  "@nativescript/firebase": "~11.0.0",
  "@nativescript/iqkeyboardmanager": "~2.0.0",
  "@nativescript/localize": "~5.0.2",
  "@nativescript/secure-storage": "^3.0.0",
  "@nativescript/theme": "~3.0.0",
  "@nativescript/ui-charts": "0.0.5",
  "apollo-angular-link-http": "^1.11.0",
  "apollo-cache-inmemory": "~1.6.6",
  "apollo-cache-persist": "~0.1.1",
  "apollo-link": "~1.2.14",
  "apollo-link-batch-http": "~1.2.14",
  "apollo-link-context": "~1.0.20",
  "apollo-link-error": "~1.1.13",
  "d3-ease": "^2.0.0",
  "graphql": "^15.3.0",
  "graphql-tag": "^2.11.0",
  "intl": "^1.2.5",
  "moment": "^2.29.1",
  "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.0.tgz",
  "nativescript-sqlite": "^2.6.4",
  "nativescript-ui-autocomplete": "^7.0.2",
  "nativescript-ui-calendar": "^7.0.2",
  "nativescript-ui-chart": "^8.0.2",
  "nativescript-ui-gauge": "~7.0.2",
  "nativescript-ui-listview": "^9.0.2",
  "offix-angular": "^0.0.4",
  "offix-client": "^0.15.5",
  "reflect-metadata": "~0.1.13",
  "rxjs": "^6.5.5",
  "tslib": "1.10.0",
  "uuid": "^8.3.1",
  "zone.js": "~0.10.2"
  

  "devDependencies": {
  "@angular/cli": "~10.1.7",
  "@angular/compiler-cli": "~10.1.6",
  "@graphql-codegen/cli": "^1.17.8",
  "@graphql-codegen/fragment-matcher": "^1.17.8",
  "@graphql-codegen/introspection": "^1.17.8",
  "@graphql-codegen/typescript": "^1.17.9",
  "@graphql-codegen/typescript-apollo-angular": "^1.17.7",
  "@graphql-codegen/typescript-operations": "^1.17.8",
  "@nativescript/android": "~7.0.0",
  "@nativescript/types": "~7.0.4",
  "@nativescript/webpack": "~3.0.7",
  "@ngtools/webpack": "~10.1.3",
  "@types/d3-ease": "^1.0.9",
  "@types/intl": "^1.2.0",
  "@types/node": "^13.13.19",
  "@types/uuid": "^7.0.4",
  "codelyzer": "^6.0.1",
  "keycloak-request-token": "^0.1.0",
  "node-sass": "^4.14.1",
  "tns-ios": "6.5.3",
  "ts-node": "^8.10.2",
  "tslint": "^6.1.3",
  "typescript": "~3.9.2"

• XCode Version 12.0.1 (12A7300)

• Plugin(s): see above

Expected behavior
I can debug as network traffic

Additional context
I recreated the ios simulator runtimes for different targets like ios 14, 13.5, 11.4, 11.2 the behavior is exactly the same on each deployment target.

Demo Code:
networkbug.zip

[NathanWalker]

You can restore network tab (and elements tab) in chrome devtools for iOS by making this change in webpack.config.js:

if (platform === 'ios' && !areCoreModulesExternal && !testing) {
  entries['tns_modules/inspector_modules'] = 'inspector_modules';
}

The conditional is less important than the entries - just find inspector_modules in your webpack.config and make that adjustment and should work again. There's a remaining issue where tapping on the network request disconnects the socket we're still looking into. Once fully resolved we'll update @nativescript/webpack plugin to contain this modification and close this ticket.

[cjohn001]

Great, this works