【CEP教程-4】开发工具选择和调试

【CEP教程-4】开发工具选择和调试

开发工具的选择

上篇文章我们介绍了Adobe CEP插件的基本构成,它包含了由浏览器渲染和交互的面板部分,和实际操作PS完成任务的ExtensionScript部分。

这两块的主要编程语言都是Javascript,所需要用到的技术都是web开发相关的技术栈,所以在选择开发工具上,也会偏向于web前端开发领域。理论上,因为是做页面和JS脚本开发,并不限制你用什么开发工具,只要一个顺手的文本编辑器,能够写Html/css/javascript就可以了。 不过处于开发效率,体验上,以及调试的方便性,我们有一些推荐选项。

1. Visual Studio Code

首选,没有之一!

它是目前市面上前端开发最流行的开发工具,免费,易用,还具有丰富的扩展插件供你选择,提升日常开发效率。 这里重点强调介绍的是Adobe官方基于VSCode也提供了一款开发调试插件,它能够直接和PS通信,支持调试你的JSX脚本。

ExtendScript Debugger

这里是对应的下载链接地址

安装完成之后,随便新建一个测试文件 demo.js

1
alert(app.documents.length);

接着打开VSCode左侧运行按钮,创建一个启动配置 launch.json

1
2
3
4
5
6
7
8
9
10
11
12
{
"version": "0.2.0",
"configurations": [
{
"type": "extendscript-debug",
"request": "launch",
"name": "demo.js",
"program": "${workspaceFolder}/demo.js",
"stopOnEntry": false
},
]
}

接着点击底部 选择目标应用 就弹出电脑上安装好的Ps版本

选择目标应用

选择Ps版本

最后,点击运行,就可以在Ps中看到执行的效果了

运行脚本

如果你的脚本执行有错误,它能够直接定位到对应的行,并且输出一些上下文,和传统的前端调试差不多

错误提示

你还可以在你的编辑器中设置断点,进行JSX脚本的单步调试,你通过 $.write() 打印的内容,会在底部的Console中进行输出,非常好用。总体来说,ExtendScript Debugger 是Adobe希望用来替代老旧的那款ExtensionScript编辑器 ExtensionToolkit

然而……然而……

Adobe一如既往的尿性,这个项目也停止维护更新了,最后一次升级是在2019年7月,这个插件还是存在很多Bug,稳定性也一版,经常不不动,就连不上Ps了,这个时候,可能可以通过重启Ps/VSCode/电脑等来恢复链接状态

2. ExtendScript Toolkit

这里是下载地址

这是早期Adobe提供的用于开发调试ExtensionScript的开发工具,支持代码编写,断点调试等特性

Extension Toolkit

功能不太多,基本够用,应该是目前比较常用的JSX脚本调试工具。

然而……然而……

这个产品也一样不升级维护了,由于是32位的程序,目前在最新版本的Mac系统上已经无法安装了,于我这样的Mac常驻开发者而言,就非常忧伤

3. Padda

由于,上面的2款工具,第二款我的Mac用不了,第一款呢有特别不稳定,对于时不时要测试JSX脚本的我,决定自己开发一个……

Padda

这是一款运行在Ps上的插件,它内置了一个简易的文本编辑器,可以让你写Jsx代码,并立刻运行拿到结果。 我在日常开发插件产品的时候,经常需要在Ps上测试一段小脚本,看看是否工作是否正常,这时候就可以把代码贴到这个编辑器里头,直接运行就可以了。底部的输出窗口会显示当前脚本的执行状态和最后输出结果。

output

如果代码执行有错误,输出窗口会显示报错的行和一些基本的错误提示

Error

支持脚本高亮,提供了代码快照功能,就是可以把当前执行的这段代码保存起来,这样当我在测试多段代码之间切换的时候,会非常有用。另外我也会把一些常用的代码片段通过这种方式保存起来,随时调用读取,并修改调试,满意后,再拷贝到我的项目工程当中,非常方便。

Error

该工具还提供了执行本地脚本文件,读取图层信息,代码快照管理等功能,都是很常见和使用的一些特性。目前该项目在持续维护升级当中,工具免费,代码开源,我会随着日常开发不断往里面迭代功能,如果有小伙伴用得上,欢迎一键三连,想要添加功能的,可以在github上提issue

https://github.com/cutterman-cn/padda

插件面板的调试

上面介绍的开发工具,主要用于代码编写和JSX脚本的调试,当我们需要调试面板的时候,就需要另外一些操作了。

1. debug文件

在插件根目录下,新建 .debug 文件,内容如下

debug文件

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
<Extension Id="com.demo.cepstart">
<HostList>
<Host Name="PHXS" Port="4001"/>
</HostList>
</Extension>
</ExtensionList>

这里 Id 就是在Manifest.xml文件中写的插件唯一ID, PHXS指的是CC版本的Photoshop,Port 是本地监听的端口。

配置好这个文件之后,重启PS,再打开插件面板,就可以通过Chrome的DevTool进行远程调试了

devtool

2. Devtool

我看到很多人小伙伴完成第一步的时候,打开自己电脑上的chrome,输入调试地址后是白页,这是因为chrome在80版本之后做了一些改动,devtool的一些依赖需要翻墙。

这里有几种解决方案

  1. 使用CefClient,这里是下载链接,除了界面丑一点,没什么毛病

CefClient

  1. 使用7x版本的Chromium,这是我目前正在使用的方案,优点是提供和Chrome一样的操作体验,功能完整,缺点是指定版本的chroumium不太好找,我也是费了好大劲,在这里分享给大家

总结

在搞定这些事项之后,我们就可以愉快的编写插件,遇到问题也不再惊慌失措了~~

下一篇,我们开始进入真正的插件开发制作环节,跟随我们的cep-pane-start项目,开始第一版HelloWord,敬请期待。

评论