Fast and easy way to copy web components, HTML widgets and parts of website design.
Web Design Pirate is a Chrome DevTools extension that allows you to select an HTML node, and then gives you only the CSS styles that you need to render the full component (subtree).
Optionally, for copying wrapper-style components it also allows you to specify the level of inner HTML content that can be thrown away (to further reduce the number of needed CSS styles).
You will get a new tab called Pirate in your Chrome DevTools. If you inspect an HTML element on the page using the regular Elements tab, then switch over to the Pirate tab, that element will be automatically selected.
Latest reviews
- (2023-07-01) Luis Barbosa: Loved it bawss! easy and straight forward to use. Most direct problem solver.
- (2023-06-16) Adan Vasconcelos: I tried several extensions and this was the only one who helped me copy the style from an element. Very helpful.
- (2023-05-17) Vladan Colovic: Very good
- (2023-01-02) Aram Hagopian: edit: my bad got it workin. dev tools were being dumb original: Doesnt even seem to do anything.. tried on several sites, returned literally nothing. seems to be a client-side issue though as some people can use it but others cant. oh well, no design pirating for me.
- (2022-12-05) Dan Ramirez: no se como usarlo guiame dan1487@gmail . co om
- (2022-05-30) Raul Peixoto: An error occurred. Error: Body exceeded 1mb limit
- (2022-01-24) Rogerio M. Souza: Excellent! Working fine!
- (2021-09-23) Виталий Владимирович: this thing works sometimes!
- (2021-01-02) Zero One: Version v1.3 seems to work well. Thanks!
- (2020-11-23) Steve Jones: Tried it on several pages & elements, I just get the following error report in the 'pirate' panel: An error occurred. Error: SyntaxError: Unexpected end of JSON input Version 87.0.4280.66 (Official Build) (64-bit).
- (2019-10-08) Tim Hall: Looks promising but CSS seems to fail to copy (same issue as Lee mentioned 1 year ago), looks like this is a dead extension CSS Used does the trick nicely https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff?hl=en
- (2019-05-22) abdellah mamas: i cant see the css..it shows only "CSS result will display here"
- (2018-10-05) Lee Quessenberry: Doesn't seem to be working. {"isException":true,"value":"DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules\n at slice.call.map (<anonymous>:2:65)\n at Array.map (<anonymous>)\n at getStyleSheets (<anonymous>:2:48)\n at <anonymous>:8:5"}
- (2018-05-18) sam softnwords: Amzing application that help me for solving issues right away and quick