Tool for developers.

Effortlessly investigate the CSS styles of any hovered element on any site (I want to believe) with GimmeStyle. Additionally, you can copy the CSS, along with CSS of the children elements and HTML code, with just one click.

Browser DevTools can be tricky to use, especially when you need to quickly find all the styles of a selected element or copy the markup and styles (including those of nested elements) of a complex site component.

While this isn't a common task, it can be necessary at times. GimmeStyle is designed precisely for these situations.

Just drag GimmeStyle button from the Demo page to the bookmarks panel of your browser.

Click on this bookmark will activate GimmeStyle script on any page.

The second click on the bookmark (esc or button with a cross) will close GimmeStyle script.

• Nothing to install, just simple bookmarklet
• Zero dependencies. Made via JavaScript
• It merges rules for the same selector
• It merges rules for the same selector in same @media
• It adds inline styles
• Easy way to copy interesting styles (including children styles) and HTML

• Popup adds horizontal scrollbar in some cases
• Used 'scrollend' event, which is not supported in Safari
• Can't copy styles and HTML to clipboard for http (not secure) sites
• It does not work for local pages because of security rules (JavaScript in the browser doesn't have access to local files). Please restart your browser with the flag "--allow-file-access-from-files" to fix such issue.
• May not work for sites with third-party styles, especially for sites with insecure (HTTP) connection (or depending on the server security settings). A workaround may have used a proxy service, but such cases are not currently supported.

MIT © 2024 Sergey Vaitehovich