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...
Related
As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.
I'm not normally in a need to ask basic or vague JavaScript questions on SO, so pardon me if there is little details here - I'm not sure how to get more.
In the online user manual I'm maintaining, I'm adding custom buttons on each page to get a direct link to the current page (otherwise grabbing the URL just brings you to the home screen), as well as a few extra features. These buttons are added using Javascript, or rather they are already hidden in the HTML, are updated after an AJAX call and then displayed.
It has taken me a lot of work to get these working, in Firefox, Chrome, IE6, 7, 8, 9, I'm sure you know how these things go.
Now comes IE10 with yet another really weird behavior that I want to bang my head on the wall for. If you visit http://help.objectiflune.com/en/knowledgebase/ you will see those buttons on the right inside the main frame. They're grey and blue, top of the page.
So this first "welcome" page is fine, it works great, no issue. However, if you navigate to any sub page using the TOC on the left (such as Error Codes -> PlanetPress Design -> PlanetPress Design Error PXXXX), the buttons all disappear.
I've also noticed that if you get the URL for the page itself (inside the frame, again) and you open it in another tab, it first does not show them, but then refreshing the page makes the buttons appear.
I've tried using the F12 developper console, but it requires refreshing the page to show the console so I can`t use it in those new tabs. As for using within the whole frame system, it doesn't seem to be showing me any errors, nothing weird.
Again I'm sorry if this is an "it's not working" with no further technical details, but... there are none I know how to give.
UPDATE: For the specific code, please turn to http://help.objectiflune.com/common/scripts/olCommon.js , and look at the function starting at line 207 (function buildMenu()). this is the function that retrieves the information and displays the appropriate menus, such as $("#guidebuttons").show();
In ObjectifLune.css, #buttoncontainer has display: none. Navigating through the F12 window, the display of that object is none:
I would guess that somewhere in your JS, you're setting the display to block, but there's something wrong with that code in IE.
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
Ok, I'm having a weird problem:
I have a button that is inserting divs into the DOM. When the button is clicked, the first time, the div always appears immediately on the page. However, subsequent button clicks do not insert any more divs.
Now here's the strange thing, after I insert additional divs, and they don't show up, I select inspect element with the chrome developer tools, and the div instantly appears after invoking the developer tools. I can see the
$('#list').before('<div class="mybox">some text</div>');
It basically doesn't seem like chrome is refreshing, even though the new elements are being input into the DOM, the browser window doesn't reflect the changes until I go into the developer tools. But I can't figure out why?
You're right. It is a weird problem. And it happened to me too.
In my case, I was relying on an external library to create an element for me at startup. I'm still not sure what the root cause is, but I solved it by calling setTimeout(myFunctionThatSetsUpTheElement, 1).
Hope this helps.
I'm working on a project at the moment where I've come up against a rather frustrating problem in Internet Explorer. I have a series of pop ups on a particular page that are opened with JavaScript when help links are clicked. The JavaScript for them is:
function openHelpPopUp(url) {
newwindow=window.open(url,'name','width=620,height=440');
if (window.focus) {newwindow.focus()}
return false;
}
The HTML used is:
Help
Now, the pop up works perfectly in every browser except Internet Explorer. The main priority at the moment is making it work in IE7.
What happens is that, it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible. Once you click away from the highlighted area to deselect it, it stays visible. Any area that wasn't highlighted stays invisible. When you refresh the pop up though, it sometimes becomes visible without any highlighting, it sometimes doesn't.
Also peculiar is that some text within an unordered list is visible, but when I use the same list encompass the rest of the text, it stays invisible bar the bit that was already visible.
Have you come across this or anything like it before? Have you got any tips or suggestions? I'm running out of things to try so any feedback or help on this is greatly appreciated!
By adding a z-index of 100 to every P tag for IE, I seem to have gotten it visible now. Weird. I haven't used any z-index's elsewhere and the structure of the HTML should put the P's on the top anyway.
Sounds like a browser bug.
What happens if you open the URL directly? Perhaps it's not popup related?
it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible
Sounds like it might be an IE7 variant Peekaboo bug, an IE rendering problem which is nothing to do with being opened in a pop-up. You'd have to show us the page that's being popped up to be sure though.
Whilst we're here:
if (window.focus) {newwindow.focus()}
Probably should be ‘if (newwindow.focus)’ assuming the aim is to avoid focusing a blocked ‘window.open()=null’.