We Keep Coding

How do I debug Internet Explorer on Windows Phone 7?

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

Is there a tool out there that makes debugging JavaScript and jQuery easier?

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.

Web Automation Tool

I've realized I need a full-fledged browser automation tool for testing user interactions with our JavaScript widget library. I was using qunit, starting with unit testing and then I unwisely started incorporating more and more functional tests. That was a bad idea: trying to simulate a lot of user actions with JavaScript. The timing issues have gotten out of control and have made the suite too brittle. Now I spend more time fixing the tests, then I do developing.
Is it possible to find a browser automation tool that works in:
Windows XP: IE6,7,8, FF3
OSX: Safari, FF3
?
I've looked into SeleniumIDE and RC, but there seems to be some IE8 problems.
I've also seen some things about Google's WebDriver, which confusingly seems to work with Selenium.
Our organziation has licenses for IBM's Rational Functional Tester, but I don' think that will work on the MAC.
The idea is to try to run tests on all the browsers our organization supports. Doable? Are my requirements unrealistic? Any recommendations as far as software to try?
Thanks!

I would recommend using Selenium but I say that as a Selenium Committer.
Selenium works on any browser that supports JavaScript since the framework has been written in JavaScript. This means if your browser on any OS supports JavaScript it will run in Selenium. That documentation it out of date, you can see that since it is talking about IE8b1 and IE9 preview is out now.
Selenium and WebDriver (which isn't a Google thing since it started at ThoughtWorks) are currently being merged as they both have their strengths and weaknesses. The current merged work will be called Selenium 2 and you can start using the alpha release now at http://code.google.com/p/selenium/. It will still work on any OS as that is still the main driving force behind the work being done.
Selenium IDE only works on Firefox because it is a Firefox add on.
I personally would avoid Rational Functional Tester because it has a lot of weaknesses that its not even worth contemplating.
If you start with Selenium there are some tutorials on my site at http://www.theautomatedtester.co.uk

Try Sahi (http://sahi.co.in/) It works across browsers and operating systems. It has a powerful recorder, and great APIs for object identification. It supports HTTPS, proxy tunneling etc. and has drivers in sahi script, java and ruby. It also has parallel playback inbuilt. It is 5 yr old mature project hosted on SourceForge, with releases almost every month.
It automatically waits for AJAX and page loads, and does not use XPaths for object identification. It also handles sites with dynamic ids.

Selenium is probably your best bet out of the tools you mentioned. What are the issues it has with IE8? You might want to check out HttpUnit to see if that meets your needs, also.

Selenium RC is a great tool if you invest the time to use it. With significant modifications to the existing library I've gotten it to fulfill all of my front end testing needs.
The confusion you are having about Webdriver is understandable. Selenium 2 is in development and will be a merge of Webdriver and Selenium. Check out: http://www.youtube.com/watch?v=RQD4EzWI4qk to get more detail.
The only browser that I have found to be unusable with Selenium is IE6. IE7 and IE8 work fine as does Firefox (which I have modified to include firebug for debugging purposes).

I'm in the same boat. It is a difficult problem to solve. Windmill and Selenium are the 2 best I've found. Though they both have issues. Selenium can only record scripts in Firefox and I haven't managed to get the proxy chaining to work as advertised. Windmill you can record in any browser and you can supposedly tweak the proxy to put extra logic in there, but the js mechanism for recording across page loads has been in my experience very brittle at least on the app I have to test.
I don't think anyone can get it quite right as long as there is more than one browser that needs to be supported.

Maybe have a look at SIKULI. It's a different paradigm but, depending on what you want to test exactly, it may do the job and will work with any browser, on any platform.
Have a look at their official blog for some examples of interactions with web applications.

So I wrote some of my more problematic tests in Selenium RC, using the Python driver. It was a better experience than writing the same tests in pure JavaScript, but I still had some of the same issues.
Testing something like an ajax autocomplete widget, meant forking some of the code depending on IE, or Firefox, and I still can't get typeKeys or a combination of type with typeKeys to work in Safari.
So, I am not sure if having cross browser clean, extensive ui tests is a bit unrealistic.
Should I try webdriver/Selenium 2? Would that make things better, or is that product not ready for prime time yet? How's the Python binding for that? I don't know Java, but I would learn some if need be.

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.