painty / css-used-chromeext Goto Github PK

View Code? Open in Web Editor NEW

261.0 10.0 61.0 1.42 MB

Get all css rules used by the selected DOM and its children.

Home Page: https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff

License: MIT License

JavaScript 8.47% HTML 10.40% CSS 13.02% TypeScript 44.92% Svelte 23.18%

chrome-extension chrome-devtools css-usage css-rules

css-used-chromeext's Introduction

CSS-Used

Get all css rules used by the selected DOM and its descendants.

Get it at the Chrome Web Store : CSS Used >>

Overview

Get all css rules used by the selected DOM and its descendants. Used to extrac only the used CSS. So the unused css will be left out.

If the selected DOM is the body, the result will be all the used css by the whole page curently.

Usage

F12 open the Developer Tools, select the dom and active the "CSS Used" panel. The used CSS rules of the Selected dom and its descendants will be listed.

You can click "Preview" to see the selected part with clean style rules.

FAQ

No result
1. Check whether it's Chrome Web Store pages, which is https://chrome.google.com/webstore/...., which won't allow content script injection.
2. If it's a normal webpage, check site access permission #13 (comment)
3. If it's a local file, chrome won't allow local file access by default. You can turn on the "Allow access to file URLs" in the extension management page.
Preview not right

As for the CSS rule like .wrap p{...}, if only <p> is selected, the result .wrap p{...} may not apply directly to <p>. Either changing this rule's selector to p{...} or giving the <p> a .wrap parent in the final HTML.
Not all the CSS is got
1. The result is generated based on the CURRENT HTML DOM. If a div doesn't exist in the document unless a specific user interaction, the result may miss out the style rules for the newly born div.
2. CSS custom properties (variables) are partially supported. Not working for declarations defined by $0's ancestor. Thinking it as a inheritable CSS property, as this tool won't handle inherit style.

Changelog

Go to the Changelog page

css-used-chromeext's People

Contributors

Stargazers

Watchers

css-used-chromeext's Issues

local preview HTML not rendering correctly.

The url of page inspected.

https://www.reuters.com/article/us-soccer-fifa/soccer-fifa-proposes-staging-a-new-mini-world-cup-every-two-years-idUSKBN1I31AL

In chrome dev tools, select <html lang
Click on Local Preview
Copy the HTML that opens in about:blank by open dev tools and copying the entire HTML tag.
Actual result.
The copied HTML renders differently than the one in Local Preview. Any idea what might be causing this?

This extension has a Firefox version？？？？

doesn't work on letgo

The url of page inspected.

https://us.letgo.com/en

The element inspected.

body

Expected result.

any css

Actual result. (tried and reinstall addon, still same)

Select another dom on the left 
or
Reopen the Devtool

inconsistent layout

The url of page inspected.

https://naturallysensible.com/8-vegan-fall-desserts/

The element inspected.

html

Expected result.

the follow-us on instagram button should be green and centered.

Actual result.

formatting is lost and the follow button white on green background has different layout.

Text Properties Missing

The url of page inspected.

every page

The element inspected.

any text

Expected result.

.someoelement{font-size: Xpx; font-family: XXXX;} //etc.

Properties missing

Actual result.

.someoelement{}

选择了根元素html，特别好用！

导出的css是最终混合了css/style/js的效果之后的css。
里面的遍历/正则写的好diao……

说重点，我觉得，稍微改一改，把图片都搞成base64内嵌在html里，就能实现保存当前网页了，又是一个插件。。（js就先不管了，有了文字和css已经实属不易了……）

神器。

Font family not being set on text

The url of page inspected.

https://www.faceit.com/en/home

The element inspected.

body > div:nth-child(2)

<div ui-view="header">...</div>

Expected result.

.text-light {
    font-family: Play, sans-serif;
}

Actual result.

.text-light {
    font-family: "Times New Roman";
}

extension stuck in parsing css

The url of page inspected.

https://www.bighammerwines.com/products/2016-nesios-cabernet-sangiovese-igt

The element inspected.

<html lang

Expected result.

local preview should show the css

Actual result.

