I'd like to point the developer tools at a specific iframe within a document. In Firefox, there is a button in the toolbar. In Chrome, I found this:
But I don't know how to use this feature in panels other than the Console. In Firefox, "If you select an entry in the list, all the tools in the toolbox - the Inspector, the Console, the Debugger and so on - will now target only that iframe, and will essentially behave as if the rest of the page does not exist."
How to inspect elements in an iframe as if the rest of the page does not exist? I need to see how the iframe fits in the parent page, but don't want to see the elements of the parent page in the Elements panel (because of the depth of the elements).
One possible workaround is to enable the still-in-development Out-of-process iframes (OOPIF) using chrome://flags/#enable-site-per-process flag:
A new devtools floating window will open when an iframe is inspected via rightclick menu.
To inspect a youtube-like iframe with a custom context menu just rightclick again on that menu.
IFRAME contents won't be shown in the parent Inspector since it's in a different process.
You may want to do it on a separate installation of Chrome like Canary or a portable because the feature breaks iframes on some sites (these flags affect the entire data folder with all profiles inside).
Related
first time here and completely new to coding. I want to track button clicks on my website in Tag Manager. The button is a thumbnail in an image gallery. It's the only video in the gallery and I want to see how popular it is compared to the images. The trigger type is 'All elements' and I tried to use Click Class as a trigger. The problem is that all the thumbnails in the gallery have the same class. So there is no way to identify the video thumbnail. Can't use Click URL either since it's not a link. It doesn't have an ID either. Any tips?
What you need here is to use a more specific CSS selector to the element you're wanting to trigger on. Most modern browsers can help you out there. If you right click the element you want to capture clicks on, you'll have something along the lines of "Inspect Element" as an option.
Chrome Example
In Chrome, this appears at the bottom of the list under "Developer Tools -> Inspect" as I see when I do the same for the Ask Question button on this page.
Firefox Example
In Firefox, this is just the Inspect option at the bottom of the context menu.
Other browsers will generally be similar. Selecting that option will open the Developer console, but will generally auto-select the element you selected from the page. In Chrome (again, other browsers will be similar), right click the element and select Copy -> Copy selector.
This will copy a more specific selector than just the element's CSS ID to your clipboard. You might want to copy this down somewhere temporarily.
Back to GTM - You're right that you want to use the "Click - All Elements" trigger type here. Select the "Some Clicks" option so we can apply a filter to the event. Set the left-most option to "Click Event", the middle option to "matches CSS selector" and the paste the value for the CSS selector you've got in your clipboard. Save that, and you're good to go!
Now, this assumes that you're not doing a lot of dynamic work on your page. The CSS selector your browser gives you will be accurate for that very moment, but it may very well specify classes that change dynamically (e.g. if you're using a single-page application like Angular or Vue), so you might need to tweak it a bit to be generic enough that you can capture the element, but not so specific that it looks for a particular class that might change each pageload.
I am new to CSS and just learned how to inspect an element. My question is how can i get a whole/full CSS code for an element?
Let say i need a full css code for a form (https://townends.co.uk) please see search form on homepage, How can i get that whole code for this module?
Thanks in advance.
A
Right click -> View Page Source from site.
Then find "< link rel='stylesheet'" keyword. You have all the css files associated.
Sounds like you could use the dev tools in your browser. They can be super helpful for seeing what actually is affecting different elements in your site. depending on which browser you are using the shortcut for it is different. My favorite suite of in-browser dev tools is in Firefox(check out the developers edition of Firefox as well).
From within the dev tools of Firefox you can click on the arrow pointing into a box from the highest level tabs. This allows you to hover over any element on your page and display the classes and ids affecting the element as well as the rules being used on the element in the dev tool partition of your screen at the bottom. There are many more useful tools in browsers so explore it a little and it will probably improve your productivity.
The section which is in between the horizontal navigation bar and the "Schedule" in this site is built as a Google gadget.
When I navigate through pages of this site on Chrome and use the Chrome's BACK button to come back to the home page, the gadget completely disappears most of the time. The same thing happens with the FORWARD button as well.
When I inspect the DOM tree when the issue is active, I see that the iframe element of the gadget is there but its DOM object (html section) is null. If I reload the iframe or refresh the page, the gadget appears.
The gadget is hosted in Github here (abva.xml file).
This site works perfectly fine on all other browsers. I have been fighting with this for many days with no avail. I am pretty new to Gadget development. I will truly appreciate if someone could help me resolve this issue.
Thank you
The issue was resolved when an HtmlBox gadget with a div in it was inserted before my gadget. I made the div empty and set its width and height to zero so that it wouldn't make any visual impact. I don't have a logical explanation for this solution though.
When using Selenium, I found the Chrome -> Web Developer -Styles window very useful in getting CSS names of web controls.
I could right click on a web control and would get the CSS name for that control. This helped me avoid using XPath.
However, the in-house web application has blocked right click, so I am not able to use that facility any more. However I can still use Firebug to show me the XPath of a control since it works if I click the arrow in Firebug toolbar, which then displays XPath of every control that I hover.
So, the question is - Does Firefox addons have a corresponding CSS identifier tool?
Or
Is there a way around the right click block in Chrome? (For some reason Chrome used to guess or build the CSS name quite accurately which I did not find in Firefox.)
The HTML panel of Firebug has a Styles side panel, where you can get all the applied styles for the selected element.
I have an iframe which contains a few select drop-down lists for data entry. I recently began noticing that mouse-clicking the select element in the iframe, the drop-down list doesn't expand. The user can click on the drop-down to set focus on it, and then scroll through the contents using up/down arrow on the keyboard, but clicking the arrow button beside the list doesn't cause it to expand & show its contents.
The parent page this frame is embedded on resides on a different domain. Initially I thought this might have something to do with javascript onfocus events within the iframe. I stripped out all of the scripting, got rid of all of the css and pared it down to a simple static html parent with a simple iframe page of static html containing just a select element. When run on the same server, the dropdown behaves normally, but when the parent page resides on one domain, and the iframe content on another, the select list cannot be expanded.
This problem only seems to occur in IE7. I've tested in IE8 & IE9 without any problems, as well in Safari, Chrome & Firefox. I found a couple of blog posts (links below) that cropped up within the last week that seem to be running in to the same problem, but no resolution.
http://johannes.jarolim.com/blog/2011/10/20/internet-explorer-cross-domain-iframes-and-unusable-select-boxes/
http://scrumpy-jack.com/post/11177166236/html-select-crazy-egg-ie-and-iframes-updated
Has anyone found a solution to this problem?
We put in place a workaround for this issue by swapping out the standard drop down menus with JQuery drop downs for IE7 users only. We developed a script and dropped it between some IE conditional tags.
We couldn't wait for MS to issue another patch!
Apparently this bug is due to a security update that was just released (2586448):
http://support.microsoft.com/kb/2628724