Related
This was working fine up until yesterday. Now when I connect my Android device for USB Debuggers. Chrome is no longer display my app.
Now the popup window shows HTTP/1.1 404 Not Found.
Looks to be connecting fine and the app runs fine on my Mobile Device.
Solution was to access through chrome://inspect/#devices
Then select the "inspect fallback" option.
This is because the remote browser was newer than the client browser.
Use VPN in both mobile and your computer.
It is maybe because of google restricted this feature in your country.
This problem just showed up on the latest released version of Chrome 72.0.3626.76 (will they ever add a regression test?).
None of these answers were completely satisfying.
I was stuck with the same version on both Android and my desktop so "inspect fallback" is not showing on the UI.
I tried to uninstall chrome from Android but that option is not available in Android 8.1?
Here is how you can workaround those issues and get back to debugging.
Workaround:
The objective of this workaround is to get the desktop version different than the device version so that you can see the inspect fallback option.
disable chrome updates. Instructions for Windows
uninstall latest Chrome on desktop.
install previous version: e.g. 71.0.3578.80 (using slimjet)
Open chrome://inspect/#devices url and choose inspect fallback instead of inspect.
Debugging restored!
Workaround 2:
As Asaf points out in the comments another way to get the versions to be different is to use the EDGE browser which is now based on Chromium. As long as the versions are different then the inspect fallback option should show up.
PS: I think this bug is still active in the canary channel so it may be a while before it gets fixed.
Here is the chromium bug.
UPDATE 3/6/2019
Looks like this is fixed again on version 72.0.3626.121 (maybe earlier builds)
I did not have a fallback option at chrome://inspect/#devices, but I was able to fix it by uninstalling chrome updates on my Android device, as this is caused by the most recent update for android's chrome.
Go to Chrome's App Info, press the 3 dots in the top right corner and then click uninstall updates.
Open https://chrome-devtools-frontend.appspot.com. If it returns 502, then it is maybe a host error.
I have suffered this problem, cause the Google API has been blocked. If you are in mainland China, the GFW may be the reason. So, using VPN may be helpful.
In my case it was because port 8080 was not enabled
open link chrome://inspect/#devices
select "Port Forwarding"
add "localhost:8080"
Just turn on your VPN if you are in a restricted country.
And don't tunnel your whole device so you can debug your web app over the network. Just use a chrome extension VPN.
Got around this by disabling Chrome on my phone, the latest version has a bug. This forces your app to use the webview version that shipped with your phone.
i have updated to the latest desktop chrome version and now it works. not having white screen anymore. my current version : Version 73.0.3683.75 (Official Build) (64-bit).
i forgot to note down my previous version so i can't
Solved the issue uninstalling Chrome updates on my phone by following answer above: pressing the 3 dots in the top right and then clicking uninstall updates.
Another solution is to use Chrome Beta instead of Chrome on your mobile device. It has the Inspect Fallback option on version 97.0.4692.20
If you live in Iran or a country that this feature is restricted , You better off using Firefox remote debugging , it misses port forwarding feature right now , but at least works like a charm.
For many people who still having this issue, if you are in your company's VPN/ Network try to connect directly to the internet and it will work.
For me it happened that our IP address were blocked by Google and any of google services were accessible.
I have a similar problem, where the inspect fallback link doesn't appear, if the host version is newer than the guest version. In my case, I'm using Vivaldi to debug another browser. However this still gives the above mentioned error:
HTTP/1.1 404 Not Found
Installing different browser versions is cumbersome and unncessary. In my current browser, break in the page chrome://inspect/#devices's inspect.js where it says:
const browserNeedsFallback =
isVersionNewerThanHost(browser.adbBrowserVersion);
Run the snippet:
isVersionNewerThanHost = () => true
And the inspect fallback link will appear again.
I uninstall chrome in my movil and work ok..the problem is the last update chrome in android
I found a solution. Don't need to downgrade you Chrome version. just remove a plugin. This plugin is for the VPN proxy.
Yes. Maybe the issue is caused by a plugin.
I had the same problem. I had to reset the phone to factory defaults.
now working. Android 6
I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It does on the iPhone.
How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that full version of WebKit produce the same results?
Update: Remote Debugging
Previously, console logging was the best option for debugging JavaScript on Android. These days with Chrome for Android remote debugging, we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debugging for more information.
Update: JavaScript Console
You can also navigate to about:debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.
Currently in Android 4.0.3 (Ice Cream Sandwich), the logcat outputs to the browser channel. So you can filter using adb logcat browser:* *:S.
Original Answer
You can use the built in console JavaScript object to print log messages that you can review with adb logcat.
console.error('1');
console.info('2');
console.log('3');
console.warn('4')
Produces this output:
D/WebCore ( 165): Console: 1 line: 0 source: http://...
D/WebCore ( 165): Console: 2 line: 0 source: http://...
D/WebCore ( 165): Console: 3 line: 0 source: http://...
D/WebCore ( 165): Console: 4 line: 0 source: http://...
Determining the version of WebKit
If you type javascript:alert(navigator.userAgent) in the location bar you’ll see the WebKit version listed e.g.
In Chrome:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2
On Android Emulator
Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
N.B.
Versions of WebKit that are not part of a Safari release have a + after the version number, and their version number is generally higher than the latest released version of WebKit. So, for example, 528+ is an unofficial build of WebKit that is newer than the 525.x version that shipped as part of Safari 3.1.2.
Try:
open the page that you want to debug
while on that page, in the address bar of a stock Android browser, type:
about:debug
(Note nothing happens, but some new options have been enabled.)
Works on the devices I have tried. Read more on Android browser's about:debug, what do those settings do?
Edit:
What also helps to retrieve more information like line number is to add this code to your script:
window.onerror = function (message, url, lineNo){
console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
return true;
}
The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) provides a nice way you can use to access the content of you webpage.
I use Weinre, part of Apache Cordova.
With Weinre, I get Google Chrome's debug console in my desktop browser, and can connect Android to that debug console, and debug HTML and CSS. I can execute Javascript commands in the console, and they affect the Web page in the Android browser. Log messages from Android appear in the desktop debug console.
However I think it's not possible to view or step through the actual Javascript code. So I combine Weinre with log messages.
(I don't know much about JConsole but it seems to me that HTML and CSS inspection isn't possible with JConsole, only Javascript commands and logging (?).)
Take a look at jsHybugger. It will allow you to remotely debug your js code for:
Android hybrid apps (webview, phonegap, worklight)
Web pages which runs in the default android browser (not Chrome, it supports the ADB extension without this tool)
How this works (more details and alternatives on the projects site, this was what I found to be the best way).
Install the jsHybugger APK on your device
Enable USB debugging on you device.
Plug the Android device into your desktop computer via USB
Run the app on the Android device ('jsHybugger')
Enter the target URL and page in the app. Press Start Service and finally Open Browser
You'll be presented with a list of installed browsers, choose one.
The browser launches.
Back on your desktop computer open Chrome to chrome://inspect/
An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.
debug away!
Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.
FYI, the reason why RaphaelJS doesn't work on android is that android webkit (unlike iPhone webkit) doesn't support SVG at this time. Google has only recently come to the conclusion that SVG support an android is a good idea, so it won't be available yet for some time.
Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:
Enable USB Debugging on phone (Settings, about, rapidly tap build number, developer settings, USB debugging)
Open "Internet"
Navigate to 'about:debug' (you will see an error)
MORE menu > Settings > Debug > Remote Debugging
Attach phone to computer with USB cable
On the phone, in the Internet web browser, open the site you want to debug
Open Chrome on computer
Navigate to 'chrome://inspect'
Click inspect on the browser tab you want to inspect
The Galaxy S5 devices shows in Chrome but the tabs only show after you restart. After restarting and attempting to attach, the mobile browser crashes.
Chrome has a wonderful feature that simply takes the actual Android Chrome contents (incl. inspection etc.) onto the PC screen...
Enable USB debugging on the device, maybe you also need to connect once via adb devices to trigger the "allow communication with..." dialogue on the mobile device,
connect the Android device to the PC,
start Chrome on both, and
then navigate to chrome://inspect/#devices on the PC.
Here, the tabs from the mobile phone Chrome are listed and can be inspected.
There's also a detailled manual on the net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome
(found that after adb logcat showed nothing from the browser)
Raphael is not supported on pre 3.0 Android browsers, that's what your problem is. They have no support for SVG graphics. It does have support for canvas though. If you don't need to animate it, you could render the graphics with canvg:
http://code.google.com/p/canvg/
That's how we got around this issue for rendering SVG icons in the default Android browser.
Put into address line chrome://about. You will see links to all possible dev pages.
The about:debug (or chrome:\\debug both of which say page cannot be found, but enable the Debug menu in the settings) when tried on Chrome or Opera on Android KitKat 4.4.2 on a Samsung Tab
If you have ROOT permissions on your device, you can view the console messages directly on the device. Use an app like CatLog to view the log output - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en This will let you view all logcat activity.
In Android KitKat/4.4.2, the browser console is output to the Chromium channel. You could filter by "Chromium" to get all browser activity (include browser's internal activity), or simply filter by "Console" to only see the Browser console log.
chromium [INFO:CONSOLE(3)] "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)
You can try YConsole a js embedded console. It is lightweight and simple to use.
Catch logs and errors.
Object editor.
How to use :
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
When running the Android emulator, open your Google Chrome browser, and in the 'address field', enter:
chrome://inspect/#devices
You'll see a list of your remote targets. Find your target, and click on the 'inspect' link.
My solution is (for the stock browser):
Stock Browser
"consolo.log" into the JS source code
Debug USB enabled
Android SDK
From Android SDK : monitor.bat
Monitor filter as the attached image
No one mentioned liriliri/eruda which adds its own debugging tools meant for mobile websites/apps
Adding this to your page:
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
Will add a floating icon to your page which opens the console.
"Kiwi browser" has the same tools as the desktop chrome browser and can debug locally in android - no usb needed.
Load the html file and choose "developer tools" in the menu. If you need to restart the debugging, reload the html.
Android studio provide all you need to see console.log and other. In logcat just filter to "/Web Console" and you will see your js logs...
If you get any issue you can add this plugin :
https://github.com/apache/cordova-plugin-console
If you are looking for non remote options:
On earlier and non rooted Jellybean releases a logcat viewer can be used if android.permission.READL_LOGS is granted via adb once.
On firefox, there is a console addon that reads and shows all app logs and there is also firebug lite.
You can try "javascript-compiler-deva" from npm library by running "npm install javascript-compiler-deva" command and then running the compiler.is using "node compiler.js".
It creates a server at port 8888. You can then hit "http://localhost:8888" and enter your JavaScript code and can see the result of any JavaScript code including "console.log" in phone browser itself.
It is also hosted in "https://javascript-compiler-deva.herokuapp.com/"
The local debugging/about:config... options seem not to work in 2020+ chrome/ff/.. browsers anymore.
Another browser with non-remote js console is
DevBrowser
or
WebInspector
(file picker not working)
You could try https://github.com/fullpipe/screen-log. Tried to make it clean and simple.
try "vconsole", maybe help you
I am developing a cordova Android application and want to remote debug it.
When I start my app on my Android phone thats connected to my Mac I can see the device and the inspectable app webview on Chrome's
chrome://inspect/#devices - page.
But whenever I click on the 'inspect' link a window opens and at once closes again.
I double checked the android:debugable-flag is set to true in AndroidManifest.xml application element and my device is set to be able to use USB-debugging. I use cordova version: 3.5.0-0.2.6.
Really don't know what went wrong.
Any help is appreciated.
I just found the answer today after searching the web again. I got to the following document:
Google remote debugging webviews
I just had to make sure I use:
Chrome Canary browser for debugging
instead of the normal Chrome browser. I test it and debugging works like a charme.
Just posted this answer for those which got a similar problem since nobody answered me.
I have a website which I hot on WinHost.com. In the past few weeks, I have found that 80% of the time, a page stalls while loading. That is, it never loads. It just sits there trying to load.
This issue never happens on my PC.
It does however, happen on my wife's phone too (Same network provider).
We both use Chrome, but it happens on all browsers.
I found a 'Phone Emulator' site, and have no such problems. It seems to load the mobile version fine. It only happens on my, and my wife's phone. The site is in development, so we're the only users.
Is there a way I can debug what is happening, on my phone? Like in the Desktop version of Chrome, I can F12 and see what's happening?
The site runs Asp.Net MVC4, with a Twitter Bootstrap UI.
Sure you can do it by using the latest version of Chrome.
https://developer.chrome.com/devtools/docs/remote-debugging
After connecting, just open the Inspector tool, and select Network tab in PC, reload the page to see what happen.
I found the easiest way was to share my phones internet connection, tether my laptop to it, and run Chrome, pressing F12 to get the network traffic.
I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It does on the iPhone.
How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that full version of WebKit produce the same results?
Update: Remote Debugging
Previously, console logging was the best option for debugging JavaScript on Android. These days with Chrome for Android remote debugging, we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debugging for more information.
Update: JavaScript Console
You can also navigate to about:debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.
Currently in Android 4.0.3 (Ice Cream Sandwich), the logcat outputs to the browser channel. So you can filter using adb logcat browser:* *:S.
Original Answer
You can use the built in console JavaScript object to print log messages that you can review with adb logcat.
console.error('1');
console.info('2');
console.log('3');
console.warn('4')
Produces this output:
D/WebCore ( 165): Console: 1 line: 0 source: http://...
D/WebCore ( 165): Console: 2 line: 0 source: http://...
D/WebCore ( 165): Console: 3 line: 0 source: http://...
D/WebCore ( 165): Console: 4 line: 0 source: http://...
Determining the version of WebKit
If you type javascript:alert(navigator.userAgent) in the location bar you’ll see the WebKit version listed e.g.
In Chrome:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2
On Android Emulator
Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
N.B.
Versions of WebKit that are not part of a Safari release have a + after the version number, and their version number is generally higher than the latest released version of WebKit. So, for example, 528+ is an unofficial build of WebKit that is newer than the 525.x version that shipped as part of Safari 3.1.2.
Try:
open the page that you want to debug
while on that page, in the address bar of a stock Android browser, type:
about:debug
(Note nothing happens, but some new options have been enabled.)
Works on the devices I have tried. Read more on Android browser's about:debug, what do those settings do?
Edit:
What also helps to retrieve more information like line number is to add this code to your script:
window.onerror = function (message, url, lineNo){
console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
return true;
}
The http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) provides a nice way you can use to access the content of you webpage.
I use Weinre, part of Apache Cordova.
With Weinre, I get Google Chrome's debug console in my desktop browser, and can connect Android to that debug console, and debug HTML and CSS. I can execute Javascript commands in the console, and they affect the Web page in the Android browser. Log messages from Android appear in the desktop debug console.
However I think it's not possible to view or step through the actual Javascript code. So I combine Weinre with log messages.
(I don't know much about JConsole but it seems to me that HTML and CSS inspection isn't possible with JConsole, only Javascript commands and logging (?).)
Take a look at jsHybugger. It will allow you to remotely debug your js code for:
Android hybrid apps (webview, phonegap, worklight)
Web pages which runs in the default android browser (not Chrome, it supports the ADB extension without this tool)
How this works (more details and alternatives on the projects site, this was what I found to be the best way).
Install the jsHybugger APK on your device
Enable USB debugging on you device.
Plug the Android device into your desktop computer via USB
Run the app on the Android device ('jsHybugger')
Enter the target URL and page in the app. Press Start Service and finally Open Browser
You'll be presented with a list of installed browsers, choose one.
The browser launches.
Back on your desktop computer open Chrome to chrome://inspect/
An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.
debug away!
Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.
FYI, the reason why RaphaelJS doesn't work on android is that android webkit (unlike iPhone webkit) doesn't support SVG at this time. Google has only recently come to the conclusion that SVG support an android is a good idea, so it won't be available yet for some time.
Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:
Enable USB Debugging on phone (Settings, about, rapidly tap build number, developer settings, USB debugging)
Open "Internet"
Navigate to 'about:debug' (you will see an error)
MORE menu > Settings > Debug > Remote Debugging
Attach phone to computer with USB cable
On the phone, in the Internet web browser, open the site you want to debug
Open Chrome on computer
Navigate to 'chrome://inspect'
Click inspect on the browser tab you want to inspect
The Galaxy S5 devices shows in Chrome but the tabs only show after you restart. After restarting and attempting to attach, the mobile browser crashes.
Chrome has a wonderful feature that simply takes the actual Android Chrome contents (incl. inspection etc.) onto the PC screen...
Enable USB debugging on the device, maybe you also need to connect once via adb devices to trigger the "allow communication with..." dialogue on the mobile device,
connect the Android device to the PC,
start Chrome on both, and
then navigate to chrome://inspect/#devices on the PC.
Here, the tabs from the mobile phone Chrome are listed and can be inspected.
There's also a detailled manual on the net: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome
(found that after adb logcat showed nothing from the browser)
Raphael is not supported on pre 3.0 Android browsers, that's what your problem is. They have no support for SVG graphics. It does have support for canvas though. If you don't need to animate it, you could render the graphics with canvg:
http://code.google.com/p/canvg/
That's how we got around this issue for rendering SVG icons in the default Android browser.
Put into address line chrome://about. You will see links to all possible dev pages.
The about:debug (or chrome:\\debug both of which say page cannot be found, but enable the Debug menu in the settings) when tried on Chrome or Opera on Android KitKat 4.4.2 on a Samsung Tab
If you have ROOT permissions on your device, you can view the console messages directly on the device. Use an app like CatLog to view the log output - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en This will let you view all logcat activity.
In Android KitKat/4.4.2, the browser console is output to the Chromium channel. You could filter by "Chromium" to get all browser activity (include browser's internal activity), or simply filter by "Console" to only see the Browser console log.
chromium [INFO:CONSOLE(3)] "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)
You can try YConsole a js embedded console. It is lightweight and simple to use.
Catch logs and errors.
Object editor.
How to use :
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
When running the Android emulator, open your Google Chrome browser, and in the 'address field', enter:
chrome://inspect/#devices
You'll see a list of your remote targets. Find your target, and click on the 'inspect' link.
My solution is (for the stock browser):
Stock Browser
"consolo.log" into the JS source code
Debug USB enabled
Android SDK
From Android SDK : monitor.bat
Monitor filter as the attached image
No one mentioned liriliri/eruda which adds its own debugging tools meant for mobile websites/apps
Adding this to your page:
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
Will add a floating icon to your page which opens the console.
"Kiwi browser" has the same tools as the desktop chrome browser and can debug locally in android - no usb needed.
Load the html file and choose "developer tools" in the menu. If you need to restart the debugging, reload the html.
Android studio provide all you need to see console.log and other. In logcat just filter to "/Web Console" and you will see your js logs...
If you get any issue you can add this plugin :
https://github.com/apache/cordova-plugin-console
If you are looking for non remote options:
On earlier and non rooted Jellybean releases a logcat viewer can be used if android.permission.READL_LOGS is granted via adb once.
On firefox, there is a console addon that reads and shows all app logs and there is also firebug lite.
You can try "javascript-compiler-deva" from npm library by running "npm install javascript-compiler-deva" command and then running the compiler.is using "node compiler.js".
It creates a server at port 8888. You can then hit "http://localhost:8888" and enter your JavaScript code and can see the result of any JavaScript code including "console.log" in phone browser itself.
It is also hosted in "https://javascript-compiler-deva.herokuapp.com/"
The local debugging/about:config... options seem not to work in 2020+ chrome/ff/.. browsers anymore.
Another browser with non-remote js console is
DevBrowser
or
WebInspector
(file picker not working)
You could try https://github.com/fullpipe/screen-log. Tried to make it clean and simple.
try "vconsole", maybe help you