We Keep Coding

Click events and Google Chrome and Windows 8

I am trying to use the following JQuery code:
$("#thing").on("click", function() {
....})
And it doesn't work on Google Chrome in Windows 8, but it works in Firefox on Windows 8 and basically every other OS. Any ideas?

It works, check this: http://jsbin.com/ofuvuh/1 Probably there is some error in the code that ff ignore or maybe it's your browsers fault. Please check the chrome and ie console, probably it can helps

Try:
$("#thing").click(function ()
{
// your code here
});
Which is the same as .on('click', handler). See .click documentation.

Your code snippet looks completely fine. I assume you are using a fairly up to date version of jQuery, so most probably it is nothing to do with jQuery or the browser. I suspect there might be something wrong with the code surrounding your snippet.
As a possible solution:
In Chrome you can bring up the Console, which will tell you if there is any errors in your JavaScript (developers.google.com/chrome-developer-tools/docs/…). Open it up, refresh your page (you might see the error in the Console straight away). Or click that '#thing' and watch out for any possible errors coming up in the Console.

Javascript and jquery work with IE

My html page cannot work in IE browser. If I turn F12 developer tools on, it starts to work. My page can work with chrome. I guess it is caused by jquery and javascript. Can anyone know how to make it work? Thanks

IE crashes your script if you're using console.log anywhere inside it. Developer tools adds the console functionality - therefor it works if you open it. Remove the console.log and it should start working just fine.
Chrome/Firefox support this by default, thats why it works there no problem.

you're probably using console.log() in your code somewhere. In IE console object doesn't exist unless the dev tools window is active.

javascript line by line debugger

This might sound crazy but is there a debugger out there which automatically breaks on the first line of executed code ?
Sample : suppose I have debug mode on and I click on a button. Now the intelligent debugger should automatically set the breakpoint on the first line inside the .click({}) function.
This way it is very easy to see the starting point and very easy to backtrack.
There must surely be something.
Thanks

Most debuggers in the browser allow you to insert the keyword
debugger;
into your code which will cause a break to occur at that point in the execution.

Chrome with CTRL+SHIFT+J. ;) You can put breakpoints there. I think it also works under FF. Also new versions of IE have JavaScript debuggers (don't remember the shortcut though).
F12 in most browser opens the debugger.
Chrome, Safari, IE have this by default, and for FF there is the Firebug add on.

Also you can debug from visual studio, select debug from the menu --> Attach to process and then select the interter explorer process. But You should enable the script debuging in Internet Explorer first.

How to know what javascript function is called?

I have a SharePoint website with menus and everything.
I want to know what JavaScript function is called when I click an item.
How to know that? Is there any tool to trace javascript functions called? I use IE
Thanks a lot

I know this may not be the best help as you are not a chrome/firefox user. However, if you do chose to switch over, the Google Chrome browser has a script checker built in, which catches everything that you want to console.log().
This is simular with Firefox, however, firefox you have to download the addon "fire-bug" which can do the same, but it does not come pre-installed.
IE has an inbuilt 'program' called developer tools, which could be what you want, however I believe this came in through the later stages of IE such as IE 8+ (don't quote me on that)

You can use debugbar to inspect HTML element and also find what JavaScript function is called, then you can use Microsoft debugger, to put a breakpoint into the function and debug.

How to write and run scripts in the Google Chrome Javascript Console?

I recently switched from Firefox to Chrome and I (probably) missed an important feature. I was used to test javascript snippets on FF from within the Firebug console this way: open the console, write the script and finally press CTRL + Return to execute the code.
It seems not possible to do the same in Chrome console, as when I type some code there and press return to start a new line the code is executed immediatly.
Is there a way to replicate the Firefox behavior on Chrome?
Thanks.

It seems that there is no explicit “multiline mode”.
But you can:
Paste code (it will preserve multiline)
Shift + Return to add a new line without executing the script
Related bugs:
https://bugs.webkit.org/show_bug.cgi?id=30553
http://code.google.com/p/chromium/issues/detail?id=72739

You can also hit Shift + Enter to start a new line without running the code in Chrome's console: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#multiline-commands

Install Firebug Lite for Google Chrome. It has got a console.
Don't look for a full fledged Firebug. You will be disappointed :)
Oops,I didn't read properly at first. My bad!
In Firebug Lite, take Console. Then you will see a tiny red up-arrow at the right corner.
Click on it and you will get a multi-line console. Won't you?

I recommend this:
Write debugger; and hit Enter, in the console tab
This takes you to the Sources tab; if not, make sure debugger breakpoints are active
Now you can write whatever you want in the Sources tab, which acts like a full IDE with features like newline and indentation
Select any part of your code to run, and right-click, choose Evaluate in console

Better way of doing this using Chrome featue i.e Snippets where you can write javascript and save it in chrome developer console.
Its available underneath source inside developers tools while inspecting element.
More info about the snippets can be find on this link.
It was available in Chrome canary and I guess now it is available in default chrome browser also.