Chrome remote debugging android: looks broken

I’m using chrome://inspect/#devices to inspect a WebView of my android-app build via cordova. It is running und an emulator on my mac. The device can be found, but if i hit “inspect” on the WebView, it opens a window like this:
enter image description here
The UI is really broken and i have no idea, why… It is not possible to move the blocks into the right place. If i inspect a usual webpage, the inspector looks normal.
I am using Chrome 66.0.3359.181, Canary does not work, too.
Does anyone have an idea, what is going wrong with Chrome inspecting devices?

Chrome won’t inspect anymore

I need to inspect a Webview running on my tablet which is connected via USB. It used to work but now I get this blank page:

enter image description here

Instead of the usual developer tools. What’s causing the problem? It happened out of the blue

App unable to make requests to localhost though port forwarding is working

I’m trying to debug my Android app built with cordova over USB.

My device is showing up in adb and chrome://inspect and I’ve port forwarded the device to connect to localhost:9000.
I have confirmed that the port forwarding is working, since I can access localhost:9000 from Chrome on the device.

However when the app tries tp make a request to localhost:9000, I get a 404 (Not Found) error.
I can copy the same address the app is trying to access and it opens correctly in Chrome on the device and also through the address bar of the webview inspector in Chrome devtools on my dev machine.

Why is my app unable to connect to localhost when Chrome can?

chrome developer tools can’t inspect Android device pages completely

some page on my android cordova app

here is my chrome version 64.0.3282.119
and my android device is 6.0

The weird thing is when i inspect a mobile H5 on android-chrome ,it is normal

inspecting cordova android app per usb with chrome devtools results in blank screen

Debugging a Cordova webview running in Chrome on Android (Pixel / Android 8.1) via the USB connection in Chrome desktop browser (65.0.3319.0 (Offizieller Build) canary (64-Bit)) is not working. Attempting to inspect web pages running on the mobile device results in a blank page.

When I inspect the blank page that appears in the desktop Chrome browser, I get the following error:

Uncaught TypeError: InspectorFrontendHost.isUnderTest is not a function  
    at Object.Host.isUnderTest (inspector.js:930)  
    at Main.Main._gotPreferences (inspector.js:8301)  
    at DevToolsAPIImpl.embedderMessageAck (devtools_compatibility.js:33)  
    at :1:13  

How can I automatically reconnect Chrome DevTools after reinstall a cordova app?

I’m developing a hybrid Android app with Cordova and using Chrome DevTools (chrome://inspect/#devices) to inspect and debug.

Every time I run cordova run android --emulator to update the app on emulator, DevTools gets disconnected.

My question is how can I automatically reconnect DevTools after Cordova successfully launch the app?

Android Devtools broken when inspecting Webview

This worked well and the problem started happenning about two weeks ago.

I run a Chrome on a Windows 10 computer. I have already tried uninstalling, and then reinstalling Chrome since the issue started. No change.

This is what happens:

1) I start Android emulator
2) Run my cordova app in it
3) Go to chrome://inspect and click on the link for my running app on emulator. It is listed ok, that works.
4) The DevTools window opens, but it does not show all the information as it did. I see half of the screen blank. The menu tabs sometimes don’t show, I have to minimize, then maximize, then they MAY show.
There are no scrollbars for any of the content panels so I cannot actually see anything useful.

I tried clicking on the gear icon in the top right of the screen, to open Settings, and see if changing something there would fix it. Nothing. The settings window opens but it will ONLY show the links on the left to the settings areas. The right side where the settings controls should be, is completely blank.

enter image description here

enter image description here

I have created a new emulator and the same happened.

I have Android Studio 3.0.1

I tried inspecting the devtools with shift-ctrl-j

It is showing some strange errors. As if it was loading an older version of itself:

enter image description here

Please help, I need to use this to debug my cordova app during development and I don’t know what else to do. Thank you.

Google Chrome Devtools broken when inspecting Android Webview

This worked well and the problem started happenning about two weeks ago.

I run a Chrome on a Windows 10 computer. I have already tried uninstalling, and then reinstalling Chrome since the issue started. No change.

This is what happens:

1) I start Android emulator
2) Run my cordova app in it
3) Go to chrome://inspect and click on the link for my running app on emulator. It is listed ok, that works.
4) The DevTools window opens, but it does not show all the information as it did. I see half of the screen blank. The menu tabs sometimes don’t show, I have to minimize, then maximize, then they MAY show.
There are no scrollbars for any of the content panels so I cannot actually see anything useful.

I tried clicking on the gear icon in the top right of the screen, to open Settings, and see if changing something there would fix it. Nothing. The settings window opens but it will ONLY show the links on the left to the settings areas. The right side where the settings controls should be, is completely blank.

enter image description here

enter image description here

I have created a new emulator and the same happened.

I have Android Studio 3.0.1

I tried inspecting the devtools with shift-ctrl-j

It is showing some strange errors. As if it was loading an older version of itself:

enter image description here

Please help, I need to use this to debug my cordova app during development and I don’t know what else to do. Thank you.

How to technically make or enable chrome devtools or something similar on android (not remote)?

I would like to make Chrome browser devtools available on mobile phones, to help an underprivileged audience with no access to desktop computers develop apps.

What would be technically needed to get something like chrome devtools work on the android phone itself?

If mobile browsers generally don’t ship with devtools, is there a way to make a cordova app to locally (on the android phone) connect to the app itself using the remote debugging protocol locally instead of on a desktop computer via USB?

Chome USB debugging disconnects right after connecting

I am trying to debug my Ionic/Cordova app with Chrome USB debugging. I’m able to connect to the device and inspect the app for about 10 to 20 seconds, and then it disconnects and I have to unplug the USB and plug it back in and start all over again, and it just keeps disconnecting.

This isn’t the first time this has happened. I almost never use Chrome remote debugging for apps because of this. Over the years I’ve tried doing this on several apps and on several different computers and I always get the same thing happening every time.

Is Chrome remote debugging known to do this a lot, or have I been doing something wrong this entire time?