【CEP 扩展开发三】Debug
内容提要
本文介绍CEP插件调试方法：浏览器环境需配置.debug文件指定调试端口，通过Chrome的chrome://inspect远程调试，但DOM事件可能失效；ExtendScript代码可用VSCode的ExtendScript Debugger插件，支持launch和attach模式，并通过$.level控制调试级别。该工具不支持sourcemap，TypeScript代码难以进行源码调试，调试工具也可作为API文档使用。
延伸解读
调试环境分离与混合调试
CEP 插件调试需区分浏览器环境和 ExtendScript 环境。浏览器环境代码可混编 Node.js 代码，调试时能在浏览器原生代码与 Node.js 函数间跳转。配置 .debug 文件指定调试端口后，通过 Chrome 的 chrome://inspect 进行远程调试。ExtendScript 代码则使用 VSCode 的 ExtendScript Debugger 插件，支持 launch 和 attach 模式。这种分离设计源于 CEP 架构的特殊性，开发者需根据代码类型选择对应工具。
调试配置的常见陷阱
配置 .debug 文件时需注意：该文件为 XML 格式但不支持注释语法，添加注释会导致调试失效。修改后需关闭并重新打开面板使 Photoshop 加载配置。使用 Chrome 远程调试时，Windows 系统扫描目标可能较慢，且关闭扩展后 devtools 窗口会失效需重新打开。此外，开启 devtools 时部分 DOM 事件（如 hover、mouseMove）可能失效，调试相关代码时应关闭 devtools 窗口。
ExtendScript 调试级别与模式
通过 $.level 可设置 ExtendScript 调试级别：0 关闭调试，1 仅在运行时异常时断点，2 为完整调试模式。建议区分环境设置，生产环境关闭以提升性能。VSCode 的 ExtendScript Debugger 插件提供 launch 和 attach 两种模式：launch 每次调试建立连接，执行结束自动断开；attach 建立持久连接，适合调试 AE 等宿主中通过 evalScript 执行的 JSX 代码。
调试工具的局限与替代用途
官方调试工具不支持 sourcemap，因此使用 TypeScript 编写的 JSX 代码无法在源码中调试，编译后代码与源码差异大，增加调试难度。此外，调试工具也可作为 API 文档使用，通过查看 JSX 变量辅助功能实现。对于复杂项目，建议结合日志框架弥补调试工具的不足。
Q&A
CEP插件调试时，如何配置.debug文件来指定调试端口？
在CEP项目根路径创建.debug文件（XML格式，不能使用注释），内容包含ExtensionList，每个Extension指定Id，HostList中为不同宿主设置Port，如<Host Name="PHSP" Port="9999" />。添加后需关闭并重新打开面板使PS加载。
使用Chrome远程调试CEP插件时，有哪些常见的坑需要注意？
常见坑包括：Edge浏览器需用edge://inspect；Windows上扫描remote target较慢（10秒内正常）；关闭调试中的CEP扩展会导致devtools窗口失效，需重新打开；开着devtools时很多DOM事件（如hover、mouseMove）会失效，调试这些事件时应关闭devtools窗口。
如何调试CEP插件中的ExtendScript代码？
使用VSCode的ExtendScript Debugger插件，支持launch和attach模式。在jsx代码中通过$.level设置调试级别（0关闭，1异常断点，2完整调试）。配置launch.json，指定hostAppSpecifier和script等，即可像调试普通JS一样使用断点或debugger语句。
ExtendScript Debugger的launch和attach模式有什么区别？
launch模式每次调试时插件与PS JSX引擎建立一次连接，代码执行结束自动断开；attach模式建立持久连接，代码执行结束连接不断开，除非手动断开。attach模式适合调试AE等宿主中CEP回调执行的JSX代码。
CEP调试工具目前有哪些局限性？
主要局限性是不支持sourcemap，导致使用TypeScript编写的jsx代码无法在源码中调试，只能在编译后的代码中调试，而编译后代码与源码差异大，增加调试难度。
如何同时调试CEP插件的浏览器JavaScript和ExtendScript代码？
在VSCode的launch.json中配置两个attach配置：一个type为chrome，指定端口和webRoot；另一个type为extendscript-debug，指定hostAppSpecifier。然后使用compounds将两者组合，即可一键同时调试。
调试CEP插件时，如何设置ExtendScript的调试级别？
在jsx代码中设置$.level：0关闭debug，1在遇到运行时异常时断点，2完整debug模式。通常直接在index.jsx开头设置$.level = 2，或根据环境区分，如$.level = isProduction ? 0 : 2。
