See stored cookies or debug in browser - javascript

I have made a webpage that stores cookies to remember what ID a user has put in a scheme viewer. It works in desktop versions of IE, Firefox and Chrome. But when I try to visit it with Android or iPhone it doesn't work.
What I would like to know is how you see stored cookies or how you debug JavaScript/HTML/CSS. If I look at errors in desktop Firefox I get no errors for JavaScript and CSS.

I recommend you use the remote debugger built into the chrome for android app.
e.g.
Start adb with your phone connected via usb (usb debugging enabled)
Launch chrome, goto settings, developer tools, enable remote debugging.
On your pc in command prompt execute adb forward tcp:9222 localabstract:chrome_devtools_remote
Navigate to localhost:9222 from your pc for live interaction/console from your phone.
Source: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

well i believe that you can't quite view the cookies of the browser in android. are you sure you have cookies enabled? (menu>more>settings>accept cookies should be checked). or if you're using javascript to set the cookies, you'd wanna make sure javascript is also enabled.
to debug, all you can really do is get the cookies via PHP or javascript and print them on the webpage. if they're blank, you for sure know the cookies aren't there. if you wanna see if the javascript is being run at all, just put print a "hello world" to the page at the line above where you set the cookie. (same concepts for php, use an echo)
it's a little fishy that desktop works and not mobile. it could be the fact that mobile browsers aren't rendering the page correctly though this is probably not the case. i would try debugging first and see if your setcookie code is actually being called by with the mobile browsers
hope this helps!

For Android 2.2 or 2.3 you can try this:
Type about:debug in you url bar while on your page;
A javascript debug bar will be opened on top of your url bar;
Type in console.log(document.cookie) and hit evaluate > It should print the cookies
Bear in mind that the js debug bar on Android will only show once the web app logs something ( e.g. if a js error occurs or if you trigger it via console.log so you might want to trigger it inside your app to open)
For Android above 2.3 you have more debug options ;)
EDITED:
As per Zeb's answer check here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Related

Web app mobile version after deploy is rendering with bugs [duplicate]

An AngularJS application works fine on desktop, but is not rendering properly on mobile (actual code is showing). This is on an Android phone.
I would like to see what errors are showing in the console.
Is it possible to open JS console on chrome app on mobile (like it is on desktop)?
You can do it using remote debugging, here is official documentation. Basic process:
Connect your android device
Select your device: More tools > Inspect devices* from dev tools on pc/mac.
Authorize on your mobile.
Happy debugging!!
* This is now "Remote devices".
When you don't have a PC on hand, you could use Eruda, which is devtools for mobile browsers https://github.com/liriliri/eruda
It is provided as embeddable javascript and also a bookmarklet (pasting bookmarklet in chrome removes the javascript: prefix, so you have to type it yourself)
To use remote debugging first activate developer mode in Android.
In Android go to Settings, search build number, then click on it several times to activate developer mode
In Android go to Settings > Developer Options > Enable usb debugging
Connect to computer with usb cable
In desktop Chrome type chrome://inspect , then press enter
In mobile open url then check it, on this page on desktop chrome://inspect/#devices
The original answer doesn't seem to be valid anymore. From the current Chrome developer docs, these are the basic steps you need to go through:
Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
Select Enable USB Debugging.
On your development machine, open Chrome.
Go to chrome://inspect#devices.
Make sure that the Discover USB devices checkbox is enabled.
After that, open Chrome on your Android device (and confirm the USB Debugging prompt in case it pops up). Switch back to your PC and you should see the currently open browser tabs:
If your device tabs do not appear, you might need to trigger the USB Debugging prompt by activating file transfer on your mobile device.
Kiwi Browser is mobile Chromium and allows installing extensions. Install Kiwi and then install "Mini JS console" Chrome extension(just search in Google and install from Chrome extensions website, uBlock also works ;). It will become available in Kiwi menu at the bottom and will show the console output for the current page.
Edit 2022:
It's even better now. The console is built-in and available in the menu.
Please do yourself a favor and just hit the easy button:
download Web Inspector (Open Source) from the Play store.
A CAVEAT: ATTOW, console output does not accept rest params! I.e. if you have something like this:
console.log('one', 'two', 'three');
you will only see
one
logged to the console. You'll need to manually wrap the params in an Array and join, like so:
console.log([ 'one', 'two', 'three' ].join(' '));
to see the expected output.
But the app is open source! A patch may be imminent! The patcher could even be you!
I you only want to see what was printed in the console you could simple add the "printed" part somewhere in your HTML so it will appear in on the webpage. You could do it for yourself, but there is a javascript file that does this for you. You can read about it here:
http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/
The code is available from Github; you can download it and paste it into a javascipt file and add it in to your HTML
The Kiwi browser not only allows you to use Chrome dev tools but you can also view the page at the same time.
If you use Android split screen you can open a window and move the dev tools to a new window.
Use Kiwi Browser app
Allows you to install all chrome extensions as well as access dev tools (console, ...)
Or
to access and test all the consoles of different mobile browsers, you can use the following similar websites:
https://www.browserstack.com/
Remotely debugging Firefox is another option. the steps are mentioned here

