I've seen this question asked a couple times on here but no one has replied.
Before I go implementing the more resource intensive elementAtPoint method, can someone confirm that Chrome does not support touchenter and touchleave events?
The MDN documents it https://developer.mozilla.org/en-US/docs/Web/Reference/Events/touchenter
The latest W3C draft specifies it http://www.w3.org/TR/2011/WD-touch-events-20110505/
Does anyone know if any of the Chrome versions support it, even if it's in development, can I get it?
Well, pretty outdated I guess... Anyways, I've just used touch events, they are supported now, and Chrome will eventually emit touch events instead of clicking if you switch to device mode on the developer window (F12). Thus they are kinda easy to test.
CanIUse is also a friend: http://caniuse.com/#search=touch
Whenever I have Chrome's console open on stackoverflow and move the mouse over any page elements I see the following line in the console:
event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
What's causing this? Is this some sort of heatmap?
It is not stackoverflow.com specfic message, it can come on other sites as well. Message is obvious that in browsers with Webkit engine such as Chrome, Safari those two properties are deprecated.
It seems that these errors come when jQuery is used on a page, jQuery tries to use these two properties.
See this ticket on jQuery bugs where this issue was mentioned:
http://bugs.jquery.com/ticket/10531
It's a reference to layers which were introduced by Netscape long, long ago. Thankfully, they have been out of common use for about 10 years.
layerX and layerY refer to the mouse position of an event with regards to a layer.
I'm using jQuery a lot, especially for animations like fading or sliding :)
so I'm attaching various functions that do this on elements like
$(".fade").each(function(....)
or
$('*[class*="slide-"]').each(function(...)...
On some elements I use livequery without specifying a event (so it detects new elements that are being added in the DOM).
$('*[class*="slide-"]').livequery(function(...
This uses a lot CPU.
Anyway, what I'm asking is if there is a application or something, like a code profiler, that can show me how much CPU use each of these functions that are hooked on selectors/events.
Use the Developer Tools in Chrome and Safari, or Firebug for Firefox, and check out the Profiles section. In IE8, press F12 to open its own developer tools and profiling. This question has also been asked, answered, and accepted already on stackoverflow.
Firebug in Firefox has a wonderful profile tab that will show you scripts running and execution time (if that's what you're looking for)
WebKit based browsers (like Chrome) have cpu profiling tab in developer tools, might be what you are looking for.
As already mentioned, many modern browsers include profilers. You might also want to check out the jQuery Profile plugin as a complement to those profilers...
http://plugins.jquery.com/project/profile
The new IE9 beta developer toolbar has a nice profiler also.
see my question on title.
note that I understand how to debug javascript in any browsers (including IE 7++) other than IE 6.
IE Developer Toolbar really good to have for any developer.
IE Developer Toolbar
Microsoft script debugger can provide a bit of information.
But in general - it's a pain in * * *.
Last time figured out what's wrong by gradually commenting out javascript code. :D
You can also use firebug lite.
Personally I'm a big fan of FireBug Lite which is perfect for IE.
Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari?
The solution is Firebug Lite, a
JavaScript file you can insert into
your pages to simulate some Firebug
features in browsers that are not
named "Firefox".
Firebug Lite creates the variable
"firebug" and doesn't affect or
interfere with HTML elements that
aren't created by itself.
Firebug Lite has helped me out quite a lot =)
I'm trying to fix some JavaScript bugs. Firebug makes debugging these issues a lot easier when working in Firefox, but what do you do when the code works fine on Firefox but IE is complaining?
you can also check out the IE Developer Toolbar which isn't a debugger but will help you analyze the contents of your code.
Visual Studio will help with the debugging
Fiddler should help analyse the traffic travelling to and from your browser
You can try Firebug Lite or use Visual Studio to debug the JavaScript.
Since Internet Explorer 8, IE has been shipping with a built-in tool-set for debugging, troubleshooting, and generally helping in development of your pages/applications. You can access these tools by pressing F12 while in the browser.
HTML Tab
The HTML tab will let you peek into the DOM as the browser understands it. As you select elements from the HTML view, their styles will be detailed on the right, with individual rules have the ability to be toggled on and off. You can also modify rules, and determine whether the styles on the element were inherited, or assigned explicitly. Additionally, you can even tell which .css file they originate from.
There is a bit more you can do in the HTML tab, such as review and modify attributes on elements, and even make changes to the layout of the element from within the layout section. Additionally, you can make changes directly to the markup to quickly test out some structural ideas.
Script Tab
For resolving JavaScript issues, you can watch the Console and the Script Tag. If your script stumbles across an a call to an undefined method, you'll be alerted within your console. The console also lets you run arbitrary JavaScript against your page, if you want to toggle items on or off, or try bind a handler to a button.
The Script tab great as well as it will format your JavaScript for you, allow you to insert breakpoints, step in and over code blocks, and watch variables over time.
If you've used Firebug, or even the Webkit Inspector, the F12 Developer Tools in Internet Explorer 8+ should be pretty familiar to you.
Firebug lite doesn't work too well for me. The Developer Toolbar just isn't good enough. There really is no great solution.
Or IE Developer Toolbar
Have a look at DebugBar. License is free for personal use
For the DOM Inspector, try the Internet Explorer Developer Toolbar.
For the Net tab, try Fiddler.
For Javascript debugging, try Visual Web Developer 2008 Express Edition. (Or a higher edition of Visual Studio)
Also, try DebugBar.
Visual Studio 2008 can do JavaScript debugging, you have to go to IE's Tools->Internet Options->Advanced and uncheck 'Disable Script Debugging (Internet Explorer)' in order for the browser to bubble up the errors it detects.
Once you're in Visual Studio you basically have it's entire debugging arsenal at your disposal. It's not as integrated as Firebug, but it is way better than anything we used to have.
i think it is better that you first install the ie core addon in firefox then load the page with ie addon and press f12.
good luck.
Make a bookmark in the favourites bar, and put this address as the URL:
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');
Then navigatge to the page you want and click the link. Firebug Lite will/should open up...
The IE8 beta comes with what I think is the IE Developer toolbar, but it seems to be a lot more powerful than the last time I tried the toolbar on IE7
I'm guessing this question was posted before the IE8 final came out, according tho some of the answers.
These days, IE8's inbuilt Developer Tools are great; and while the JS debugging isn't as useful as Visual Studio the Dev Tools in general much better than Firebug in my opinion. Between that and the Compatibility View Browser Mode I can handle all my IE6 development needs.
I found a solution to this problem, you could simply stick this tag to the page you are trying to debug and it will open firebug:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Explanation from https://getfirebug.com/firebuglite#Stable
If you're a serious Front-end Developer, give AJAX Edition a test run:
http://www.compuware.com/application-performance-management/ajax-performance-testing.html
It's a free tool that allows users’ to understand what is causing performance and functional-related problems in modern AJAX/web Applications.
In IE, go to MenuBar->Tools
Select Debugger Tools
Hit F12 and enjoy.
It is far from Fire Bug, but suitable for some quick help
There is always a way how to get around this issue, watch the video and you will be able to install firebug in 2 mins.
install firebug on ie
Good luck