We Keep Coding

Pause a javascript

I'm looking for a chrome feature similar to debugger/breakpoint that lets me pause a script.
Why. I like to test some css in chrome-inspector. Since it's a loading spinner it will only be visible for some milliseconds. That time is to short to play with css ;)
Why not breakpoint...
Because chrome covers the entire page with a black layer so I cannot right-click and inspect a DOM-element as I like.
So is it possible to get rid of the black layer chrome has in debegger mode? or can I simply pause a script, play around with the css and the play it again.
Thanx in advance.

In your Javascript, you can simply write:
console.log(element);
debugger;
When the Chrome developer tools console is open, this line will pause your script without placing a breakpoint manually. console.log(element); will let you access the element you wish to debug or modify via the console.
After the script stops, you can use the DOM explorer, select your element, and in the DOM properties window, under "Styles", change its display property to none to make it disappear.

I found an ok answer to my own question. Simply use the select-element tool in chrome rather than right click.
Icon to the left
It temporary removes the black-layer until the element is selected. But if you want to see the correct colors without the black layer covering it you need to display:none it in the inspector. Also if you want to work on hovers or other similar stats the black layer will prevent hovers and such.

Inspect element that only appear when other element is mouse overed/entered

Often I want to inspect an element (e.g. tooltip) that only appears when another element is mouse overed/entered. The element that appears, is made visible via jQuery's mouseenter event.
I can't inspect the tooltip, since the tooltip disappears when my mouse leaves the containing element.
Is there a way to pause JS events so I could hover on the element, then pause the browser's JS, and successfully inspect it?
For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips.

It's fairly easy in Chrome 38.0.2094.0.
Here's what it'll look like:
Step-by-step:
Open the DevTools in the Sources panel
Make the tooltip appear by hovering over the button
Press F8 to freeze the page
Switch to the Elements panel and use the magnifying glass icon in the top left to select the tooltip
If the tooltip shows up because of CSS, here's what you can do in that case:
Step-by-step:
Open the DevTools
Select the triggering element in the dev tools (the link)
Right click, and select "force element state", and select ":hover"
Inspect the CSS tooltip

Both Safari's and Chrome's Web Inspector offers checkboxes where you can toggle the :active, :focus, :hover and :visited state of an element. Using those might be even easier.
Safari:
Chrome:

There's also another tricky way to do it :
Go over the element which makes your tooltip appear.
Right click to open the contextual menu.
Move your mouse to your dev tool window and left click anywhere in the dev tool panel.
Your tooltip will stay visible, you will then be able to inspect it in the Element tab.
Tested on Chrome. Doesn't seem to work on Firefox.

While #SomeGuy's answer is excellent (t-up for animated gifs), as an alternative you can always do it programmatically. Just pop open the console and type in the event name
document.getElementById('id').dispatchEvent(new Event('event-type'));
(with pure javascript specific syntax may vary by browser)
Even easier with jQuery:
$('#id').trigger('event-type');
In your example (http://getbootstrap.com/javascript/#tooltips), open the console and type in, for example:
$("button:contains('Tooltip on right')").mouseenter();
And the tooltip appears in the DOM and can be manually inspected/modified:
<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>
As in the comments, if you move the mouse pointer over the page frame, you can trigger other events such as mouseout. To prevent this you can press F8 (as in the acc. answer) or type debugger; (which is its script equivalent)

Get HTML code after mouseover in firebug

There is an HTML object that changes after mouseover. I need to inspect the changes and copy it's code, but with firebug I cannot do that (the mouse can be only in one place).
Is it possible to freeze the html while the mouse is on an object and then check the changes in firebug?
Note that, it is not the HTML attribute that changes, it is the content that changes. Another div is added after mouseover. So, it cannot be monitored by Style tab. For example in this link: http://demo.virtuemart.net/index.php/2012-01-13-09-33-20/product-details-layout what happens when mouse is over the product image?

actually i dont have firebug .. but chrome inspector can work for you.. i hope it should be available in firebug also.. check the image
so you can try this one also..

You can stop the script execution when the HTML is changed using the Break On Child Addition or Removal option inside the context menu of the HTML panel.
To use this option you need to enable the Script panel first and reload the page.
Example:
At the page you mentioned just right-click on the <body> tag and choose the Break On Child Addition or Removal option. Then hover the product image. Doing so the script execution will stop and you'll be able to inspect the HTML for the loupe by clicking on the node inside the break notification:

If you are using Chrome you can press F8 while having the developer tools opened.
F8 pauses on next script execution. So if you hover, then press F8, then move your mouse a bit inside the element, you will be able to rightclick -> inspect it.

In Firebug Addon you can make the state permanent with the dropdown-menu at the Style tab.
http://i.imgur.com/pUaWw6b.png
If you want to change the content of an element, you can by editing the HTML directly.
http://i.imgur.com/AbW0z9D.png

Finding out what JS is controlling this

I have a page which is using a nice hover feature which is controlled by javascript, and I was wondering if there is a tool which would tell me what JS is controlling at a specific point as there is a lot of JS files used across the site.

You need a debugging tool, one such tool is mentioned in the comments: Chrome. Once you have the debugger enabled you need to set breakpoints on various events to capture the code flow within all the javascripts. For more info visit here

I would go with Chrome. You can load the page, see all the related JS.
If you are in Chrome, right click on or near the button and click "Inspect Element."
Now you can see all the goodies :)

In google chrome right-click the element, click on "Inspect Element" option. The Chrome Developer window with active Elements tab should appear. You'll see the html structure with your element being highlighted. Right-click on that element and activate all three options in "Break on..." submenu. If some modifications of DOM happen during hover, they will trigger the breakpoint right in the place where you need. But keep in mind, that hover effects can be implemented via css without a bit of javascript, so this plan can fail easily.

As other's have said, use Chrome's web developer toolbar. Go to the sources panel and click the little pause button icon in the lower left corner. This will cause the debugger to activate as soon as the next javascript command is run. Then activate the hover feature - the debugger should pause execution in the callback function that's responsible.
Google actually discusses this exact scenario at the bottom of this documentation page.

A way to capture the Javascript which is changing an element's CSS property?

I have a div which is getting hidden/displayed by a click on another element. I can see the div's visibility CSS property changing in Firebug. The div is initialized using Microsoft Javascript library in code using:
Sys.Application.add_init(function() {$create.....
How do I get the actual Javascript which runs during run time with every click? Is there a way to intercept the js call and see what code is exactly running, like in Firebug or Chrome's Developer Tools?
(This is NOT a question on how to hide/unhide an element. I know how to do this)

I know in Chrome Dev Tools what you can try to do is:
Find the element clicking on which is causing your div to hide.
Expand it's Event Listeners in the right bar
Expand the click event
Then click the source file displayed there for the click event.
It would take you to where the click event function, so you can put a break point there. This is what you're asking, right?