stuck in parsing
![image](https://user-images.githubusercontent.com/34253759/59971810-3ae05b80-9538-11e9-80c8-f469f840016f.png)

Uncaught (in promise) TypeError: undefined is not a valid argument for URI

I am using on local host its showing error Uncaught (in promise) TypeError: undefined is not a valid argument for URI .. in url.js

Extension don't show up on Brave

I tried a couple of websites and in all of them the extension didn't work on Brave but worked on Chrome

Here the console on chrome:

and on brave:

Also on Brave there was a message on console that I haven't seen on Chrome on the website I tested (spacehey)

npm module

Hi,
Suggestion: Is it possible to build NPM module or an API wrapper that can query a given node for a URL and output the local preview to HTML file?

I am happy to contribute back as a PR, will need some hand holding though..

No CSS is displayed....

The url of page inspected.

Any page I tried...

The element inspected.

Any element I tried ....

Expected result.

See some CSS

Actual result.

See the following:

Reload the inspected page
Reopen the Devtool
Select an elements on the left

(Even when reloading or restarting Chrome.)

Instead of css the extension displays a error message

This is the error message:
"on Navigated.
Select another dom on the left
or
Reopen the Devtool. "

I reopened Google Chrome and enabled allow access to file URLs and on all sites. It still doesn't work. Does anyone have a suggestion?

CSS Used incomplete result

I'v try to get complete CSS for an element but css is not complete, is there any limitation.

Can't parse google.com SERP

The url of page inspected.

https://www.google.com/search?q=dogs

The element inspected.

#rso > div:nth-child(3) > div > div:nth-child(1) > div > div > div.s But I haven't had success with any element.

Expected result.

Some CSS!

Actual result.

For the first time installed/updated/allowedFileAccess:
Refresh the inspected page
Reopen the Devtool or Select another elements on the left
If problem persists, please create an issue.

I've tried refreshing and reopening devtools. The console is empty.

Navigational links no longer working

The url of page inspected.

https://www.vappingo.com/Proofreading-Services/Dissertation-Proofreading/

When I used the CSS Used tool, the code selected created a page that displays perfectly. However, the navigational links no longer work. In the code preview, they do work; however, on the live site, they are inactive.

Do you know what is causing this?

No license

What's the license for the code in this repository?

See https://help.github.com/articles/licensing-a-repository/

Copy html tag style

I noticed that the html style is not getting copied by the extension which leads to my element looking weird because the font-size and is defined there and my site is using rem alot.
Please also copy the html tag, im sure this would solve many issues users have right now.

FAQ: get the css from parent defined

about FAQ 2. css will be ignored when defined with parent selector.
like

<div id="parent"><div class="child"></div></div>

#parent .child{
  background: red;
}

if we choose the child element as $0 , the result is empty.

i have a method to solve this problem:

firstly, checking whether the last selector is matched. matched in this case .child

$0.matched('.child') // true

secondly, checking the parent selector is the parent of the target:

const parentSelector = '#parent';
const parentElement = document.querySelector(parentSelector);
const isMatched = parentElement.contain($0);

we can add a root node as the wrapper of $0

<div id="the-root-for-wrapper-result"><div class="child"></div></div>
#the-root-for-wrapper-result  .child{
   background: red;
}

export to codepen broken

Hi,
It's not possible anymore to export the generated code to codepen via the button

doesn't seem to like local files (file:///)

The url of page inspected.

copy an html file and open it in chrome - of course it needs some on-page css

The element inspected.

any

Expected result.

'css used' should have current, live rules with any non-relevant selectors stripped out

Actual result.

'css used' has no rules available; says select another dom on the left or reopen the devtool.

//wrong detection

