O que é Motion DevTools?

Motion DevTools é uma extensão do Chrome desenvolvida por https://motion.dev, e sua principal característica é "Inspect, edit and export animations made with CSS and Motion One.".

Capturas de Tela da Extensão

Baixar o arquivo CRX da Extensão Motion DevTools

Baixe arquivos de extensão Motion DevTools no formato crx, instale manualmente as extensões do Chrome no navegador ou compartilhe os arquivos crx com amigos para instalar facilmente as extensões do Chrome.

Instruções de Uso da Extensão

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.

Informações Básicas da Extensão

Nome	Motion DevTools
ID	mnbliiaiiflhmnndmoidhddombbmgcdk
URL Oficial	https://chromewebstore.google.com/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk
Descrição	Inspect, edit and export animations made with CSS and Motion One.
Tamanho do Arquivo	788 KB
Contagem de Instalações	8,000
Versão Atual	2.0.0
Última Atualização	2023-06-08
Data de Publicação	2022-03-21
Classificação	4.20/5 Total de 5 Avaliações
Desenvolvedor	https://motion.dev
Email	[email protected]
Tipo de Pagamento	in_app
Site da Extensão	https://motion.dev/tools
Idiomas Suportados	en
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\/" ] } }