Inspect, edit and export animations made with CSS and Motion One.

Latest Version

Version
2.0.0
Update
June 8, 2023
Size
788KiB
Developer
motion.dev
Category
Users
7,000+
Rating
4.5 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
Storage
WebNavigation
See more

Motion DevTools Extension

Motion DevTools is a browser extension to inspect, edit and export animations made with CSS and Motion One.

🔍 Inspect: Press record and interact. Detected CSS and Motion One animations will be plotted on a classic timeline interface. Use the playback controls to scrub through and replay your animation from any point.

✍️ Edit: Add, move and remove keyframes. Edit values and easing with custom controls, and your edits will be reflected on the page in real-time.

🚢 Export: Perfected your animation? Hit the export button to instantly generate code. Export any animation into CSS transitions, CSS animations or Motion One.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Motion DevTools", "description": "Inspect, edit and export animations made with CSS and Motion One.", "version": "2.0.0", "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAjWcsdcmAGQ8cX/DQG72r1deFTf4ONxlCor1HvW1/lLG/R60VCOuEGLR1OKNrCPHid2gFrlShfDe/1G1VTefoIMt5z7jlHNuC7i7+mQg9ybbPje2HDKUrOAN5ldo3agqnEJFh+wA2rb6ehOIZVpZ7/F8Lwja196bvWMSNn+9ktM+fYE3DJacZbf/mySPlvRt8ToG++hE6taMKN4KnMJC08vWZ33fz/oeQZ2fDMBGOYP/9S6LOGoPqYY59Z+9wniZjFN4oE4ORxuP9bek0h15FnYeEvutFY8za0wdLng5bqwDWUlgW51x6MZpJWv1JtD66PBlQVHhX9FJV6m/HUTE/qwIDAQAB", "manifest_version": 3, "icons": { "16": "/assets/icon-16.png", "32": "/assets/icon-32.png", "48": "/assets/icon-48.png", "128": "/assets/icon-128.png" }, "devtools_page": "devtools.html", "background": { "service_worker": "js/background.js" }, "content_scripts": [ { "matches": [""], "run_at": "document_start", "all_frames": true, "js": ["js/bridge.js"] } ], "web_accessible_resources": [ { "resources": [ "devtools.html", "editor.html", "js/background.js", "js/client.js", "js/devtools.js", "js/editor.js" ], "matches": ["https://*/*", "file:///*", "http://*/*"], "use_dynamic_url": true } ], "permissions": ["storage", "webNavigation"], "host_permissions": ["file:///*", "http://*/*", "https://*/*"], "externally_connectable": { "matches": ["https://*.motion.dev/*", "*://localhost/*"] }}
Read more

Similar Extensions

icon

Heurio - One-Click Bug Report & UX Check Tool Extension · Developer Tools 7,000+ 76 ★ 5.86MiB

icon

Solid Devtools Extension · Developer Tools 7,000+ 7 ★ 123KiB

icon

VisBug Extension · Developer Tools 7,000+ 252 ★ 5.38MiB

icon

Amino: Live CSS Editor Extension · Developer Tools 7,000+ 453 ★ 1.45MiB

icon

Jinno: code any React component with AI Extension · Developer Tools 7,000+ 38 ★ 18.37MiB

icon

CSS Peeper Extension · Developer Tools 7,000+ 363 ★ 279KiB

icon

Responsive Viewer Extension · Developer Tools 7,000+ 298 ★ 639KiB

icon

Hoverify Extension · Developer Tools 7,000+ 145 ★ 14.54MiB

icon

CSS Brio Extension · Developer Tools 7,000+ 5 ★ 86.26KiB

icon

daily.dev | The homepage developers deserve Extension · Developer Tools 7,000+ 2460 ★ 2.28MiB

icon

Web Vitals Extension · Developer Tools 7,000+ 43 ★ 398KiB

icon

Gimli Tailwind Extension · Developer Tools 7,000+ 33 ★ 151KiB

icon

Rayst - Reveal the web Extension · Developer Tools 7,000+ 20 ★ 455KiB

icon

SuperDev Pro Extension · Developer Tools 7,000+ 48 ★ 7.6MiB

icon

CSS Scan Extension · Developer Tools 7,000+ 84 ★ 1.41MiB

icon

Dopely Colors Extension · Developer Tools 7,000+ 15 ★ 2.87MiB

icon

CSS To Tailwind Extension · Developer Tools 7,000+ 22 ★ 182KiB

icon

Colorway: Eyedropper & Color Picker Tool Extension · Developer Tools 7,000+ 181 ★ 201KiB

icon

Checkbot: SEO, Web Speed & Security Tester ? Extension · Developer Tools 7,000+ 940 ★ 1.67MiB

icon

Designer Tools Extension · Developer Tools 7,000+ 227 ★ 987KiB

icon

CSS Stacking Context inspector Extension · Developer Tools 7,000+ 21 ★ 262KiB

icon

CSS Inspector Extension · Developer Tools 7,000+ 64 ★ 2.57MiB

icon

Omni - Bookmark, History, & Tab Manager Extension · Productivity 7,000+ 63 ★ 1.91MiB

icon

Refined GitHub Extension · Developer Tools 7,000+ 213 ★ 572KiB

User reviews

icon

Ferran Buireu (ID: 000000608c9767e4) Voted 5 ★ - Updated 10/30/2022 Se integra muy bien con las DevTools del navegador y detecta las animaciones automáticamente. Espero que tarde o temprano estas utilidades se integren nativamente en el inspector pero por ahora, de lujo.

icon

LN (ID: 000000d209497ee3) Voted 5 ★ - Updated 03/23/2022 J' adore !!!