调试JavaScript代码最常用的方法是console.log
在关键步骤中添加一堆。不幸的是,JavaScriptCore(Sketch插件运行的上下文)没有提供console
。相反,调用的特殊方法log
是可用的。
有几个选项可以查看这些日志:
~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log
skpm log
它将输出上面的文件(skpm log -f
对日志进行流式处理)skpm
将填充console
以便console.log
照常使用。除了使用log
场景后面的方法之外,它还会将日志转发给sketch-dev-tools
。
debugger
和变量检查当插件运行时,Sketch会创建一个与其关联的JavaScript上下文。可以使用Safari检查此上下文。
在Safari中,转到Develop
> name of your machine
> Automatically Show Web Inspector for JSContexts
。而且你可能想要启用,Automatically Pause Connecting to JSContext
否则检查器将会关闭,然后才能与之交互(当脚本运行完成后,上下文将被销毁)。
现在,您可以在代码中使用断点,在运行时检查变量的值等。
Sketch中的插件系统可让您完全访问应用程序的内部结构和macOS中的核心框架。Sketch使用Objective-C构建,其类被桥接到JavaScript。知道你正在处理哪些类以及定义了哪些方法通常很有用。
您可以使用由网桥定义的一些自省方法来访问这些信息。例如:
String(context.document.class()) // MSDocument
var mocha = context.document.class().mocha()
mocha.properties() // array of MSDocument specific properties defined on a MSDocument instance
mocha.propertiesWithAncestors() // array of all the properties defined on a MSDocument instance
mocha.instanceMethods() // array of methods defined on a MSDocument instance
mocha.instanceMethodsWithAncestors()
mocha.classMethods() // array of methods defined on the MSDocument class
mocha.classMethodsWithAncestors()
mocha.protocols() // array of protocols the MSDocument class inherits from
mocha.protocolsWithAncestors()
我们创建了一个小的Sketch特定工具来帮助您调试插件,并希望让您的生活更轻松。它采用Sketch插件的形式,您可以在此下载并随其启动cmd + option + j
。
原文:https://developer.sketchapp.com/guides/debugging-plugins/