CSS Shape Path Editor extension for Chrome DevTools

The Firefox DevTools come with a built-in editor to manipulate CSS Shapes, as demonstrated by Miriam Suzanne in the video below. For the Chromium-based browsers (Google Chrome, Microsoft Edge, …) the DevTools currently sport no such thing. Thankfully there’s an extension that can provide it for us. Once installed you’ll get an extra Shapes panel …

The Firefox DevTools come with a built-in editor to manipulate CSS Shapes, as demonstrated by Miriam Suzanne in the video below.

~

For the Chromium-based browsers (Google Chrome, Microsoft Edge, …) the DevTools currently sport no such thing. Thankfully there’s an extension that can provide it for us. Once installed you’ll get an extra Shapes panel that lists all shapes. Clicking one will activate its edit mode.

Crazy to see this extension dates back to 2014 already! ?

CSS Shapes Editor Chrome Extension →

~

? I’ve filed Issue #1244072 over at the Chromium Bug Tracker to see this feature get built-int into the DevTools themselves. Star it if you would also like to see it.

Via Adam


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2024-03-29T00:53:51+00:00) » CSS Shape Path Editor extension for Chrome DevTools. Retrieved from https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/.
MLA
" » CSS Shape Path Editor extension for Chrome DevTools." Bramus! | Sciencx - Friday August 27, 2021, https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/
HARVARD
Bramus! | Sciencx Friday August 27, 2021 » CSS Shape Path Editor extension for Chrome DevTools., viewed 2024-03-29T00:53:51+00:00,<https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/>
VANCOUVER
Bramus! | Sciencx - » CSS Shape Path Editor extension for Chrome DevTools. [Internet]. [Accessed 2024-03-29T00:53:51+00:00]. Available from: https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/
CHICAGO
" » CSS Shape Path Editor extension for Chrome DevTools." Bramus! | Sciencx - Accessed 2024-03-29T00:53:51+00:00. https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/
IEEE
" » CSS Shape Path Editor extension for Chrome DevTools." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/. [Accessed: 2024-03-29T00:53:51+00:00]
rf:citation
» CSS Shape Path Editor extension for Chrome DevTools | Bramus! | Sciencx | https://www.scien.cx/2021/08/27/css-shape-path-editor-extension-for-chrome-devtools/ | 2024-03-29T00:53:51+00:00
https://github.com/addpipe/simple-recorderjs-demo