how to debug bodymovin source code?

[cgeffect]

I encountered the same problem. After installing bodymovin on AE, open the bodymovin plug-in, and you can directly access the plug-in through localhost. However, the plug-in is accessed through The port number configured in the debug file is accessed, and the code is packaged code, and the source code cannot be debugged How can I debug the source code, modify it, and then release it again?

[Bjorninn1]

This is what I did to make this work finally: I had node version 12.22.12 installed, not sure if that matters.

1. Setup AE for debugging extensions (guide)
2. Install the CEF client you'll need for remote debugging
3. Install extension dependencies npm i and also npm audit fix
4. Install server dependencies cd bundle/server && npm i and also npm audit fix
5. make sure you have gulp installed npm install --global gulp-cli
6. Inside gulpfile.js change the path to your local path: var extensionDestination = "../../../tropi/AppData/Roaming/Adobe/CEP/extensions/bodymovin";
7. Run npm run build (from the main folder, if you are now in the server folder do cd ../.. before running it)
8. Run npm run start-dev (from the main folder)
9. remove bodymovin from AE if you have it installed
10. move the build folder over to extensions folder /Library/Application Support/Adobe/CEP/extensions and rename the build folder as com.bodymovin.bodymovin
11. Open the CEF client and navigate to http://localhost:8092

[cgeffect]

@Bjorninn1 Thanks, This step has been successfully run However, I can't see the source code of JSX. The JSX running is packaged. Under localhost: 8092, there is only bundle.js, although Chrome has prompted source map detected, the source code cannot be displayed, use https://stackoverflow.com/questions/34087143/load-separate-sourcemap-file-in-chrome-dev-tools Neither can I However, you can see the source code in localhost: 3000

port 8092

port 3000