Develop Reference

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

How to enable the Android monitor in React Native for checking logs?

I am new in react native. I want to see the logs of my react files. I am using android studio for using
react-native project and genny motion as a
simulator. Can you please guide me, how can I see the logs or enable android monitor in android studio?
Even I have already install react dev tools from Facebook for debugging the code: https://facebook.github.io/react-native/docs/debugging.html
but not able to get the particular solution
Already visit: How do you debug React Native?
How to do logging in React Native?
I have checked so many solutions but it is not working in android 6.0 versions
But not working please guide me, Thanks in Advance

If you're using window, you can try hit CTRL+M, else in mac CMD+D to open debugging menu. Once it open, choose REMOTE JS DEBUGGING, it will automatically open chrome browser for you to debug js error. Android studio debugging will work if you're connected on real device.
Eg. of Debugging Menu
I've found out the answer for genYmotion from How do you debug react-native?. Don't know whether it'll work for you, but worth for try.
For an Android App, if you're using Genymotion you can toggle the menu by pressing ctrl + m, but you may have to enable it in the menu by :
Untick untick widget
click on debug in chrome

Now i have resolved the issue with these above comments you can click
Ctrl + D and then click Ctrl + M for fetching the debugging contents
Then Run below command for checking logs
React-native log-android
with this you will be able to see the console logs in android studio terminal log panel.
But before this you need to run command:
Npm start
for checking latest changes by fetcing bundle directly in the simulator
Thank you

Instead of using simple console.log command
Use Reactoron for Logging Data
Here is the link:
https://github.com/infinitered/reactotron
Best thing for log in React Native.

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

How to see the javascript errors of PhoneGap app in Xcode?

I want to debug my PhoneGap app in Xcode, but its Console can not show javascript errors.

The most elegant way to view and debug JavaScript errors in your Cordova/PhoneGap App is by attaching the Web Inspector from your Safari browser to the Web View in your iOS App (but, like Tom Clarkson already mentioned, you will need at least iOS 6).
On your iPad or iPhone use the Settings App to enable Web Inspector in the Advanced Settings for Safari
Connect your device to a Mac via USB (it will then appear under the Develop menu of Safari)
Start your App
Navigate to the Web View you want to debug
On the Mac, from the Safari Develop menu, select the name of your device and the App (its HTML-page), from its sub menu
A Web Inspector window will open, enabling you to browse the DOM, set breakpoints etc.
Apples documentation on setting this up
A thorough third party tutorial
Alternatively you could connect Chrome’s Web Inspector to iOS devices after installing iOS WebKit Debug Proxy. This also opens up the ability to do the inspection from Linux or Windows.
Remote access to your iOS’s HTML, CSS and JavaScript has gotten even more flexible nowadays because you can install the RemoteDebug iOS WebKit Adapter on top of aforementioned Debug Proxy. Because this adapter translates the WebKit Remote Debugging Protocol to the Chrome Debugging Protocol, these (on all their supported platforms) become available as alternative debugging and inspection tools:
Visual Studio Code
Chrome DevTools
Mozilla Debugger
BTW, remote debugging with the Safari Web Inspector works even in combination with the iOS Simulator.
Minimum version of Desktop Safari per iOS version
For each version of iOS you will need a specific minimum version of Desktop Safari in order to use remote web inspection, see the list below.
iOS 6
Safari 6+
iOS 7
Safari 6.1+
iOS 8
Safari 7.1+
iOS 9
Safari 8+
iOS 10
Safari 9+/10+? Please comment; always try Safari Technology Preview
iOS 11
Safari 11+
iOS 12
Safari 12+

Paste the following somewhere near the start of your document so that it gets executed before any of your other JavaScript.
<script type="text/javascript">
window.onerror = function(message, url, lineNumber) {
console.log("Error: "+message+" in "+url+" at line "+lineNumber);
}
</script>
And enjoy viewing details of your Javascript errors in the Xcode console window.
UPDATE: The above technique will log errors such as undefined variables. But syntax errors such as missing commas will still cause the entire script to break without logging anything.
Therefore you should add the following to the start of your onDeviceReady function:
console.log('Javascript OK');
If you don't see "JavaScript OK" appearing in your log window when the app launches, then it means you have a syntax error somewhere.
To save hunting for missing commas, the easiest thing is to paste your code into a Javascript validator such as this one:
http://www.javascriptlint.com/online_lint.php
and let it find the error for you.
Hopefully that takes some of the pain out of debugging.

Note that with 0.9.2 (released today), console.log has been standardized across the platforms for logging (with debug.log deprecated).
There is a function that is available on the desktop WebView that is not exposed in the iOS UIWebView that will catch all errors (I'm trying to hack that functionality into a plugin, which uses private APIs, but the plugin would only be for development), but for now do what Kris suggested above and put try catch blocks on code and use console.log
To quickly catch possible syntax errors, when developing I have the page loaded in desktop Safari and quickly refresh it with the webkit error console viewable.

debug.log will send messages to the XCode console in Phonegap (allowing you to either log the result of an exception or do some debugging), however, you are correct that you have to debug other javascript errors in Safari (either on the desktop or on the iphone with Debug Console turned on). I have yet to find a Javascript error, that was caused by running on the iphone and wasn't present when debugging with the console turned on in Safari (though I know there are a few differences between the WebView and Safari on the iphone).

I just came across Weinre
It's a remote javascript debugger for phonegap. You can either setup your own Weinre server, or use the one at http://debug.phonegap.com/
It seems to work well - very impressed so far.

If you use iOS 6, you can simply attach the safari web inspector (on the develop menu of desktop safari) to your app and get full javascript debugging.
There are a couple of areas where it is a bit limited - startup errors and plugin calls - but it works well for pretty much anything else.

For making javascript debugging work in Xcode I would take a look at the following.
http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-using-xcode-console/
As as far as additional troubleshooting goes...
To start with you could run the app in safari on you pc and utilize safari's debugger (or chrome as both are running similar rendering engines). This won't hit on the advanced logic errors and many of your api issues but it at the very least should help with troubleshooting many issues (basic javascript, HTML5 etc....).

To view all errors in javascript console, I agree to use this event listener
<script type="text/javascript">
window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>
However, unless you have the cordova plugin installed, it wont show on XCodes "console". Go to your project folder and type this:
? cordova plugin add cordova-plugin-console
This will allow the javascript command 'console.log('some string') to show on XCode.
Note you will need git, etc... but if you are editing your phonegap project in xcode, you will most probably have it!
PS Make sure you put the cordova.js script plug-in before any use of console.log
<script type="text/javascript" src="/cordova.js"></script>

Put this in the beginning of your index.html
<script type="text/javascript">
window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

Here's a simple way that worked for me:
cd to the directory containing your index.html file in the terminal
Start a http server using python by invoking (I used python 2.7):
python -m SimpleHTTPServer
View the page in safari by entering the address of the HTTPServer in a browser, for me the URL was:
http://0.0.0.0:8000/
Open developer tools:
In chrome this is alt+command+i. View the console tab, may need to refresh the page.
In Safari: Safari --> Preferences --> Advanced --> check "Show Develop Menu". Develop menu --> Show error console (or alt+command+c). Refresh the page. Hitting CTRL+5 opens the issues tab.

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.