So I'm reading in this link and it says we can use chrome for remote debugging an app which seeems great but they don't explain how to do it. When I click in the link they provide which has some android documentation, I just see java code. As a non java-developer I wonder how can I use remote debugger in chrome for ionic framework?
To access remote debugging of a webview on your phone, plug your phone into your pc and go to chrome. then type: chrome://inspect into the url bar. open your app on your phone and it should show your device on the inspect dashboard.
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 have installed a PWA on my Android device and I want to remotely debug it in Chrome on my desktop. When I connect to my device in Chrome dev tools, all I see are the tabs open in Chrome on my Android device. I do not see the instance of the PWA that has been installed - "added to homescreen" Is there any way to debug the installed instance?
You have to open your developer tools using Ctrl+Shift+I
Then go to More Tools -> Remote Devices
In Remote devices, you can see your available online device and click on that(either online device can be emulator or it can be attached mobile device), also you can Add Rule if you want to run in localhost from mobile device.
Click on Inspect button, available in right side
Now you can see virtual device is created and you can see all logs that comes from device will display in Console tab
I was having the same problem. Turns out that PWAs that were open before you connected remote debugger will not show up. Simply close the app and start it after connecting the debugger.
I am struggling to make HTTP native or HttpClient get to work for my app.
If I run ionic serve -c I get HttpClient working good on my browser at localhost:8100 and in Ionic Dev App. If I build for Android though, HttpClient fails thus I decided to give HTTP Native a try.
Then I don't understand how I could get some console log if that native plugin is not supported from Ionic Dev App (here says), neither I can see on my browser cause of Cordova is not present.
Is there a way to log on a device to debug HTTP Native?
You should debug your application connect your phone to your laptop and
Open your Google Chrome Browser
Go to Inspect (Ctrl + Shift +I)
Go To More Tools enter image description here
Open Remote devices and inspect your device
For more information click here
Thanks
You wont see native http calls log to the browser since they are called native from the device and never are called from the browser, but if you are debugging while connected to xcode, the xcode debugging output should give some information about your native HTTP calls success and failure.
Following #vd_virani answer, here is a quick link to inspect a device from Chrome
chrome://inspect/#devices
Plug your device via USB, then copy & paste this link in your Chrome address bar like a website.
How can I see error messages when running a Chrome packaged app? I've been running the app in the browser and using DevTools but this technique has it's limitations.
If you need to inspect app windows, you can reach them at chrome://inspect/#apps
Or, as Daniel mentions, use the Developer Tool app.
General Chrome Debugging
By opening
chrome://inspect/#apps
you may debug all Apps and Extensions.
You may also like the official Google Chrome Apps & Extensions Developer Tool
Debugging Chrome Extensions
As described in the chrome developer Tutorial you can activate the developer mode within the settings. Afterwards an inspect popup option is avaialbe when you right-click an app-icon.
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