在使用Sketch开发插件的过程中,我们往往会使用到Sketch的自带控制台输出方法console.log()来打印信息。但是在Sketch早期版本中,它的console对象缺乏一些标准的打印方法,比如console.table、console.dir等方法,这就限制了我们在开发过程中的调试工作。
为了解决这个问题,sketch-module-console-polyfill 库应运而生。下面我们将一步步教大家如何使用这个npm包。
1. 安装
你可以通过npm的方式安装sketch-module-console-polyfill包:
npm install --save-dev sketch-module-console-polyfill
2. 引入
在你的插件入口js文件最顶部,添加如下代码即可引入sketch-module-console-polyfill:
require('sketch-module-console-polyfill');
3. 使用
然后,你就可以像在浏览器控制台一样来打印各种信息了,比如:
console.log('Hello Sketch!'); console.warn('Watch out!'); console.error('Danger!'); console.info('Here is some info'); console.assert(1 === 2, 'This is wrong!'); console.dir(); // 输出对象的属性信息 console.table([{name: 'Alice', age: 22}, {name: 'Bob', age: 18}]); // 输出表格形式的数据 // 等等...
值得注意的是,从Sketch 52版本开始,Sketch已经自带了标准的console对象。因此,在更新到Sketch 52或之后的版本后,你可能不再需要使用sketch-module-console-polyfill库来打印信息了。
4. 示例代码
下面是一个简单的Sketch插件,用于颜色值的转换,包含了使用sketch-module-console-polyfill输出信息的示例代码:
-- -------------------- ---- ------- ----- ------ - ----------------- ----- ---- - --------------- ------ ------- ----------------- - ----- -------- - ---------------------------- ----- ------ - ----------------------- ----- ----------- - ------------------------------------- --------------------------- -------------------------- ----- -------- - ----------------------------- ------------------------ ----------------------- ----- -------- - ----------------------- ------------------------ --------- ---------------------- ------ ------------- - -------- ----------------------- - ------ - -- -------------------- - ----- -- ---------------------- - ----- -- --------------------- - ----- - - -------- -------------------- - ------ --------------------------------------------------------------------------------- - -------- ----------------- - ----- --- - -------------- ------ ---------- -- - - --- - --- - --- -
在执行上述代码时,我们通过console.log()打印出了从Sketch对象获取到的颜色值、转换后的RGB值和转换后的十六进制颜色值。这样,我们就可以清晰地看到代码运行过程中变量的值,从而快速找到问题及其定位。
5. 结论
使用 sketch-module-console-polyfill 库可以方便地扩展Sketch早期版本中的控制台对象console,使得我们在开发过程中能够更加方便快捷地调试和定位问题。在使用时请注意引入和输出信息的方式,避免代码的无谓冗余和混淆。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005585d81e8991b448d5949