How to debug CSS/Javascript hover issues

Asked
Active3 hr before
Viewed126 times

6 Answers

debughover
90%

2 Go to sources tab -> Hover on anything -> Press F8 - it will "freeze" your screen so that you can see what all happened in DOM when you hovered – Abhinav Singi Sep 15 '15 at 8:34 , 5 Terrible moment when you move your cursor towards the text in the firebug but it vanishes. – user379888 Dec 28 '12 at 21:42 ,When you run this with firebug active, the element will be available to inspect in the firebug console., Is there a way to make an air conditioner without venting heat outdoors?

Add an onmouseover function handler to the element that is taking the :hover. Inside that function, call console.info(element) on whichever element you'd like to know about.

myHoverElement.onmouseover = function() {
   console.info(document.getElementById("someotherelementofinterest"));
};
load more v
88%

If you click on the source file like styles, fonts, js files, there will be some additional options.,I have a strong feeling that at least half of you are thinking right now — “It’s not even a programming language”. Still… poor skill in HTML/CSS debugging causes major problems during web application development.,Click this icon and your Elements tab will follow your cursor on the screen, selecting nodes live.,Select the element you want to capture by clicking the left mouse button

By clicking the right mouse button, we open some additional options:

Add attribute — add a new attribute to the selected element
Edit attribute — edit an attribute, available only when you click on the attribute
Edit as HTML — by picking this one, you can edit the whole element; also useful to copy part of an element that you want to use somewhere else

Add attribute

By clicking the right mouse button, we open some additional options:

Add attribute — add a new attribute to the selected element
Edit attribute — edit an attribute, available only when you click on the attribute
Edit as HTML — by picking this one, you can edit the whole element; also useful to copy part of an element that you want to use somewhere else

Edit attribute

By clicking the right mouse button, we open some additional options:

Add attribute — add a new attribute to the selected element
Edit attribute — edit an attribute, available only when you click on the attribute
Edit as HTML — by picking this one, you can edit the whole element; also useful to copy part of an element that you want to use somewhere else

Edit as HTML
load more v
72%

In our Debugging HTML and Debugging CSS articles, we provided some really basic guidance on debugging HTML/CSS — if you are not familiar with the basics, you should definitely study these articles before carrying on.,The last three lines show three different versions of the linear-gradient() function, which is used to generate a linear gradient in the background of an element:,Basic math in JavaScript — Numbers and operators,Reference material with browser support information for client-side web technologies, e.g. the <video> reference page.

<video id="video" controls preload="metadata" poster="img/poster.jpg">
   <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
   <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
   <!-- Offer download -->
   <p>Your browser does not support HTML5 video; here is a link to
      <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.
   </p>
</video>
load more v
65%

This way, you have enough time to open the tooltip. As soon as the code executes, the debugger; statement is hit.,Popular CSS frameworks like Bootstrap often include a functionality for tooltips. Those tooltips are controlled via JavaScript. They appear if you hover the element with the mouse cursor and vanish as soon as your mouse leaves the element. That might be a bit of a problem, if you want to customize the HTML/CSS of the tooltip and need to inspect the element. Since as soon as you try to inspect it, it is gone.,There is another way to trigger the same behaviour: You can use the shortcut for your dev tools to “pause script execution”. For Google Chrome this happens to be F8. So hover over the desired element to open the tooltip, press F8 and you are free to inspect the tooltip as you wish.,So both tricks work basically the same and are really easy to use. They both utilize the fact, that the DOM is frozen, as long as the JS execution is stopped on a breakpoint. So give it a try!

1
   >
   setTimeout(() => {
      debugger;
   }, 3000)
1
> setTimeout(() => {
   debugger;
}, 3000)
load more v
75%

Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features.,IntelliSense shows you intelligent code completion, hover info, and signature information so that you can write code more quickly and correctly., Configure IntelliSense for cross-compiling ,VS Code's built-in JavaScript formatter providers basic code formatting with reasonable defaults.

To define a basic JavaScript project, add a jsconfig.json at the root of your workspace:

{
   "compilerOptions": {
      "module": "commonjs",
      "target": "es6"
   },
   "exclude": ["node_modules"]
}
load more v
40%

Navigate the DOM element subtree and inspect rendered HTML, CSS, and JavaScript code.,Navigate the DOM element subtree and inspect rendered HTML, CSS, and JavaScript code. ,Dynamically edit attributes and CSS styles for rendered elements and immediately see the results.,Dynamically edit attributes and CSS styles for rendered elements and immediately see the results.

In the BODY element of index.html, add this code:

<div id="flipTemplate" data-win-control="WinJS.Binding.Template"
        style="display:none">
    <div class="fixedItem" >
        <img src="#" data-win-bind="src: flipImg" />
    </div>
</div>
<div id="fView" style="width:100px;height:100px"
    data-win-control="WinJS.UI.FlipView" data-win-options="{
    itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
</div>
load more v