How can I debug a Responsive site in Blackberry Q10 device, I don't have the device, but someone reported an issue with the menu in BlackBerry Q10, now I Can't debug it until I see the issue and inspect the HTML/CSS to see what is the problem.
I want to be able to view a website exact way how it will look in BlackBerry, I am on windows 7, and I have tried Chorme Emulator, Also download two simulators for BB, but it didn't work.
Please advice.
It is possible to download and install a BB10 Simulator that should run in your Win 7 environment and then you can test directly. That, in my opinion, is the best way to test.
You will need to install a VMware solution and run it as a virtual machine. But I think the documentation explains this process quite well - you will find it all here:
simulator
If you do have problems with this, then please give us something more than "it didn't work". If you look at the documentation, you will see that it should work, and it works on my Win 7 system, so I suspect there is a problem with your system or installation rather than the Simulator itself. But "it didn't work" does not give any idea where to start to help you with this.
You wont be able to inspect the HTML/CSS on the device as it is highly unlikely for you to be able to view the source. Your best option is to find out what mobile browser it is running and then try emulating it in the same resolution.
It looks like the blackberry 10.2OS default browser uses web kit so a browser that runs on the same engine should display the same things.
The Q10 resolution is 720x720 so try to emulate a web kit browser in that resolution and you'll be as close as possible without having the actual device.
If your still showing no problem, then i guess you'll have to find yourself a q10 to test it out on or ask the user with the problems with a full detail description of the problem and a picture to go with it
Related
I have just completed a new Shopify website and used mainly Mozilla Firefox to put this together. I have been told by the client that the site doesn't show up properly in Chrome and Safari but when I have checked this on my 13" laptop they both appear fine on there and I was just wondering if anyone can give me any tips on how I can ensure that the site is working on all common browsers without having any issues.
Would appreciate any tips as I know there are paid websites to do this but just wondering if there is anything else that I can do to get this fixed.
If you to the safari developers "dropdown" in the status bar the is an option called "User agent" (the second one) from there you can "change" the browser.
Disclaimer: never actually used this function.
I believe that the best way to handle this would be to download and install all browsers to test.
There is a free service from the Microsoft dev site that gives you screenshots from a couple of different browsers and versions. Here is the link -> https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/
It's not as good as installing all browsers to fully test everything but it can give you a rough idea if there's something wrong with css or something like that.
Your issue might be related to different browser versions. Double check to make sure that you are on the same version to see if you can reproduce the issue.
I hope someone can help me. I'm working in the design of a site for real estate. I'm working with foundation 5, it works good in chrome and firefox for mac but when I test the site in firefox and Internet Explorer 11 in a PC it looks weird. I haven't test it in olders versions of those browsers in PC yet.
I have the site in https://dl.dropboxusercontent.com/u/78083017/casinoPlaza/plantas.html
The problem is in the tab panel with the floorplan.
I'm working in the left side menu. I really don't know how to solve the problem because I don`t know where the problem is. I hope someone can help me figure out the problem and how to solve it.
Thanks in advance.
so the problem might be is that you used a MAC computer and usually the OS is different then Windows (PC)
so in other words i'll put a example
let us say if windows 8 works awesome with a touchscreen alright?
but you expect seeing the same interaction with a non-touchscreen monitor?
see? there is going to be a difference trying to adapt to the new hardware/software in your case, you might see that in MAC it looks flawless and that might be true for the mac users who visit your website but you have to know you have to calibrate the website to fit in other "formats" i would recommend you "building" your website in a PC so issues don't pop up that much as they are happening right now/
A service that I often use to see how well my efforts are shaping up in different browsers and OSs is BrowserStack. Does something of the same ilk exist for testing out the behavior of different mobile devices? Say for instance I want to check the behavior of a webapp on an iPad, a Galaxy Tab and a Surface. Is there a service in the cloud that can help me do this?
http://www.genuitec.com/mobile/ - try using for ipad/iphone/android. But I don't think it's ideal solution. Sometimes I use android SDK emulator as well.
I am testing our web app for various mobile devices. In this case, I’m running a Blackberry simulator that simulates a Blackberry Bold 9900 running Blackberry OS 7. There is nothing out of the ordinary in my pages. The first page is not particularly special, it is Html, jquery, and jquerymobile. However, the Blackberry simulator's browser shows my page like a 1970s color TV that needs its rabbit ears adjusted.
I don't have access to a real blackberry at the moment, but I've been told that our pages don't show this distortion on real hardware.
Are there any workarounds to get the simulator to better reflect that real hardware?
Is there something in my Html that is messing up the presentation on the simulator? If I don't use jquerymobile, it looks fine (for whatever that is worth).
I tried the same experiment with the jquerymobile demo site.
http://jquerymobile.com/demos/1.3.0/docs/intro/ - shows the same colorful mess as my app. See captured image below. http://forum.jquery.com/topic/jquery-mobile-demo-page-causes-blackberry-7-1-simulator-browser-to-crash has an interesting comment from a Blackberry employee:
The page does load, but not without some very major rendering
artifacts (there appears to be a colourful static/noise overlay on top
of the content.)
The simulator came from the Blackberry site.
--- Update
Blackberry device simulators can be downloaded from http://us.blackberry.com/sites/developers/resources/simulators.html
You can download simulators for a specific device and OS version. It seems that some of the simulators are buggy and don’t support jQueryMobile. However, I’ve found that the Blackberry 9790 for Blackberry OS 7 works well so far. This is 7.0.0.592 (9790).
I tracked this problem down to CSS, and more specifically the following tags:
-webkit-perspective:
-webkit-transform:
when commenting these out everything was fine.
Update: It seems like upgrading the graphics driver may solve this problem (it didn't work for me):
http://supportforums.blackberry.com/t5/Testing-and-Deployment/Blackberry-7-emulators-bug/td-p/1409051
This seems to be an error with the program itself, not your HTML. If your code works fine on the real thing but not on the simulator, then it's probably the simulator.
I have read lots of blogs about how to get firebug lite to work on the iPad and from what i can gather it worked at some point but hasn't worked in awhile. I can't get it to work myself.
So my question is has anyone gotten firebug lite or something simliar to work on the iPad recently. With the iPad being so popular I find it amazing that there isn't a good solid developer tool out there for it yet. Especially because in my experience it doesn't render web pages as expected quite often and needs specific tweaking.
Just to stop some quick replies, I already know its a webkit browser and the issues that I have spotted only show up on the iphone and ipad, not in chrome or desktop safari. So i really would love a solution that is native to the ipad itself.
The suggestion below worked for me on an iPad3 running IOS6.
This technique is from http://www.jamesmacfie.com/2012/03/debug-your-html-css-on-the-ipadiphone/
Bookmark any site on iPad then edit the address. Paste in the following code:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E.{if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Try Remote Debugging with Chrome browser. However iOS 6 comes with built-in support for remote debugging - link.
I've installed this many times (and in the past month on the new iPad) and it has worked.
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
FYI: The directions might be a little outdated so don't give up. What you will be doing is creating a bookmark. Then you edit the link in the bookmark with the script on Martin's website. That also means Firebug Lite can be used on Internet Explorer...although I couldn't edit any elements after getting it up and running.
Good luck!