After loading, my site should show a list of items from various stores. It does so on my Macbook Pro running the latest version of Chrome and Firefox.
However, it hasn't shown up on a Windows computer running Chrome (although it did work on the same computer in Firefox).
Is there an obvious reason why this should be the case? What's the best way of testing cross-browser compatibility when developing?
EDIT
I should say that it is loading some jQuery, but it's failing to make a $.post.
Related
So I got stuck on my project for almost 2 days now. I am doing a cross-browser datepicker (vanilla js) targeting Safari browsers. I am using this extension. I am using the Chrome browser and when I try to simulate a safari browser using the said extension, the datepicker seems to works fine. However, when I ask my friend to run the website online using the actual macbook, the styles seems to mess up. The question is:
Do you know any extension that would deliver almost exactly the same as the actual safari browsers?
Would be glad to hear your recommendations. Expect some credits.
P.S. I dont have a macbook right now, so that complicates my situation. I also mainly do web development on my PC.
I have a general question. I'm working on my first program in JavaScript and while I'm working on them I experienced some weird "broken browser"-problems.
During the weeks of work on my program I tested the project often on different browsers and computer systems. While doing it I observed weird behavior on Firefox and Chrome in specific versions. In both cases the program worked fine in both browsers then suddenly I experienced problems in Firefox on Windows on one machine. After some research I tried to update the browser and the problem was gone. The same experience I had on Chrome on Linux. It worked fine, then suddenly I had problems with Chrome 48. I tested the program on Mac and Windows, everything was fine. Then I recognized that the browsers on this machines has the version 54. So I updated on my Linux machine to the newest version and the problem was gone.
My Question: is it normal that such things happen with specific versions of browsers and if so, how to deal with it if you're working on bigger projects?
Edit: From the answers below I see that I was not clear with my question. The Question is not really about cross-browser compatibility than more about why a programm works in chrome v47, but not in v48, and then it works again in v54. Same for Firefox and other browsers.
You have to read about cross-browser compatibility.
Each browser may have different implemenations of specific functions or even do not have.
For older browsers like IE8 and less even simple window.innerWidth
doesn't work.
jQuery may help you. Its library which effectively provides cross browser compatibility for a lot of cases.
Another way to test if browser support some function is using Modernizr
You can also check support manually by websites like caniuse.com - works mainly for css styles but also js
Can you suggest some good cross browser compatibility testing addons for firefox that may be useful while webpages developemnt?
Perhaps ones that can show me the view of my webpages in all major browsers by selecting in a single firefox window.
As far as I'm aware, there is none, and this is why:
Each browser renders based on its edition of the engine upon which it is based. Therefore, to see what a page would look like in IE, you'd have to render in Triton; Mozilla covers firefox; Webkit for Safari and Chrome (though each have differences themselves); etc.
The one way I get around the problem is loading other browsers from safari's develop window which offers the chance to open the page in any browser I have installed on my system. This still limits me, however, since I can't run a modern triton browser on OS X (short of installing a windows partition in some manner).
Essentially, browsershots is your only solution short of running all the various browsers.
The only one I can think of is IE Tab, but that only works on Windows boxes. Might not be quite what you're looking for.
I have an javascript application which I created on windows for windows browsers and released on the internet.
I bought an iMac last week.
And I found the application can run normally on mac, too.
I need to maintain and modify the application in the future.
And I want it to run on both windows and mac.
If javascript of firefox and chrome of mac have complete compatibility against those of windows,
I need neither windows machine nor windows in the bootcamp.
Do javascript of firefox and chrome of mac have complete compatibility against those of windows?
Or should I test the application not only on mac but also windows for every update?
I don't want to do that if possible.
JavaScript in Chrome / Firefox / Safari should be the same on OSX and Windows provided you are using equivalent versions between OSX and Windows. If you find any differences, then you'd probably be best to file a bug with them.
Mind you, I am talking about just pure JavaScript. If you are worried about how it displays, then it will probably be different. Browsers render certain components differently depending on the operating system; such as the default font, the chrome of the buttons, etc.
You should be more concerned about the version of the browser when testing, not the platform it is running on.
Platform-specific bugs are few and far between, but the are possible. Yahoo tests on multiple operating systems, not just multiple browsers. It's a question of how careful you want to be. For most sites, you can probably assume that the OS won't make a difference.
If what you're saying is accurate, then it was a mistake in the design of the JavaScript. You should have been testing for particular JavaScript capabilities, but it seems in you were testing for browser names.
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