I created a title in the wrong place, I apologize :(

Doesn't work on reddit

I haven't tried it a lot, here in github seems to work okay. I'm trying in reddit, to extract the CSS related to the ".md" class there for a Mark Down previewer but I get this:

I noticed the console complained at the same time:

But when I click to see that code it loads nothing 😕

Inconsistent layout when copy/paste HTML and CSS from codepen.

The url of page inspected.

https://www.iheartraves.com/blogs/post/10-festival-camping-tips

The element inspected.

html

Expected result.

Banner logo should be in the center

Actual result.

CodePen preview shows the banner logo in center, however, when I copy paste the codepen HTML and CSS, the banner logo in a text file, the banner logo layout is off.
Any idea why the logo might be off? I compared the file contents, and they look the same.

RTL & Responsive Problem

Hello
Thanks for this amazing tool
But i have two serious problem.
this is my site: https://danialtaherifar.ir
when i used this css code , header section direction changed to LTR instead RTL and Rearranged objects in header.
also Responsive layout not work.
can u help me for resolve this problems?and improve this great tool?
Thanks

How to apply CSS Used to the local file or localhost?

I downloaded a template, I used Pinegrow or Google Chrome to copy each determined and specified in the specified page so I didn't want to use the whole CSS, but they are many things. I tried to run your plugin for a local file (for example: file://Users//......./index.html

Firefox support

It would be nice if this extension supported Firefox.

hangs on "4000th rule"

Unfortunately I can't include a URL here as I'm using this on localhost. That said I'm getting this error when inspecting a large page. The same page works at its www location, but it's behind a login -- so a URL wouldn't help
Other localhost pages inspect fine. I'm using this in Chromium Edge, btw, v88.0.705.50 64-bit

Get new style after change in console

Thank you for your great plugin !

I think it would be very interesting if it gets the new style after it has been changed in console., because it gets always the original CSS, not the altered one.

issue merge styles from media="print" to global styles

The url of page inspected.

https://www.everydiam.com/diamond-jewelry/sku30191.html

The element inspected.

div.wrapper-bottom

Expected result.

.wrapper-bottom {
    background: transparent url("https://www.everydiam.com/skin/frontend/default/forest_fancyshop/images/footer_bg.gif") repeat-x scroll center bottom;
}

Actual result.

.wrapper-bottom {
    background: transparent url("https://www.everydiam.com/skin/frontend/default/forest_fancyshop/images/footer_bg.gif") repeat-x scroll center bottom;
}
// more style from media="print"
* {
    background: none!important; 
    text-align: left!important;
}
* {
    margin: 0;
    padding: 0;
}

note: the style

* {
    background: none!important; 
    text-align: left!important;
}
* {
    margin: 0;
    padding: 0;
}

from link media="print" href="https://www.everydiam.com/media/css_secure/6a4b386e11eb511b87056ed631be9245.css" type="text/css" rel="stylesheet",

pls don't merge styles code from media print and just keep styles from media ="all"

m.naver.com

The url of page inspected.

Access it with a mobile viewport: https://m.naver.com/

The element inspected.

cp_banner_wrap

Expected result.
Actual result.

Nothing

Using relative URLs

The url of page inspected.

Any page where CSS includes fonts, images, etc.
For example https://www.drupal.org/

The element inspected.

ul li.expanded

Expected result.

ul li.expanded{
  list-style-image:url(/misc/menu-expanded.png);
  list-style-type:circle;
}

Actual result.

ul li.expanded{
  list-style-image:url(https://www.drupal.org/misc/menu-expanded.png);
  list-style-type:circle;
}

As a variant, we can have an option like "Use relative paths only" or smth like this.

Can't copy label css from google Graph APi

Example:

It should gather inline style also.
<text x="0" y="15" style="cursor: default; user-select: none; -webkit-font-smoothing: antialiased; font-family: Roboto; font-size: 16px;" fill="#757575" dx="0px">Percentage occupancy</text>

Doesn't handle CSS variables

Description

On any page that uses CSS variables CSS Used fails to copy the variable definitions.

Expected result.

CSS Used copies the CSS variables

:root{--color:#333;}div.somediv{color:var(--color);}

Actual result.

div.somediv{color:var(--color);}

Not working with Google websites

Hi there,

If I try to check the CSS of a Google search page for instance, I can't get through the initial page in the CSS used tab that says I should restart the tab/chrome.

inherited properties should be changed to the inherited value if not inherited

css properties that are set to intherit should be changed to the value inherited, this could be done by looking at the rendered css properties, and this should be applied only if no actual inherit is possible, when all parents of one element do not have that property, and is likely on a element we don't want to extract, this could be really usefull to get specific elements and save time modifying them to look like in origin.

Parsing won't work on my website

Hi,

First i must say that i used your awesome plugin for sometimes. I came across a bug on your code that is happening during the parsing of the css. My css is all compiled into on app.css.

Here is the erreur that i get inside the console:

I'm on Chrome Version 70.0.3538.102 (Official build) (64 bits)

Element Preview doen't work on new Chrome.

Since latest chrome update - 69.0.3497.100 - local preview doesn't work. Probably some changes in the API. Codepen still works fine, so it's not a big deal, but still

responsive web design CSS doesn't work correctly.

Go to any RWD website: https://techcrunch.com/
Select the top nav bar class, "nav-bar" in this case.
Click on CSS Used -> Local Preview.
The preview window doesn't show the mobile version of the nav-bar, it shows the desktop version.
Resizing the window doesn't help either.