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

[razliberman-bv]

Hi, Has the remaining issue been resolved (the disconnected socket issue)? it's still happening to me, but it seems that the ticket is closed. thanks.

[SmailHammour]

@NathanWalker How can we fix this in NS8?

[AchrafBardan]

Still not working, crashing with xcode 12.

[twickstrom]

can restore network tab (and elements tab) in chrome devtools for iOS by making this change in webpac

Can you post an example webpack.config.js, this does not seem to work for me