Can one debug javascript on a samsung tablet's native browser

I am currently working on a HTML/JS application that will be embedded in an iOS and an Android app. Because the android app is not yet finished I am testing this on the chrome browser in Android. I fixed all issues there but when I open the same web app in the native browser nothing really works as expected.
So my question is : Is there a way to debug in a native browser on an android device?
In chrome this was pretty easy with remote debugging.
(Please do not advice me to use 'log' statements for debugging because that's not what I am looking for here)
And just to spill my guts : the Samsung Tablet's native browser is the only device that's causing me a headache!
Typing about:debug in the address bar of the native browser will toggle the 'Debug' options in the settings menu.
The 'Show JavaScript Console' option will allow you to see JavaScript errors in your webpage.
NB I believe the JavaScript Console will only be displayed if there is an error.
HTH
Nick.
The new Samsung Internet browser (I think you meant this browser with "Samsung Tablet's native browser") is now based on the Chromium browser and thus supports its remote debugging interface.
Enable USB debugging on your device as described here.
Then connect your device via USB (Oh, surprise!).
Visit chrome://inspect on your computers Google Chrome browser and you will be guided to create the connection:
Then you just have to click on the devices inspect link and an developer tools window will pop up.
More info like why there is an Samsung Internet Browser at all can be found here.
You can easily debug your web application with Web Inspector Remote (weinre).
Look at this post in order to find out how to install and use weinre.
I hope it will help you if this question is still actual.
If you have updated your device you can go to settings -> Debug -> 'Remote Debug Enable'
Once enabled you can debug the native browser just like you can debug chrome.
You can try vorlon solution too, it has a nice web interface & very easy to install
& It's free
But if you can't see clear console errors with volron, you probably want to use #Nick's solution, sometimes complex errors prevents even vorlon or weiner from catching them. So once you fix blocking these issues, probably volron will start catching them properly

Chrome blocking javascript on localhost

I'm working on developing a site on my local machine (Windows 7 Ultimate x64) using WAMP, running APACHE v2.2.22, PHP 5.3.13, and MySQL v5.5.24. I'm developing using Chrome v 22.0.1229.94. I've got quite a bit of javascript in the site, however, and Chrome is relentlessly blocking javascript from running on the page.
Clicking on the little 'blocked javascript on this page' icon in the address bar includes the dropdown that has "Always allow Javascript on Localhost" checked off, and I also have a JavaScript exception in Chrome's settings explicitly saying to always allow JavaScript on 'http://localhost'.
Cookies are being allowed, "Allow all sites to run JavaScript" is checked off, and I have no idea as to why Chrome is not allowing the JavaScript to run.
Overall, it's not imperative to the project that I figure out a fix as both IE9 and Firefox 16.1 are allowing JavaScript and I can utilize them. I am simply curious if there's anything I can do to fix this in Chrome, as I would like to continue developing in Chrome.
If you notice that JavaScript is only blocked when the console is open (as some are saying), chances are that you disabled JavaScript in the console settings.
Open the console.
Click the vertical ellipsis icon (or the gear icon on older versions) in the upper right and go to settings.
See if the "Disable JavaScript" checkbox is checked.
I have the same issue, but only when the console is open. When the console is closed, JavaScript loads fine on localhost. Makes it hard to debug things though....
I got around it by opening localhost in an incognito window.
You can give your local server a domain name, may be that would help.
Open C:\Windows\System32\drivers\etc\hosts in notepad
Edit that file add a new line at the end
127.0.0.1 mydomain.com
Save, now goto chrome and type in http://mydomain.com/ this should point to your local server.
Since you nolonger run on "localhost" may be chrome will let you pass.
Let's me know if that works. Good luck!

Debugging javascript on Android tablets/phones?

How do I enable the debug view like I can in Safari on iOS? I simply need to see if a Xoom that I'm testing a page on is generating javascript errors. I was trying to find how to enable the dev tools in the Android browser like I do for iOS but can't seem to locate it.
I've worked on an Android app in the past where the java developer set it to alert JavaScript errors - caught an extra bug that we didn't catch in the iOS version because of it. So, if you have access to the java layer, I'd check that out. I asked him what he did specifically and he said:
"There's a callback from the WebView class that lets me know when the JS code throws an error. I implemented that callback to display an android dialog."
There's two solutions other ideas on top of this that I use for debugging (ios/android). These are especially useful for embedded web views in games where you don't have access to the built-in console:
1) Weinre a still beta, but functional, remote debugger. It'll give you a faux inspector on your desktop that you can query / see errors on your remote device with. Has a whole dom inspector and anything. The guy that develops it is pretty responsive, too.
2) I write a javascript log function that hits my servers error log. Just tail your log file and you're good to go. My javascript function looks something like this:
function hlog(){
var s = Array.prototype.slice.apply(arguments).join('ΒΆ');
document.createElement('img').src = 'http://yourdevbox/debugger/?m=' + encodeURIComponent(s);
}
That way I can take any number of arguments.
My php page that recieves this request looks like this:
# ensure this can't be used in production
if (strpos($GLOBALS['HTTP_HOST'], 'devboxhostname') < 0) die(':(');
error_log($_GET['m']);
Hopefully in the future, mobile devs will have way better debugging tools.
Android doesn't (currently) have a WebInspector like Chrome/Chromium does.
You can still look at any console.log() messages fired under window.console in logcat.
Source: http://developer.android.com/guide/webapps/debugging.html
Also, whilst Firefox 4 is available for Android, Firebug currently isn't supported on the mobile version of the browser.
type about:debug into the url field and validate, a javascript console will then be available (same method to remove it)
a bit more on this page: https://android.stackexchange.com/questions/5999/android-browsers-aboutdebug-what-do-those-settings-do
The best you can do is use console.log() (like firebug), and then install a log viewer on your phone, filter based on browser, and you can see all the console messages. (source)
Try
Weinre: Web Inspector Remote / Watch demo
"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. "
You may have a look some other remote debugging tools: jsconsole or
Aardwolf
Opera mobile has remote debugging:
http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/
The Android default doesn't seem to have a debugger, although you can debug on chrome/chromium on a pc, which uses the same webkit rendering. (There's even a emulate Android option, but it doesn't have all the quirks of Android tablets, image/memory constraints etc.)
Firebug Lite is also a possibility:
http://getfirebug.com/firebuglite
You don't have to install any software or try to debug in your tiny mobile screen.
First enable USB debugging in your device in the "Developer settings" and then use your desktop chrome to connect and debug the mobile browser.
I found the easiest way is to enabled USB debugging on the phone/tablet and in your desktop navigate chrome to
chrome://inspect/#devices
Enable discover usb devices and then on the list of apps click "Inspect"
Voila! Remote debugging! Now you can debug your phone from the comfort of your desktop

Is there a way to enable the JavaScript Error/Debug Console for Safari within Android?

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.

Categories

Resources