Refresh icon. Can some one help me to locate an element (XPath or CSS) which is displayed?
<svg class="ult-icon .....height: 20px;">
HTML below: link.
The short answer is No, no one here can find the element you need for you. First, we'd need to see the entire page to tell you how to access the element, it may be in an iframe or multiple iframes, etc. Second, that's not really how this works.
What we can do is help you find it yourself. So, here's what I would try.
First, I'd use FireFox's developer version and inspect the element. To do this browse to the page in Firefox, right click on the element in the page and select inspect. This will open a new screen that you can use to see the HTML and JavaScript. From there you can right click on the selected element and copy the XPath, CSSS selector or grab the id from either of those.
Second, you need to determine if you are in an iframe. Once you are in the inspection screen, there is a path bar that can scroll left and right at the bottom of the screen. Check that to confirm that and look for iframe tags to determine if your element is inside of an iframe. If it is, you will need to switch to the correct frame before accessing the element. You may have to switch into multiple iframes, like moving through a directory structure, before you get to the correct one. Once you are there you should be able to access and work with the element.
Third, depending on the element you may find that some Find By methods work better than others. Try the Find By Xpath, CSS Selector, Link Text or Id until you get one that works. This is just trial and error. I usually start with the Xpath.
Related
I started building a site using a bootstrap template, but I'm having a hard time figuring out how to tweak the css. For example, a table might stretch across the entire page. But when I use F12 to look at the css, I don't see anything related to a width property anywhere around the table. Is there a better way to determine what css is being applied or inherited?
You can use the Google Chrome element inspector. Right click on a div or any other page element, and then click "Inspect Element". From there you can view the CSS that is being applied to a specific element.
Check out this Chrome plugin called SnappySnippet. (Also, prepare to be amazed)
Have a look inside bootstrap.css file , there should be plenty of code and not every element has it's own separate css , some elements are defined together
If you use google dev tools (F12), the navigation tab will let you click on "Resources." When you click that, you can look at the scripts, stylesheets, see a list of images used, etc...
if you click the "magnifying glass" in Google dev tools (F12), you can hover over any element on the page. Click that element and on the right side, the CSS will be displayed. Usually the stylesheet is called out inside the css.
I have googled, but found no satisfactory answer.
Is there a way to execute a CSS selector live in the browser in the same way you can with JavaScript in the console?
I know I can modify the CSS in the Styles pain, but this doesn't seem to let me add psuedo selectors such as :first-of-type. It also doesn't appear to show all tags affected or the tag set returned by a selector.
Is there a way I can execute section.blah:first-of-type and see the returned or affected elements?
I'm using only Chrome right now but can use FF or whatever if it gives me this feature.
In the Elements tab, you can search with selector syntax.
If you search for
.myclass
you will find elements that have class="myclass"
I think that this is the closest that you can get to what you are asking
Go to the elements tab, and press ctrl+F (for find). in the example below, enter div.answer
to the right of the search string, you see "1 of 3" stating that 3 elements met your criteria. The current one is highlighted. and you can go up & down thru the items with the arrows.
If you use jQuery in your page then you can do:
$("section.blah:first-of-type");
Executing that in the browser console will show you a list of elements that jquery matched.
Better yet you can assign it to a variable and traverse it programatically.
Acctually you can do that just via editing the Styles pane.
You have to select a parent first(html in my case).
The result is:
In this way, chrome will show all affection instantly. Not just highlight the DOM tree.
Is there a way to quickly copy all of the css code of the inspected element in google chrome?
I found that while designing, it's sometimes easier to change the css on-the-fly via inspect to figure out correct pixel distances, rather than changing in the code and refreshing the page.
Does that capability even exists?
thanks to steveax's comment I was able to find the answer, which I will share with you
Once the inspected element has been edited, going to the sources tab and choosing the appropriate CSS where that element is defined, the edited attributes will appear there, which you can copy regularly..
Obviously, a copy straight from the style window would be more comfortable..
Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:
a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or
b) View it "computed", which is all CSS rules and the values that this element has.
What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).
Basically I want to be able to:
I see an element I'd like to replicate on a website (like a button) exactly in my own website.
Use this tool to get a bunch of CSS applied to that element.
Paste on my own CSS.
Get the same looking element in my website. Yay!
Any ideas?
Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox
I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet
It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.
Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview
When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.
If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.
You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.
I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror
I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.
There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.
MDN Docs for window.getComputedStyle
Good Luck...
You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.
I have a bookmarklet that will come up with a iframe that will load a web form I have. On most site, it works fine with the bookmarklet on top of every element in the current html page. But for certain sites with a lot of javascript loading (e.g. meebo.com), the loaded iframe will go below. How can i troubleshot this? Thanks. attached screen shot.
If you are using a positionable element such as a div, you should ensure the z-index style is set to a value higher then any other element.
Of course the page you load in the iFrame may also be doing exactly this. Therefore you may need to use a timer (setTimeout) to delay for say 500ms and then get the current highest z-index and add 1 to it.
Also, because you don't know in advance anything about the page shown in the iFrame, you would actually need to manually search for all elements containing a z-Index style. Once you have a collection of these elements, then get the highest z-Index value.
I'd definitely look at using jQuery to make this much easier.