NativeScript: Chrome Dev Tools Not Showing Elements

Environment:

CLI: 7.0.11
@nativescript/core: 7.0.0
@nativescript/android: 7.0.1
@angular/core: 10.1.0
HostSystem: Windows 10
Chrome: 87.0.4280.66 (x64)

The Issue: When debugging the android application, either using an emulator or a real device, opening the chrome debug url devtools://devtools/bundled/inspector.html?ws=localhost:40000 connects to the app and I can view the console output and access the loaded app .ts and .xml files.

The elements tab however is completely blank. We’ve used this before to help with styling the UI, so without it we’re a bit in the dark.

Additional Context: Myself and another colleague have tried using both standard and incognito tabs with the same result.

I’ve looked over the web quite a bit over the last few days and haven’t found anything around this specific issue, so not sure if its a new bug or something specific to our project.

Full Dependencies List:

package.json dependencies

  "dependencies": {
    "@angular/animations": "~10.1.0",
    "@angular/common": "~10.1.0",
    "@angular/compiler": "~10.1.0",
    "@angular/core": "~10.1.0",
    "@angular/forms": "~10.1.0",
    "@angular/platform-browser": "~10.1.0",
    "@angular/platform-browser-dynamic": "~10.1.0",
    "@angular/router": "~10.1.0",
    "@nativescript/angular": "~10.1.0",
    "@nativescript/core": "~7.0.0",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/theme": "~3.0.0",
    "address": "^1.1.2",
    "nativescript-fonticon": "^2.0.0",
    "nativescript-modal-datetimepicker": "^2.1.2",
    "nativescript-toasty-ns-7": "^14.0.0",
    "nativescript-ui-autocomplete": "^7.0.2",
    "nativescript-ui-chart": "^8.0.2",
    "nativescript-ui-dataform": "^7.0.4",
    "nativescript-ui-gauge": "^7.0.2",
    "nativescript-ui-listview": "^9.0.4",
    "nativescript-ui-sidedrawer": "^9.0.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~10.1.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.0.5",
    "@nativescript/types": "~7.0.0",
    "@nativescript/webpack": "~3.0.0",
    "@ngtools/webpack": "~10.1.0",
    "sass": "^1.29.0",
    "typescript": "~4.0.0"
  }

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 14
Comments: 22 (5 by maintainers)

Most upvoted comments

Any chance of a fix soon? With Nativescript 7.1 not showing Elements in Chrome devtools, and VS Code debugger not allowing breakpoints, it is impossible to conduct any form of usable debugging right now. Given that HMR is also broken and showing white screen after updates, the NS 7.1 experience is not a good one. Productivity is gone.

billfrost on Jan 2, 2021

I have the same issue with NS 8 & Angular 12. It would be great if you could prioritize this task, because styling can be very difficult and time-consuming without a working UI debugger.

OscarMeier on Jul 9, 2021

Is it resolved ? I get the same issue after upgrading from version 6 to 8…

Do we have any alternative for this ? As we find it very difficult to deal with styling.

faizulhassan on Jun 14, 2021

Any updates? It’s frustrating to debug the UI of an Android App without this. Is there an alternative?

Carleslc on May 5, 2021

I’m not aware of an open issue (apart from this one I guess) just the PR that’s pending as we have to find the issue on android.

rigor789 on Nov 20, 2020

@Epse no worries. I understand the frustration, I do experience it from both sides (maintainer and consumer), we’ll try to label issues sooner and better. It is one of our roadmap goals to improve the repository health with better labeling, using the discussions more, etc.

rigor789 on Sep 9, 2021

Still the issue… Android (device & emulator), NS7 & Angular 11.

slejnej on Aug 13, 2021