How to download the CSS and JavaScript files of a website
Get the stylesheets and scripts a web page uses – one by one from DevTools, or all at once in a ZIP with their original folders.
Learning from a layout, debugging your own production site, or recovering a stylesheet you lost? The browser already has every CSS and JS file the page uses. You just need to get them out.
One file at a time (no extension)
- Open DevTools with
F12(orCmd + Option + I). - Go to the Sources tab and expand the site in the file tree on the left.
- Right-click a
.cssor.jsfile and choose Save as….
Fine for one or two files. With dozens of files, and a folder structure to keep, it gets slow.
All of them at once
- Install the free PagePack extension and open its tab in DevTools.
- Click Reload & capture everything so scripts loaded later are included too.
- Click Save all as ZIP.
Inside the ZIP every stylesheet and script sits at its original path, for example assets/css/main.css, next to the images and fonts it references. With PagePack Pro you can keep only certain file types, for example just CSS and JS.
A note on minified files
Many sites ship minified code that is hard to read. In DevTools, open the file in Sources and click the { } button at the bottom to pretty-print it.
Use what you download to learn and debug, and respect the copyright of the code you study.
PagePack saves every file of a page into one ZIP with the original folders – free, private, one click from DevTools.