If I'm on a plane or do not have connectivity, remote debugging Chrome on Android fails with a blank window. What can I do?
When you remote debug, Chrome need a version of devtools that matches your mobile browser version. So it loads that specific version off the network. Once they are downloaded, they are kept in AppCache, so you only need to have network available once.
So as long as you start debugging a device (that particular Chrome version) once while you're online, you should then have all those files available later when you're offline.
But there's another workaround to avoid downloading the devtools version:
follow the instructions of https://developer.chrome.com/devtools/docs/remote-debugging-legacy down to (and including) the adb forward tcp:9222 ... section.
open http://localhost:9222/json/list (on your desktop)
find the tab you care about and copy the webSocketDebuggerUrl of it
wsurl = webSocketDebuggerUrl.replace('ws://','')
open this URL (on your desktop):
chrome-devtools://devtools/bundled/inspector.html?ws=${wsurl}
This will use your desktop's locally installed version of DevTools to inspect the phone. There is a possibility of a compatibility problem, but hopefully it should be small.
Related
I just started-off with flutter web and I want to use brave browser to debug my flutter apps not chrome or edge.
When I use flutter devices command, it gives the following result.
No devices detected.
Run "flutter emulators" to list and start any available device emulators.
I'm using brave by using the link provided by web-server and it does not support hot reload.
So, how to configure browsers other than chrome or edge with flutter web for complete functionality.
I found this:
All you have to do, based on your Linux operating system (for Windows
and macOS the process is similar), is to modify your .bashrc file and
insert this line:
#Put your Brave installation location here
export CHROME_EXECUTABLE="/opt/brave.com/brave/brave-browser"
For MacOs,
export CHROME_EXECUTABLE="/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
You can use flutter run -d web-server to run your app like a server.
This means that you can just enter the URL on any browser of your choice to access your Flutter app !
Drawbacks:
Hot Restart/Reload from the terminal is not possible. You must refresh the page on your browser instead.
Advantages:
You can use any browser for developing flutter apps.
You can even use ngrok to forward your port to a HTTPS URL, and access your flutter app from anywhere (your phone, your desktop , someone else's device etc.)
PS: Credits to the Issue #77229 for helping me find this solution. I am aware that this workaround has already been suggested on this thread.
I just wanted to put out a simpler answer for the general viewer.
I've been diving in the same issue, it's known Brave it's Chromium-based, this will help u https://github.com/flutter/flutter/issues/77229
I faced some situation where the web app I developed worked differently (with errors) in a portable device than in computer. Then some googling took me to Inspect device feature of Google Chrome. After successfully connecting the phone to PC, I just clicked the inspect link for the corresponding tab.
Some internet resources said that some appspot link must be accessible. And, I verified it too. It is accessible from PC.
One mentioned try to open another inspect element window from the momentary devtool window by hitting Ctrl + Shift + I. It worked once out of many times and closed after a few seconds.
Configuration
Development system: Chrome 51.0.2704.19 dev-m (64-bit) running on Windows 10
On Device: Chrome 49.0.2623.105 running on Android 4.4.2
PS: Please, comment if any additional resources required to solve this issue
chrome://inspect/#devices opens a devtools window, but about the time it finishes drawing itself, it closes. No error messages
I'm trying to debug a website, not a native app. Any ideas why it would open and tease me, then close when the mouse gets near the window?
Linux: Version 40.0.2214.111 (64-bit) OS:14.04 Ubuntu
Android: Version 40.0.2214.109 OS: 4.1.2
More interesting details. It works on other tabs, and if I use one of those tabs that is working, and paste in my URL, it closes the devtools
As stated in the docs, your desktop Chrome must be newer than your Android Chrome:
Note: Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. For best results, use Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.
For instance, you might install Chrome Canary/unstable or Chrome Beta on your computer. By using it instead, my inspector started working as expected. Currently, my Chrome Beta is v50 and the Android Chrome, v49.
I need to troubleshoot an issue happening in a webview running within my app. This issue only occurs on Android versions lower or equal to 4.3. My app requires an up to date version of Google Play services.
In order to troubleshoot my webview, I usually can run my app under the Android Emulator (with the latest version of Android), then connect to the web view via Chrome (using chrome://inspect) - the web view appears in Chrome and I'm able to browse the DOM and debug.
To run the app under 4.3, I've created (under AVD) a new device from an existing device definition,
then picked the target Google APIs (Google Inc.) - API Level 18. I've then installed my app, but when trying to run it, I get the error message "This app won't run unless you update Google Play services.". There's an "Update" button on the previous dialog, but nothing happen when clicking on it.
I then tried to debug my issue using Genymotion. I've created a device under 4.3, followed these instructions to flash my device with the latest Google Play services and installed my app. I can now run the app and reproduce the issue within this simulated environment.
The trick now is to be able to connect to the web view from my local Chrome browser. I've enabled remote debugging as described here. Now my device appears in Chrome, but the web view is not showing up in the inspector. Similarly, if I open a new tab under the native browser, it won't show up in the remote inspector. If I open a new tab under Android Chrome though, I can see it showing up under my remote Chrome inspector.
I can see two way moving forward and successfully accessing to the DOM of my webview:
Fixing the "Update" issue under the Android Emulator running 4.3
Or
Connecting to my web view from my Chrome inspector while running the app under Genymotion
Any idea on how to solve one of these two problems?
I have been using weinre for sometimes. it's a pretty good tool to debug webview for android 4.3 and lower. It provides almost same interface as chrome debugger.
All you need to do are:
Install weinre
sudo npm -g install weinre
Client side:
Insert the following code to your webpage <head> section.
Note: it's better to put it at end of <head> section, otherwise there will be some strange errors and debugger won't show up.
<script src="http://<your server ip here>:8081/target/target-script-min.js"></script>
Server side
weinre --boundHost -all- --httpPort 8081
Debugger
open the debugger tool from weinre from your desktop browser:
http://localhost:8081/client/
Finally,
select any target in Targets part and then start debugging.
Remote debugging web views only works on devices with android 4.4 and above.
have a look at this :
https://developer.chrome.com/devtools/docs/remote-debugging
Couple days ago Google Chrome automatically updated from version 31.* to version 32.0.1700.76 m. After that happened it does not show in DevTools network traffic request/responses of "application/msbin1" type anymore. These requests are visible in all other browsers' dev tools (FireFox, IE) and in Fiddler, but not in Chrome. Also Chrome's popup menu in this version is very glitchy.
I don't see the way to downgrade Chrome to previous version. Please help I don't want to uninstall Chrome.
Network traffic does not even show resources (XAP file) a page loads.
Example:
http://www.microsoft.com/silverlight/pixel-shader/demo/
This page loads file SilverlightShaderApp.xap, however dev tools of new Chrome's version never shows it in network tab.
I posted the question here, because it's developers question, not just chrome users.
I reported this issue on google chrome forum as well: here.
Possibly related bugs:
Issue 173844: Developer tools (Network section) don't show response of requests from flash applications
Issue 335502: XMLHttpRequests from Silverlight is not visible in devtools network tab
To avoid the bug, you could downgrade to Chrome 31. A fully offline installer can be downloaded from http://download.oldapps.com/Chrome/31.0.1650.39_chrome_installer.exe.
If you downgrade Chrome, don't forget to disable auto-update. Also, "star" the relevant issues on Chromium's issue tracker so you'll receive email notifications for progress updates. When the issue is fixed, enable auto-update again.
Often, starting a new version of Chrome renders a profile unusable for older Chrome versions ("Your profile can not be used because it is from a newer version of Google Chrome."). When you see such message on start-up, either delete your old profile (don't forget to make a back-up!) (you can also try to delete some files, according to various users, deleting "Web Data" and "Web Data-journal" is sufficient), or launch Chrome with a new profile directory (--user-data-dir=path\to\profile-dir).
For more information on user profiles, see http://www.chromium.org/user-experience/user-data-directory.