I was having trouble getting Thunderbird's developer tools inspector to focus on an add-on's dialog box, since the usual technique of using the "pick an element" tool doesn't function there, nor do you get the "inspect element" option on right-click in the iframe. So, I thought I would post the solution here to help others.
The trick is to use the "Select an iframe" button on the right side of the toolbar:
This will show a long list of iframes, one of which should be your add-on's dialog in the format:
chrome://myaddon/content/myaddonDialog.xul
Unfortunately, you still have to dig around through the tree to find the right elements, but at least they are highlighted in red on the iframe while you are searching.
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.
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'm trying to set the media query in chrome to go to print. I tried to follow this post - Using Chrome's Element Inspector in Print Preview Mode?
However, I can't find the Emulate CSS media option under overrides.
Has it been moved? Where should I look for it?
I tried in the Emulation in the console drawer. It's not in their either -
They move it every so often. At the moment it's in the Rendering panel. To find it:
Open the lower panel (press Esc while in the Developer Tools)
Open the Rendering panel from the dropdown
Select Emulate print media
For emulating print CSS, it looks like this now, as of Chrome 49, April 2016.
It's under any of the tabs where you can open the console in the dev tools (pretty much all of them except for the Console tab). For example under Sources, go to the upper right hand of the tools and click the Show Console icon (the icon that looks like a greater than sign with three vertical bars). That should open the console and you should see the Emulation options.
I'm working on an app that's sort of a bastardization of old and new tech (ASP/ASP.NET). It's all running in IE7. I'd like to be able to right click, View Source and actually see all the html that I'm seeing with my eyes. For example, I have a bit of text in the middle of the page that's in a table. I right click directly on that bit of text and "View Source" and the text isn't in the HTML that I'm looking at. There's no line break or special characters. It's a single piece of text like ABC123. Yet ABC123 isn't in the HTML that I see when I view source.
Is this just something that I'm stuck with? If not, how can I get to the HTML that I want? The app won't run in FF so Firebug is out of the question. I've tried a few developer toolbars for IE but have found them to be flawed at best, not working at worst. It's just very frustrating; I want to make a little change to a style of a TD and I have to go through way too much work just to see if I like it (because of the complex way that the HTML is generated).
When developing in IE I use the IE developers toolbar:
http://www.microsoft.com/en-us/download/details.aspx?id=18359
It will allow you to see rendered HTML on the page, and allow you to drill down and select specific elements that you want to see. There are various highlighting functions, and you can trace styles back to their source.
It's not the be-all and end-all of developer toolbars, but for those times I can't use Firefox / Firebug it does the job over other solutions I have tried
IE7 Pro gives a right click and "View Generated Source" option.
Some ideas:
Firebug Lite
Use IE8 (with its developer tools) in compatibility mode.
MS created a developer toolbar for IE7 (sort of like Web Developer FF extension): http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Temporarily add a link with an onclick handler to dump document.outerHtml into a <pre>