Forgive me if this has been asked elsewhere. I was not able to find a good answer yet. I have some Javascript code that works perfect in the latest release of Firefox. However, there is some odd behavior on an older browser that is used on our site. For reasons beyond my control, I need to support this hacked up version of a browser that is actually embedded into another piece of software.
I am stabbing in the dark as to the cause of the issues. I see no error console and of course tools like Firebug are a pipe dream. How do I effectively debug browser-specific issues? The old guess-and-check method will cost way too much time.
You can use Firebug Lite in IE6+ and older versions of FF/Opera/Webkit. The most useful feature of Firebug Lite in my opinion is probably the logging capabilities (console.log).
Checking the JavaScript for syntax errors before you even load the page with a tool like JSLint can save you some headaches. As a last resort, the reliable window.alert is always there.
It depends on the browser.
You may want to look at Firebug Lite for Firebug-like features in older and non-Mozilla browsers.
If the browser is weird enough that you really have to guess and check on the client side, I'd recommend writing a pretty good set of tests to run on every browser.
good luck with alert()'s
but you can try :
1) IE8 has the developer tools, that works fine in compatibility mode.
2) Firebug lite http://getfirebug.com/firebuglite#Stable
3) charge more from your damn clients that wants the thing to work in IE6
If you can make do with logging, my own logging library log4javascript works in every major browser released since 1999.
Related
I am developing a web page primarily using Firefox. Often I encounter that my web page renders properly in Firefox but has some unexpected behavior in Chrome and IE.
Generally if its related to javascript, I usually open Developer Console in Chrome and see if there were any errors and that gives me a clue as to what might be wrong.
Unfortunately, I am generally lost if its a CSS related or HTML element issue.
In one particular case, I have placed a div inside a <td> and I am lost as to why the chrome cannot render it properly irrespective of the fact that firefox is happy and does not complain.
So my question is, how to debug issues related to rendering of HTML pages in Chrome and CSS and determine what might be offending.
My related question is, is there a guidelines to make my web page work in almost all the popular browsers with little effort? I am particularly thinking in terms of tool or process which will warn me of compatibility issues with my web page.
IE (Internet Explorer) and little effort doesn't match to each other, you have to invest more of your time and effort only for IE, illuminate IE and be happy, as a suggestion, use Twitter Bootstrap if possible, it's a ready and tested css framework (maybe framework is not perfect name).
Basically, as far as I know, only a css reset could be used to gain some consistency but still you have to test over different browsers because each has different rendering engine. If you want to keep IE in the list then test the layout for IE at first.
Only for the IE or Inconsistent Exposer (IMO) there is a developer tool available (IE Tester) to test layout (HTML/CSS) over different versions of IE and only works on Windows so it may help you a bit if you are Windows user. There is also an online tester available and sometimes helpful, it's browsershots.org.
Also IE has a debugger/developer tool and pressing F12 will bring it so you may see something like this:
Google Chrome has it's built in debugger/inspector (CTRL + SHIFT + I) and on Firefox you may use Firebug extension and these browsers are not dumb like IE and there are lots of debugging extensions available for these browsers for free, not worried about these good guys.
Generally speaking, IE users are dumb and used to see dumb things on their screen so I don't think too much about them because they really don't know the difference but as a developer you may need to think about it and in this case I would demand extra charge from my clients if they want me to make a site compatible for IE < 10 because it requires extra effort.
You dunno me ? Leh--hoo-zehar (Looser) IE am a legendhhh. Smooky...!
I am not aware of any tool that will warn you because there is no way for a tool to validate the result of what you desire.
As far as how to test HTML/CSS. Chrome supports the most HTML-5 and FF is a close second. If you develop in chrome it normally works in FF and via verse. IE is where the pain is. IE does not support all HTML tags and often will render things wonky. I normally create my webpage and focus on FF and chrome once I like the results I open IE and debug. 98% of the time it is CSS changes that need to be made. I debug CSS first and if I am not able to resolve it with CSS after a decent amount of work I will look into changing the HTML. I try to avoid changing HTML because you have to debug all other browsers again.
Styles and code developed in Chrome will generally work in Safari, Opera(same engine), and IE 10+ with few inconsistencies. You'll get a few rare positioning issues with some CSS3 specs in Firefox, specifically in background positioning. You'll also find some javascript issues unique to Firefox.
IE9 is generally a good sport and usually doesn't have too many issues. IE8 will have a few and they'll be significantly different based on the OS (as there are multiple versions of each IE and they all support different specs for Javascript and HTML) specifically you'll find lots of issues with XP IE8 and really shouldn't support it (Microsoft doesn't even want to).
For the most part you'll be developing to IE inconsistencies unless it's a CSS3 spec with the occasional javascript strangeness (which js frameworks generally can help with since a few of them were made with that goal in mind).
As far as tools, browserstack is nice but doesn't give you a lot of time. If what you're trying to use is modern caniuse is a good place to visit first. Almost all issues between non-IE browsers will be HTML5 or CSS3 specific though.
I have an app that I have fully tested in Safari 5, IE 9, FF6, and Chrome 14. I'm not looking to block or exclude any browsers from the experience. But I want to warn/inform users that there may be a better experience in another browser, and if they choose to continue, there may be features not working or broken.
I have looked at jQuery browser detection, but it seems to be a bit quirky. I know the best solution would be to warn based on feature detection, but we are currently in beta and I am not completely sure what features make or break. Such as web workers, its known that web workers not working breaks our app, but it works in IE lower versions. But then there is an issue with Opera that web workers is available, but not functioning correctly.
Ultimately I am looking for an easy way to say Browser X Version y and up don't show warning, and those and under show warning.
What is the best way to approach this?
Browser detection is indeed "a bit quirky", in pretty much any scenario. The jQuery route is probably as good as you're going to get, but as you say it's not great.
A better solution is generally to do feature detection, especially in cases like the one you describe where your site relies on specific features.
The best feature detection library is Modernizr. This will give you an bunch of Javascript flags which are set to true or false according to whether the browser supports a given feature. It detects support for a whole bunch of stuff, including Web Workers.
Check out this: http://www.w3schools.com/js/js_browser.asp
-Easy way of detecting the user's browser with javascript. From there I'd just use a switch statement or something to display the messages for browsers that aren't tested yet. If you want the exact browser version you'll have to parse it from the "navigator.userAgent" field.
If the goal is full validation, you need to be even more specific about versions. Keep in mind that some browser upgrades are not 100% backwards compatible with previous versions. (Look at how IE8 mode in IE9 is not the same as native IE8 rendering, for instance.) You're going to have to retest with every new browser version, and sooner or later there's going to be a "Fully tested with browser version X, not tested with version X+1 that was released yesterday" problem. Feature detection, graceful degradation, and a warning non-intrusively displayed to the user if their experience is being significantly downgraded is a better way to go.
To directly answer your question, if you must implement what you are asking for just parse the user agent. This could be useful specifically watching out for a browser you know doesn't work right and warning, or as a bandaid for a badly written intranet app that is very picky about the exact browser version it will run on. For a newly developed app where you have control over the requirements, I would not recommend warning on browser version since there are better ways to do it.
I'm fairly inexperienced with JavaScript and jQuery, but I need both for the ASP.Net website I'm working on. I am slowly figuring it out, but I've been relying heavily on StackOverFlow.
Does anyone know of any tool (preferably free) that makes debugging JavaScript and jQuery easier? I've been using Firebug which has been helpful, but I guess I'm just spoiled by Visual Studio's debugger and intellisense. Is there anything like that for JavaScript and jQuery? It would sure make my life easier if there were.
What do you use? Any recommendations?
Of course, use the Firebug plugin for Firefox
I don't like anything Microsoft, but last time I looked at Visual Studio it was providing IntelliSense for Javascript. You may be interested in this article.
You say you're already using Firebug, which is a good start. I'd recommend also debugging in a webkit browser, such as Safari or Google Chrome. Both options have a developer console built in and it behaves much like Firebug. The beauty of jQuery is it does the dirty work of browser DOM inconsistencies between browsers, so if you have pure jQuery working in one browser, it will more than likely work in IE as well. I always make my program work in a standards compliant browser first, and then worry about IE.
IE8 also has developer tools/console or whatever they call it.
My comment can be answer
for IE it is IE developer toolbar and for chrome it has Chrome Developer toolbar. You can even use Fiddler for IE which tells about ajax calls.
Please let me know if you need any other info
In addition to Firebug, using JSLint will check and help you write good JS code.
Firebug (Firefox). The awesome thing about FireBug is that you can use CSS selectors directly in the console (see here) to test some of your jQuery selectors. You can also find lots of logging functions to use with FireBug (check out the console API)
Firebug Lite (Not as powerful as the full-featured FireBug, but great in a pinch)
Chrome Developer tools (Chrome; Safari has nearly identical tools)
IE Developer Tools when you must open IE.
window.alert
JSFiddle, which is useful for quickly coding and testing JS.
Netbeans has a pretty stupendous system from what I've seen.
I like the Web Developer addon for Firefox and other browsers. It's got an error console which is pretty handy.
Does anyone know if a browser-independent debugger exists...
For example I have been using Firebug in Firefox but if the web developers use other browsers - nothing.
I was wondering if there is some kind of "global" debugger that can attach to any browser and just debug?
Any ideas?
The makers of Firebug also make Firebug Lite, a JavaScript file that you can include in your webpage. They say that it works in IE, Opera, and Safari.
Steve
Since each browser has its own engine with its own quirks and such, it's more or less impossible to have a universal debugger.
Aptana, which is really just a rebranded Eclipse for web projects, has a debugger built in to the IDE, and comes closes to that ideal--in theory. It uses the Eclipse platform's debugging interface, but it still needs to be plugged into a browser. In Firefox, this works by plugging into...Firebug's JS debugger. But, it allows you to set breakpoints and step through code directly from the IDE (quite helpful for external JS files). For IE debugging, you need to purchase the Pro version, so I can't vouch for its quality. AFAIK, it doesn't support other browsers.
Nearly all the browsers have there own JavaScript debugger. Simply because they don't provide the same API (if they provide some) for accessing the JavaScript engine.
So, to complete your list, you have DragonFly for Opera, and WebInspector for the browsers based on WebKit (like Safari).
For IE you can also use Visual Studio to debug JavaScript - and it's better than the Microsoft Script Debugger. I'm not sure if the express editions are also capable of this.
Added: Both VS2005 and VS2008 are capable of JS debugging, although the newer product is better of course.
I run a Webservice that allows developers to "debug" their Javascript in the sense of finding bugs via a Javascript validator. See the HTML5 IDE guide for details to set it up with the "global" vim editor.
You can debug javascript with express edition of visual studio. Look here for details
Short answer: I don't believe so, but I hope you find one because I'd love to have one.
However, if you haven't been following IE development lately, IE's JScript debugging is alot less painful now with IE8; it includes, by default, some dev tools that do pretty much everything that Firebug does with the exception of AJAX debugging (but I prefer a protocol analyzer anyways for AJAX). It even implements an executable console, which includes several of the console.X methods from Firebug!
The profiler, I'm tempted to say, is nicer than Firebug's - simply because it lets you export the results directly to CSV. The actual debugger is as full-featured as JS debuggers get, with stepping/breakpoints/direct input.
Also, I haven't heard Venkman mentioned yet; its the grand-daddy of Firefox debugging (and other Mozilla Javascript). Not as popular as Firebug, but it definitely has its followers.
Lots of good information on this page as well: wikibooks.org/wiki/JavaScript/Debugging
javascript depends on the browser you are using (thus compatibility problems). To debug explorer you may use this: Microsoft Script debugger
you can use jsdt, you can get some information from https://code.google.com/p/jsdt/
firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..
You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.
You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.
The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.
or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.
For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger
I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.
I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.