To debug a Mobile Application developed using Ionic 5 and Capacitor 2, I use:
ionic cap run android -l –external
Once the app is loaded in the device, I use Google Chrome and open:
chrome://inspect/#devices
Under my listed device, I open the WebView by clicking Inspect link.
This opens the Chrome DevTools window. I then enable the screencast. And then try to use the Select an Element option (Ctrl + Shift + C) to select the HTML element in the Elements pane.
This particular element selection feature has stopped working suddenly. I tried to reinstall chrome completely but it still did not fix. Any help is appreciated.
Related
I am using Android Studio bumbleBee version in Windows 10 . Appears in a window when I run the emulator. My monitor is small and it is better to have it separately as before.
There are three methods that I can think of.
Thanks to #vishal beep answer, You can simply go to file => setting=>search emulator in the search field=>select emulator=>uncheck launch in a tool window. Screenshot below.
Since it is a flutter project Instead of going to device manager you can simply
Click on the device list first and
Select Refresh if you don't see your emulator
Once refreshed you should be able to see the emulator like the screenshot below.
select the emulator, and run your application.
.
3. Or you can run the emulator as usual and then right-click on the emulator window and choose View mode=>Select Float option instead of Docked Pinned screenshot attached below
Thanks, Keep coding
Go to setting -> tools ->emulator and unselecte launch in a tool windows
Simply Go to Preferences.. >Tools > Emulator and then and then uncheck Launch into tool window
For windows user Go to Settings >Tools > Emulator and then and then uncheck Launch into tool window
Note : Before Doing this activity close all running Emulators and if needed restart the Android studio after changing the Emulator settings
All my old projects were able to launch debugging with Android Emulator. When I press F5, it will shows a list of installed Android Emulator for me to select for debugging.
But today, I have created a new project, and it launches debugging in Chrome instead.
First you'll need to check if the android platform has been initialized for the project. If you project has an android folder then it has been initialized, if you will need to create it with the following command: flutter create --platforms android .
To run the emulator, check the bottom right corner of the screen you should see the currently selected platform, if you click on the selected platform a pop up should appear allowing you to select from all supported platforms.
You can also you use quick-open (ctrl+p) and type in >flutter launch emulator, if no emulator is found it will provide you the option to create one as well.
I opened a new chrome window in app mode (chrome --app command).
And when I pressed F12 to open DevTools, it opened the DevTools in another new window.
So how can I open the DevTools in the app mode window?
The whole point of the application mode flag --app is to run Chrome without toolbars, borders and other browser features that are not part of the web application. Therefore, it makes no sense to provide a dockable version of DevTools. You will need to use the undocked version with the F12 shortcut.
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
I'm trying out the MoSync IDE (special version of Eclipse to develop cross-browser Android and iOS apps with HTML/Javascript).
It currently uses the standard SDK Android emulator which is rediculously slow. I found Bluestacks which is a lightning-fast android emulator.
I already found out how to use Bluestacks with Phonegap from within Eclipse (by using the adb connect command), but I can't figure out if it's even possible to test apps on Bluestacks from within the MoSync IDE...
Any ideas?
This works on Mac, and I see no reason why it should not also work on Windows:
Start Bluestacks
Run MOSYNCDIR/bin/android/adb connect localhost:10001, where MOSYNCDIR is your MoSync installation directory
In the MoSync IDE, click the tiny arrow next to the Select Target Device toolbar item and in the dropdown select Scan for Android USB device
If properly connected, a dialog pops up with a list of connected devices. Select localhost:10001 and click Ok
To actually run on the emulator, select a project in the Project Explorer (usually the leftmost panel in the IDE). Then click the Send to Target Device toolbar item.