The Extract Stylesheets Bookmarklet is a handy Bookmarklet.
With one click, this bookmarklet will extract all stylesheet CSS and open them in a new tab.
javascript:!function(){const e=Array.from(document.getElementsByTagName("style")),t=Array.from(document.getElementsByTagName("link")),l=window.open();if(!l)return void alert("Popup blocked. Please allow popups for this site to view extracted stylesheets.");const o=l.document;o.open(),o.write('<!doctype html><html><head><meta charset="utf-8"></head><body></body></html>'),o.close();const n=o.createElement("base");n.href=location.href,o.head.appendChild(n);const r=o.body;function i(e){r.appendChild(e)}function s(e){return o.createElement(e)}function h(e,t){const l=s(e);return l.appendChild(o.createTextNode(t)),l}i(h("style","iframe{width:100%;height:18em;border:1px solid;}")),i(h("style","pre{width:100%;height:18em;border:1px solid;overflow-x:auto;}")),o.title="Style sheets in "+location.href,i(h("h3",o.title));for(let t=0;t<e.length;t++){const l=e[t];i(h("h4","Inline style sheet"+(l.title?' title="'+l.title+'"':""))),i(h("pre",(l.textContent||""||"").replace(/^\s*\n/,"").replace(/\s*$/,"")))}for(let e=0;e<t.length;e++){const l=t[e],o=(l.getAttribute("rel")||"").split(" ");let n=!1;for(let e=0;e<o.length;e++)if("stylesheet"===o[e].toLowerCase()){n=!0;break}if(!n)continue;const r=l.title?' title="'+l.title+'"':"";i(h("h4",'link rel="'+l.rel+'" href="'+l.href+'"'+r));const a=s("iframe");a.src=l.href,i(a)}}();Drag me to bookmark bar: 👉🏻 Extract Stylesheets
What this bookmarklet does #
- Lists every inline
<style>block and shows its CSS in a scrollable<pre>box. - Finds every
<link rel="stylesheet">and shows its resolved URL. - Previews each linked stylesheet in an iframe so you can quickly scan the file.
- Sets a
<base>tag in the report window so relative URLs resolve correctly to the source page.
Right click on image to open in new tab
Why it’s useful #
- Audit styles: See all inline and external styles in one place.
- Debug quickly: Spot duplicated rules, large files, or unexpected inline CSS.
- Shareable view: The report opens in a new tab—easy to screenshot or share.
Notes and limitations #
- Some sites may block embedding styles via
iframebecause of CSP rules; in such cases, the external CSS preview may not render. - Linked styles without a valid
hrefor those built dynamically after load may not appear. - Very large inline styles are shown inside a scrollable area for readability.
Tip: Run it on pages with heavy frameworks to quickly understand how much CSS is inline vs external.
- Previous: Event Listener Viewer
- Next: Font Inspector