I'm trying to enable the JavaScript Console to debug a webpage in the stock Android browser on a Samsung Galaxy S4 running 4.2.2.
On the S3 I just type in about:debug in the address bar and it comes up but it doesn't work on the S4, it seems to do an autocomplete for chrome://debug.
Firstly it would be great to know how to get the console open and secondly why would Chrome's autocomplete be coming up for the stock browser?
Thanks
I don't know how to activate this console.
But I have used a tool that can allow you to remote debug any browser with limited changes to your web page (only add one script).
It is VorlonJS and you can find demo here: http://vorlonjs.com/#demo
try this link remote debugging chrome.
Well if are you developing on android greater than 4.0.3 you can type adb logcat and you would be able to catch your console.log or errors.
Or if you want chrome enables mobile screen to test the view.It depends if you are testing the functionality or the graphics
Related
I'm trying to use Chrome's support for remote debugging with my Android device. I've been successful doing this many times, even though it is a bit tricky to setup up.
(I need 'port forwarding' and 'virtual host mapping' so my device can access domain names on my local server.)
The problem is that (today) chrome://inspect shows the tabs on my device for only a second, then hides them, then shows them again, then hides them...
When Chrome hides all the tabs on my device, the following message appears:
Pending authentication: please accept debugging session on the device.
Bad Blink
Good Blink
I see no notification on my device that I can 'accept'.
Even stranger, if I am quick to click on my host, I actually seem to be able to able to use the dev tools for the device like in previous successful situations.
Why is chrome://inspect blinking and how can I fix it?
My setup
Device: Android 5.0 Galaxy S4 for AT&T, with Developer options enabled.
Device's wifi settings require Proxy, with info for Charles running on host.
Device connected via USB.
chrome://inspect has Port Forwarding enabled.
Chrome: Version 44.0.2403.157 m.
Android bridge performed by starting Android Studio (version 1.3.1).
Thanks to #SOreadytohelp for the helpful comment.
I borrowed this from the chromium bug report:
Downgrading Android SDK Platform-tools from revision 23 to revision 21 will solve the issue
Same behavior here: neither Galaxy S4 nor Galaxy S6 Edge with Lollipop were available on the chrome://inspect tab. I develop an Ionic/Cordova app and downgrade isn't an option. But if you download latest version of Chrome Canary the device is available to inspect and I can debug again.
You just have to upload your chrome for android, and it will work.
I also came across this problem, but as I updated my chrome for android, the problem got sorted out and now it is working fine.
I am creating a purely browser based app - HTML and JavaScript.
I do not have an Android IDE installed (nor one for iOS) - and would prefer not to have to install one and perform remote debugging.
Developing on my PC, I use the Chrome browser and the developer tools to view the JavaScript console in order to debug.
How can I do that on an Android tablet (or, later, iOS)? I prefer a purely browser based solution, but could accept an Android/iOS based app.
Try https://github.com/liriliri/eruda
All you need to do is add this snippet on top of the page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
And you get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Just released for iOS, Chrome 73 now supports the option to see console.log.
If you’re a website developer, you can now view JavaScript console
messages. Navigate to chrome://inspect to enable, then perform desired
actions in another tab. Switch back to the same chrome://inspect tab
to view any printed JavaScript console logs.
see here in "What's New" section or in "version history" 73.x version.
For Android you can use remote debugging through chrome as described here
I'll summarize/rewrite the steps (for browser based debugging) here in case the link ever goes down.
Requirements:
For browser tabs: Android 4.0+ and Chrome for Android
A USB cable to plug in your Android device
Chrome 32 or later installed on your development machine
Set up:
Enable USB debugging on your device.
Navigate to chrome://inspect/#devices on your desktop Chrome browser. (Alternatively, to get to the same screen, you can select Chrome menu > Tools > Inspect Devices)
After connecting, you may see an alert on the device requesting permission for USB debugging from your computer. Tap OK
Chrome should now display the connected device
Open up chrome on your Android device and navigate to the page you want to debug/inspect. The page should show up on your desktop browser and you should be able to inspect it.
If for some reason you have an older version of chrome and cannot upgrade. There is a plugin that you can install to accomplish the same thing.
I was searching for a while for something like this. Firebug Lite used to be an option but has been abandoned. Before discovering eruda (as mentioned elsewhere in this thread), I developed my own open source console. It's pretty light on features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
Guys I build a website and when i am accessing it from the android browser(Default) A script that is very important on the functionality of my website is not being displayed. But when I am accessing it from the android google chrome browser the script is being displayed as I was expected to see.
My site is responsive, it adapted to the screen of the user.
I am using galaxy note 2 and the android version is 4.3.
I was thinking to build an android application such as a browser that is going to be always fullscreen and locked on my site but i do not what google chrome browser has and making my website as I want it to be.
Any help?
I'm not sure what you mean by Android Browser (default). Is there a Samsung Browser already preinstalled on the phone that isn't Chrome?
My guess, off the top of my head, is that JavaScript is disabled on this other browser. If you were to create your own browser with an Android WebView, JavaScript is disabled by default and must be manually set to true.
A quick Google search for 'Samsung Note JavaScript' doesn't return anything readily apparent, but here are a few different Samsung Models with directions on how to enable JavaScript on their browsers. I would imagine the process is similar for the Note 2.
http://support.t-mobile.com/docs/DOC-6782
http://www.droidista.com/2014/06/enabledisable-javascript-on-samsung.html
http://www.att.com/esupport/article.jsp?sid=KB117209&cv=820#fbid=omMGs_GnNUf
we are shipping a Cordova WebApp for tablets with minified source using uglify2-compressor via grunt-contrib-requirejs. We generate source-maps for debugging which work flawlessly using the chrome desktop browser via remote Debugging on a KitKat Android Tablet.
Now we like to send error reports from our customers to our server. The Android WebView does not seem to care about our source maps. Therefore we get error message like "line 1, char 1231231" - not very helpful...
The Question is: Is it possible to use source-maps with the Android (and iOS) Webview maybe using a Cordova plugin or do we have to wait for an update (Chrome and Firefox Desktop are able to parse the maps...) and ship un-minifies code so that we are able to get the line number of the occurred error?
From Chromium discuss topic
DevTools downloads source maps using the front-end browser, not the one that runs the inspected page. So file://android... is never going to be accessible. You need to point to the files on your development box instead.
I'm developing a JavaScript application that needs to run on the Google Android Phone OS. Is there a way to enable the JavaScript Error/Debug console within Safari on either the Android Emulator or an actual device? If so any instructions on how to do so would be appreciated.
It looks like, with the Android 2.0.1 SDK you'll need to filter on "browser" instead of "WebCore"
A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:
adb logcat WebCore:V *:S
Not quite the same as a full debug console though.
On Android write about:debug on the address line when the current page is the page you want to debug. you will get access to the console.
I know your question is about Safari, but you might want to look into using Chrome instead. You can now use Chrome's desktop developer tools to debug and profile apps on your Android device.
Here's how:
On Android Chrome, go to settings -> Developer tools and check "Enable USB Web debugging"
On the desktop, run adb forward tcp:9222 localabstract:chrome_devtools_remote
Now on Desktop Chrome, navigate to localhost:9222.
You should see a list of the pages you have open on your phone. Click the one you want to debug/profile.
Detailed instructions are here
I have discovered that you can get this debugging information on the phone itself, without needingn to use adb or plug it into a computer, just download a log viewer.
Check the link for more info.
You can view the log and much more with weinre
From the Weinre docs
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.