I'm trying to repair a slideout javascript menu. The problem is, that the 3rd level sub-menu doesn't show although it should. I am sure it has something to do with wrong positioning and the element is showing somewhere outside the page.
Now my question is: is there a browser extension, or some other way to outline an element that is beyond borders of the page?
Thanks!
EDIT: Okay that's weird.. according to the coords it seems to be in the correct position, it also has proper dimensions, is visible and yet I can't see it.. am I missing something?
Yes, use firebug (in Firefox) or Chrome Developer console (CTRL+SHIFT+C) (in Chrome), locate your menu on html tab and checkout the computed styles for that element to see where is it. You can also type any styles you like and see how it affects your menu.
For Firefox, Firebug allows you to inspect the DOM; You can use the HTML tab to find your missing element. When you click on the element, Firebug will highlight it and overlay guides showing you where it is. It will also give you positioning information in the Layout tab on the right, and you can reposition the element by changing its style using the Style tab.
Chrome developer tools already has this built in; Go to Settings->Tools->Developer Tools (or use the keyboard shortcut Ctrl-Shift-I) to activate it. It's very similar to Firebug.
Related
When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class
however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes
Example:
so I can't inspect an element
Normally I inspect elements like this (e.g. stackoverflow)
How do you inspect an element without using the right click button?
Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time
I must be missing something important here about chrome's inspect element tools.
Could someone enlighten me here a better workflow / maybe chrome extension tools?
Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.
You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.
You can open the dev tools on a different windows and refresh your page or use firebug.
or use Firefox
On my website, I have a lot of code, many js vendors, etc.
On one specific page, I have king of a right sidebar that pops out for less than half a second, never enough for me to click on it and try to debug this weird thing (I'm thinking of putting a display none on its class).
I've tried to go through the dom and place dom breakpoints in my chrome browser but it's not doing nothing.
Does someone know how I could debug something like this ?
Thanks a lot !
Use "inspect element" to detect the sidebar and then navigate to the class or id which has the display:none; property. Then you can click it on or off in the developer toolbar...
I've been noticing some problems with chrome and the inspect element functionality.
When the page I'm currently developing loads, some elements are misplaced (The text in this case):
Whenever I right click and select inspect element on the container of the misplaced element:
The element gets then magically placed as it should be:
You may have noticed I'm using nvd3.js, however this has happened to me before, and without nvd3.js. I don't think it's a nvd3 problem (I may be wrong).
My question is: Does the "inspect element" of chrome trigger some sort of recalculation of the layout?
Thanks in advance.
Youre Using .resize() or css media queries and when you click inspect element and console window opens (fixed in bottom part of chrome) youre screen resizes and some media query or .resize() funcion affects text alignment
I'm a Chrome user and would be lost without Firebug, but one issue has always annoyed me. Namely, the fact that the Firebug console doesn't appear below the site you're viewing (ie the way it behaves in Firefox). Instead, the console sits above the site, obscuring the footer and content. It's a little thing but annoying all the same.
I understand that this is because of the way Google restricts Chrome extensions but is there a way around this particular issue?
I haven't found a solution anywhere. So, with some help from other stack overflow threads, I came up with a very simple function and as I couldn't find much about this, I thought I'd post it here for anyone with the issue.
I'm not a JavaScript programmer, but I do use jQuery. As such, I run this inside jQuery's ready method. Once the site has loaded, it'll check to see if Fire bug is open, if so, it simply adds a 400px bottom margin to the body. Obviously, if your console is bigger/small than that, just change the size inside the jQuery code.
It won't however change anything if you open the site and then open Firebug. It's nothing major, just open Firebug then refresh the page an it'll work.
// add body margin if firebug is open
if (console.log.toString().indexOf('apply') != -1 && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$('body').css('margin-bottom', '400px');
}
Hopefully this will be of use to somebody.
EDIT:
WARNING: This can possibly cause your jQuery to stop working in Internet Explorer. So, just remove this if you find that your jQuery doesn't work.
Instead of modifying your webpage's CSS code which may have adverse effects, you should just detach Firebug Lite in Chrome, then position that popup window under the resized Chrome browser window.
To perform this, just press the center button in the Firebug Lite window located at the top right corner.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
This way, you'll have two separate areas that don't overlap yet play nicely together.
Per Stan's comment above... about what does Firebug Lite provide extra when compared to native Chrome's Developer Tools, I would have to say it provides familiarity and a great DOM Tab that Chrome lacks.
More importantly thought, you can actually use BOTH consoles at the same time.
This allows easier monitoring of two different panes and with a multi-monitor setup this can be a useful scenario. Even with a large monitor things look good.
Right-click the image below and view in full size if that helps:
Open Image in New Tab / View Image
I am currently using FireBug to debug my javascript and HTML code. I was wondering if anyone knows of a feature where I can mouseover my generated web-page and it will display the DOM hierarchy of where my mouse is currently located. So if I have nested floating div elements. And I mouseover one of the divs, it will show the ID of that div, the id of its parent, the id of its parent's parent etc.
Doesn't clicking the inspect button (second from the top-left on Firebug) do something a lot like that?
google chrome, right click and select 'inspect element'. It brings up the dom tree with the clicked on element highlighted
I am not sure of this is what you are looking for. When you rightclick and use "Inspect Element", you will see the DOM and everything else in firefox.
Right click, Inspect Element also works in Firefox / Firebug
You can also use F12, Ctrl + B in IE 9.
This FireFox extension does exactly that
Web Developer Extension
You can set it to outline elements as you hover over them and it will display their info, as well as their position in the dom tree.