i have built a HTML5 web site (or rather webapp as you wish) and it works fine in Chrome and firefox. I would say the only thing out of the ordinary is, that it uses
Google Closure in some parts (the issue persists in the simplest, non-optimized mode)
HTML5 canvas for 2D drawing
Now I was curious whether it would run on my Galaxy Tab Tablett and indeed it does. I was able to set up the remote debugging facility https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=de and debug my code to get rid of a few things that were not working properly. However I notice that android-chrome regulary crashes while I use my app. The console in my desktop browser then complains about websocket being closed (thats why I suspect it really is a problem of the tablet side).
I would like to know what makes my website crash and am a bit flubbergusted that my HTML/js site can crash a browser like chrome so easily. I would have thought that it should be more stable than that.
Now as I would like to have an "entry" point into debugging the issue:
is there a crash log of chrome for android that I can inspect somehow?
can I somehow make it (chrome or android in general) more verbose on error messages?
There are a couple of things that you can do:
chrome://crashes will list the crashes that it has caught when a tab crashes - you might need to turn on crash reporting in the settings. You won't be able to fix it but you will be able to report it us so we can see if it is an issue.
Use logcat and see if there are any specific issues in the tracing output, such as an out of error message.
Related
I’ve been developing a game which uses WebGL for rendering, and while on PC I get no crashes, on Android/IoS devices I get random crashes during gameplay.
I don’t see any particular areas that would cause crashes, however it still does.
Considering the conditions and frequency that it occurs, I’m thinking it could be a memory leak or allocation failure, but I can’t find a way to analyze this for sure.
I’ve tried changing browsers, so on Chrome/Firefox/Safari it crashes, but on Opera or Armorfly it doesn’t. Additionally, according to the browser the symptoms are different.
I’m using textures (about DreawCall: 70~100, createTexture: 120~200) which draws over 500MB of VRAM, so I’m also thinking it could be that the GPU’s garbage collection isn’t doing its job in time.
The problem is that I can’t find any sort of values or logs anywhere to help me diagnose the problem.
I’ll list the symptoms more closely here:
On Android, while using Chrome, on the Android Debug Bridge’s logcat the error does not show up in the log.
On crash, no error codes or anything appear on the screen.
When I try to remotely debug it using Developer Tool on my PC, again no errors appear in the console.
Similarly, when using IoS and Safari, nothing in Instrument’s log.
So here are my questions:
In this situation, how am I meant to debug and find the problem?
Is there anybody that’s had these sorts of problems? If so, how did you solve it?
Is there any advice I can be given that I can pay more closer attention to when developing the program?
Thanks
I'm having this weird issue when exporting my Unity 3D application to webGL. On my computer it runs fine (on Unity, that is) but when I put it online it gives me the Maximum Call Stack Size error on Chrome (firefox runs fine)
I did some research and most articles say it's because of a possible infinite loop on the code, I checked my code and there are no infinite loops (it would hang on firefox). So now I'm not sure how can I debug this. Can someone help out?
Update: I tried disabling objects from the scene, and even with an almost empty scene with no C# code running, it will still return this bug.
I had this error. I was able to fix it by just refreshing the browser cache. Ctrl-Shift-R wasn't enough on Firefox. I had to go into network console enable "Disable Cache" there.
Thanks #slaw. It did not work for me by refreshing, but when I opened it in an Incognito mode, the error was gone.
Using latest Unity 2018.1.0f2 Personal this was happening. File --> Build Settings --> WebGL --> Player Settings - select WebGL Build. Then on the inspector tab changed the Api Compatibility Level from 4.x to .Net Standard 2.0.
All working now.
Error in Chrome
Uncaught RangeError : Maximum Call Stack Size Exceeded
Error in Firefox
Too much Recursion.
I'm trying to follow these instructions for debugging android javascript.
I am aware of How can I debug javascript on Android?, but it's not clear to me how (or if) I can hit breakpoints - either using Chrome on the Android device, or the Android browser.
I can see and 'inspect' the device OK:
But breakpoints don't get hit, nor can I see line numbers on the errors in the console:
Between these two problems, I'm not getting much useful information from the debugging experience! I have tried going to 'about:debug' in the android browser, and do see the debug options appear.
I will add that the js I am debugging works fine in the latest Chrome on the same Android device.
First off, it seems like there are a bunch of syntax errors that may be preventing mustache.js from executing at all - see if you can take care of those first.
I'd try setting a breakpoint on the next line down - line #9 - to see if anything in that IIFE is running at all.
Assuming you are using a module bundler (such as Webpack) in development (based on port 8080 in your screenshot), most likely the code you're trying to debug is executed via eval. In which case by the time you can see it in the devtools, it has already run.
You can either use the debugger statement in your code, or running in production mode - where there's a real script file being executed. In both cases, you should attach the remote debugger first, and only then navigate to your page (or refresh it).
I have now tried the same thing again, and this time didn't experience the problem. Unfortunately I can't put my finger on what the problem was exactly, as due to my dev machine dying I am running a new windows 10 installation, and potentially a different version of the Android SDK and ADB. The phone and android browser haven't changed.
Anyway, I can now set and hit breakpoints as I'd expect:
I also get better error descriptions and line numbers:
FWIW, the only problem that needed fixing was changing some 'let' declarations to 'var'.
I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.
I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.
Thanks for any ideas.
Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.
But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!
Update:
By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:
weinre is Web Inspector Remote. Pronounced like the word "winery". Or
maybe like the word "weiner". Who knows, really.
For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.
Have you tried Firebug Lite?
I haven't used it on the iPad, but I don't see why it wouldn't work.
I'd probably set a conditional include based on if a query param is set - for instance (php)
<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>
Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
You can also use Firefox's built in WebIDE with Valence
Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"
[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
[3] https://developer.mozilla.org/en-US/docs/Tools/Valence
There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.
If you have an Apple Mac computer, you can connect it to your iPad.
First you must ensure that you have the Web Inspector enabled ("Settings > Safari > Advanced" and turn on "Web Inspector").
Then connect your iPad to your Mac via an USB cable.
After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.
Source of images and original information:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.
You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.
I'm not a Windows Phone developer, and I want as little to do as possible with anything related to Microsoft. Nonetheless, I need to get my mobile web app running properly on Windows Phone 7. What debugging tools are available for the platform? Something like the Webkit developer tools or Firebug would be ideal, either from the phone itself or more likely, remotely debugging from my computer.
If such a thing doesn't exist, I'd settle for being able to read Javascript error messages, and view the contents of variables using alert() or similar. At this point, all I know is that my JS is failing: I don't know where or why, let alone how to fix it.
My dev computer is running OS X, and I'd really like to be able to use these tools from OS X if possible. Assuming that debugging tools exist (which I really hope they do) are they designed for Windows only? If so, does anyone know how well they would work with Wine or similar?
EDIT: I have a physical Windows Phone 7 device, so I can use that. However, alert() doesn't seem to be working, which is why I'm posting this question. Does alert() normally work on the WP7 browser?
You'll likely find the Mobile Perf Bookmarklet to be the easiest all-in-one tool for testing any mobile device.
Works well on the iPhone/iPad/Samsung Galaxy Tab in my testing so far.
Quote:
It displays a menu with links that load other bookmarklets including Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, and Zoompf.
Unless you have a Windows Phone 7 device, you will need to run Windows in BootCamp and install the Windows Phone Developer Tools in order to test in IE on the emulator. I don't know about Whine, but I ran into major problems trying to test in Parallels - so based on my experience, I suggest keeping it as simple as possible.
There is no console in IE on the phone, so you will need to use alert, like you suggested, or just write text to a div on your page as a custom console.
If you really want to code in OS X (which I definitely understand), using a separate machine for testing IE in the WP7 emulator is going to be your best bet.
EDIT: I just tested alert and it did work fine on my Windows Phone. My guess is that a syntax error is preventing it from calling.
The following may be interesting
Simple IE debug tool for Windows Phone
Supports
Html traversing
Html node styles, properties, metrics
Reading console output
Executing js on device side from console (including intellisense)
Dynamic script injection - ability to debug live sites
Not supported
js breakpoints
Just wanted to add a note to say that full JavaScript debugging is possible now with Windows Phone 8.1 and Visual Studio 2013 Update 2. Full details are available at:
http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx
I realize that this doesn't help the versions referenced in the original question (WP7), but I'm hoping this will help people who may find this question and are running a more recent version.
Something that has worked for me, is to test my mobile pages through the Windows Vista built-in Internet Explorer browser.
It comes with a script debugger ( which you have to enable in Advanced Options tab through the Internet Options menu ), and it seems that it gets really close to the Internet Explorer Mobile implementation.
Another tip would be, that, instead of using window.alerts, you can also use document.write or set output to a div content.
I'm using this hack to have console.log send info back to the server (it uses window.fetch, which I'm polyfilling, but could use xhr instead) https://gist.github.com/wheresrhys/bf93057ee3a594454582