debugging javascript for IE6 - javascript

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.

Related

How to debug web page rendering compatibility issues across browsers?

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.

Profiling JavaScript without crashing your browser

So tried my hand at profiling some code and I figured the easiest way to do it (at least on Firefox) was to use either console's time/timeEnd or profile/profileEnd, and I tried both.
The problem I have is with the number of runs I can do before Firefox crashes on me. Now I won't paste the code here because it's typical benchmarking code (and it's very messy), but obviously the gist of it is that it runs functions (a test is represented with a function), logging their execution time for a certain number of runs.
Now with for example, 5e4 it sorta works but I don't think it's enough to spot (very) micro optimizations, but more than that, it crashes.
So how do you profile your JavaScript? Because this way, it's barely feasible.
When I used to profile my JavaScript code I used Chrome's profiler; the JavaScript Console in the developer view gives it, and it pretty much worked for me. Have you ever tried it?
I have tried profiling a page with a lot of scripting in Firebug on FF4 and the same in Chrome (last version). Firefox crashed within a second or two, Chrome didn't seem to have problems with it. Maybe you can find something on it in the Firebug issues list?
Although not a traditional code profiler, I recommend Google's Speed Tracer:
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.
I think the profiler in the JavaScript Debugger (aka Venkman) is quite good. The version currently on addons.mozilla.org is not compatible with Firefox 4, but the change necessary to make it work has been committed. See https://bugzilla.mozilla.org/show_bug.cgi?id=614557 for details.
dynaTrace AJAX edition(free)- one more tool in your bag. Offers a little bit more detailed performance metrics, IMHO. They used to have it only for IE, but their new one supports FF too. Also see Steve Sounder's blog

How to debug Javascript on old browsers

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.

Browser Independent JavaScript debugger?

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/

How to suppress javascript errors for sites I'm not developing?

I like to keep javascript debugging enabled in my browser so when I'm developing my own code I can instantly see when I've made an error.
Of course this means I see errors on apple.com, microsoft.com, stackoverflow.com, cnn.com, facebook.com. Its quite fun sometimes to see just how much awful code there is out there being run by major sites but sometimes it gets really annoyed.
I've wondered for YEARS how to change this but never really got around to it. Its particularly annoying today and I'd really like to know of any solutions.
The only solution I have is : use a different browser for everyday browsing.
I'm hopin theres some quick and easy plugin someone can direct me to where I can toggle it on and off based upon the domain i'm on.
Edit: I generally use IE7 for everyday browsing
Firebug lets you enable/disable debugging for different domains.
Script Debugging in IE7 is controlled by a registry key. (An addon could probably toggle it. I just don't know of any.)
So, how I handle this is to write a registry script to turn it on or off. Then, I put a link to those scripts on my windows quick-launch bar and change their icons to be more appropriate. Then, I can just click one of the links to turn on or off IE script debugging.
Turn Off:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="yes"
"DisableScriptDebuggerIE"="yes"
Turn ON:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="no"
"DisableScriptDebuggerIE"="no"
Firefox lets you use different profiles. Each profile can have separate preferences, themes and plugins. Start firefox on Windows this way: firefox.exe -ProfileManager to create or manage profiles.
I use Firefox and Webkit for web debugging and Safari for regular web browsing, however. Firefox is just better for web development, and I prefer Safari overall.
I keep those annoying popups on for Internet Explorer, and you're right. It's amazing how few developers ever bother testing their code in IE. As a web developer, it's sorta your duty, right? Seeing as how it still accounts for like 60% of traffic to most sites.
Anyway, in answer to your question, I simply switched to Chrome for everyday browsing, and only use IE for testing and developing.
You have two options.
Change and use a browser that allows you to have site specific configuration (check out Firefox with Firebug), or
Use different browsers for developing and everyday use.
CompanionJS doesn't let you toggle debugging on a domain basis, but makes the error messages less obtrusive for casual surfing, and makes script debugging in general more user friendly.
Chrome doesnt bug you unless you first open the javascript debugger window
If you want to test and debug JavaScript, Firefox and Firebug are unrivalled in terms of features and ease of use. Chrome is not as powerful as Firebug, no matter what anyone else tells you.

Categories