什麼是Motion DevTools？

Motion DevTools是由https://motion.dev開發的Chrome擴展程式，該擴展的主要功能是“Inspect, edit and export animations made with CSS and Motion One.”。

擴展截圖

下載Motion DevTools擴展crx文件

下載Motion DevTools擴展crx格式的文件，手動將Chrome擴充功能安裝到瀏覽器中，也可以將crx文件分享給朋友，輕鬆安裝Chrome擴充功能。

擴展使用說明

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.

擴展基本資訊

名稱	Motion DevTools
ID	mnbliiaiiflhmnndmoidhddombbmgcdk
官方網址	https://chromewebstore.google.com/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk
簡介	Inspect, edit and export animations made with CSS and Motion One.
檔案大小	788 KB
安裝次數	8,000
目前版本	2.0.0
更新時間	2023-06-08
上架時間	2022-03-21
評分	4.20/5 共 5 次評分
開發者	https://motion.dev
電子郵箱	[email protected]
付費類型	in_app
擴展官網	https://motion.dev/tools
支援的語言	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\/" ] } }

Motion DevTools

什麼是Motion DevTools？

擴展截圖

下載Motion DevTools擴展crx文件

擴展使用說明

擴展基本資訊

相關的擴展