When I resize my browser on my mac, on any resolution it looks well, but when I'm on a older tablet of mine, the website looks so messed up.
What is the best way to capture that device info? So I can replicate on my machine? I still don't know is it a javascript or a css issue. How is this usually done?
Edit:
By the info I got so far, there is no tool that you can install on your device. Which would act as some kind of console where you could see, debug and interact errors like a js resource didn't load, unknown css property or any other error that you're able to see as a web developer in a chrome console for instance
Answering the question from some of the comments, so it's more visible to other people having the same issue :
You should be able to use remote debugging. You will need to use Safari on the desktop. I am not sure if you are restricted to Mac however... moduscreate.com/enable-remote-web-inspector-in-ios-6 The same also exists for Chrome/Android devices and developer.telerik.com/featured/… – xxcezz
Try modern.ie/en-us/tools not sure if it's useful. http://caniuse.com .
my best guess that would be iPad 1, running IOS 4/5. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Related
I just published an app at http://ineedaprompt.com. It relies on front-end Javascript.
It seems to work on all browsers except the somewhat-outdated version of Chrome (v. 42.0.2311.111) I have on my somewhat-outdated Android smartphone. I've never gotten USB debugging to work with my Mac, and so don't seem to have a way of debugging the Javascript for this particular browser.
This may very well be an edge case, but I'm unsure -- I think the odds are if it fails for one browser, it will fail for others.
Are there any recommendations on how I could debug this? Or might some kind-hearted person be able to check their console tell me the reason this JS is failing?
The source code is available at the links below. Since I cannot access the console, I have no idea which lines are causing the error, and so cannot include any code in this question.
https://github.com/RobertAKARobin/inap-node/blob/master/public/ineedaprompt.js
https://github.com/RobertAKARobin/inap-node/blob/master/public/index.html
Ran into a weird one now.
On FireFox 30.0,when I include weinre in my html 5 page (for a hybrid mobile application), window.sessionStorage.setItem is suddenly not a function any more (or does not exists or something).
Remove weinre script, and all is fine again.
In the actual Android web container on the mobile device, it seems fine again.
So, not a train smash, but very annoying.
Probably best to create an issue on Jira, if this is still a problem.
I'd be happy to do that for you, but would like to have a better description of the problem; was an error thrown when you tried to access sessionStorage? Or did it happen even though you never tried to access sessionStorage?
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
How can I know if a Javascript exception occurred in a PhoneGap application?
I'm using HTC Desire Z and Android 2.2.
I don't see anything in logcat and jsconsole.com does not seem to support exception transporting.
Using console.log to trac every exception is bit hard. Is there a solution for this or is this just how it is with Phonegap?
EDIT: It seems to be possible to capture at least some of exceptions with some really hacky wrappers. This some times can put you on the right track, but probably has some serious side effects and it won't certainly capture all the exceptions.
Uncaught exceptions should show up in logcat - at least the message and line number.
Otherwise you don't have many options. window.onerror does not work in Android AFAIK.
From a recent post from the PhoneGap blog:
It’s a mobile browser! How am I
supposed to debug it! The answer is
that you aren’t. You are going to
debug your HTML, CSS, and JavaScript
app in a desktop browser. The trick is
to remove any dependencies that you
have on PhoneGap before debugging.
http://www.phonegap.com/2011/05/18/debugging-phonegap-javascript/
Only if the desktop browser would work exactly like the mobile one...
Is your question about logging the exceptions or about debugging them during development?
I'm not sure about the best way of logging them, but to debug them you can use Weinre.
I just wrote about Weinre on another very similar question ( https://stackoverflow.com/a/9252262/172973 )
Basically 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/
I'm writing a Firefox extension that needs to know what the username of the currently logged in user is in Windows, Mac, or Linux. So if I'm logged into my machine as "brh", it'll return "brh". Any idea how to do that from extension JavaScript?
Firefox extensions play by different rules to normal JavaScript running in the page: finding the current user is absolutely possible.
Open your Error Console (in Tools) and enter this:
Components.classes["#mozilla.org/process/environment;1"].getService(Components.interfaces.nsIEnvironment).get('USER')
The environment variables Firefox was started with are available through that NsIEnvironment XPCOM component.
You may have to customise this per platform. If all else fails, you might be able to create an NsIFile in ~ then look at its .path; I'm not sure if shell expressions are honoured there, though...
The flagged correct answer works fine. I use this in our extension on Firefox 38. I also use events so that the page can communicate with the extension and retrieve windows properties from the extension.
getWindowsProperty: function(prop){
return Components.classes["#mozilla.org/process/environment;1"].getService(Components.interfaces.nsIEnvironment).get(prop);
},
Don't think that's possible, seems like it would be a security hole if it were.
Yea, not possible... Javascript runs in a secure enviroment, and all FF extensions are javascript so you wont be able to be doing much interaction with the OS... but ill stick around to see if someone knows a way(it would be VERY cool...)