程序动不了?来调试一下吧!入门篇

cybozu发表于:2016年12月09日 18:13:07更新于:2022年02月18日 14:14:21

概要

kintone可以使用JavaScript来灵活地自定义,但是经常在社区看到像“明明照着Tips写的做,却动不了”、“运行结果和想象的不一样”这样的,因找不到解决方法而烦恼的人。
此次,针对至今没有怎么使用过Javascript的用户,为使他们能够越来越多的接触kintone的自定义,在这里想向大家介绍几个Kintone自定义的调试方法。

相信阅读了这篇Tips以后,大家就可以知道Javascript没有响应的时候首先应该做些什么,以及判断出需要注意的地方。

简单的调试

最近的网页浏览器都会自带有Javascript和HTML/CSS的调试程序。(以下简称为开发者工具)

  • Chrome: 开发者工具

    • 打开方法: Ctrl + Shift + I(Mac是Command + Option + I)

  • Firefox: 开发者工具栏/Firebug

    • 打开方法: Ctrl + Shift + I(Mac是Command + Option + I)

  • Internet Explorer / Edge : 开发人员工具

    • 打开方法: F12

001584fba6f3ad354f6a0fdbc66b6c3

让它发生错误

让我们使用工具,看看解决错误的流程。(运行环境Chrome)
人为的让它产生个错误。
这个程序是打开记录详情页面,弹出消息框显示“公司名”字段。我们人为的将字段名输错。

当然,这种状态下,即便我们实际打开记录详情页面,也不会弹出任何消息。

(function() {
    kintone.events.on(['app.record.detail.show'], function(event) {
        var record = event.record;
        alert(record["公司"]["value"]); // “公司名”误写成了“公司”
        return event;
    });
})();

会发生怎样的错误呢?

接下来让我们看看到底会发生怎样的错误。
1. 打开开发者工具(在执行JavaScript的页面打开。这次是记录详情页面。)
2. 点击Console标签
3. 确认错误日志

001584fbbc090f31819b6a1404be794

如果发生错误的时候,像上面这样,在Console标签就可以看到显示的错误。
错误日志基本都是英文,使用Google检索的话,大多数能知道错误的原因。
上面的情形显示的内容是找不到value这个属性,主要的原因是找不到“公司”这个字段代码。
(反过来说,正确的情形下record["公司名"]["value"]存在的时候,就不会发生错误)

其他,JavaScript发生语法错误的时候,也会显示错误日志。在JavaScript自定义的时候,一般多看看日志为好。

  • alert误写成alret的时候

(function() {
    kintone.events.on(['app.record.detail.show'], function(event) {
        var record = event.record;
        alret(record["公司名"]["value"]); // alert误写成alret的时候
        return event;
    });
})();

001584fbc1ece5dccae6e927174f659

开发者工具里方便的功能

另外,还可以暂时停止运行中的程序(断点)、查看变量的内容等等。像下面那样使用的话,对于kintone自定义也能有很大的进步。
Chrome DevTools中文手册

我经常使用开发者工具的console直接编码,然后确认运行情况。
比如获取当前显示的记录的值,也可以像这样执行。

001584fc09d96dfa134dfabe2669234

kintone相关的错误

上面说的都是基于Javascript发生的错误,其实也有Kintone特有的错误。

明明进行了Javascript自定义却没有反应,也没有显示错误

意外的这种错误时有发生。有可能是出现了下面说到的情况。

  • 未上传js文件、或者链接弄错了
    重新看一下设置页面,确认是否已经上传文件,以及文件是否正确。

  • 未指定事件,或者弄错事件 可能会发生像下面这样错误指定事件的情况。

(function() {
     kintone.events.on(['app.record.detail.shou'], function(event) {
      // ↑错误。正确的是 show
  • 缺少最后的括号 不管哪个都是Javascript起因的问题,如果像下面这样没有写括号的话就无法执行。 对此感兴趣的话可以搜索“即时函数”。

(function() {
      kintone.events.on(['app.record.detail.show'], function(event) {
        // 当中省略
      });
})();  // ←忘记最后的()的话,程序将动不了

使用REST API,却无法顺利更改数据

  • 没有权限
    重新看一下应用的权限设定,确认好权限。可能是自己的权限没有问题,但是其他的用户无法更新数据等等,这样的情况有很多。

  • 字段代码指定错误
    因为应用的字段名和字段代码可以分别设置,所以有时会弄错。在应用的设定里面看一下是否正确指定了字段代码。

  • JSON的写法不对
    如果是使用了表格的应用,JSON会变得复杂,有时候会有怎么也无法解决错误的情况。
    在那种情况下,可以使用下面的格式化・语法校验的服务,可以确认是否JSON有错误。
    https://syncer.jp/json-prettyprint

  • 明明设置字段为必填项,却没有指定值就POST了
    kintone的字段设置,有“设为必填项”的选项。如果这个选项设为有效的话,在使用REST API进行数据添加・更新的时候就必须指定值。请大家不要忘记哦。

  • Lookup栏的要复制的字段没有指定值为唯一
    使用REST API指定Lookup栏的值的时候,lookup关联应用的要复制的字段的设置里,“值为唯一”选项必须要为有效。下面文章里详细有些,大家可以参考下。使用REST API,批量更新Lookup字段(仅提供日文)

想要获取多个应用的数据,不知道为何里面内容是空的。

  • 在API的应答来之前执行了下面的处理
    kintone的请求系列的标准API全都是异步请求,在应答没有返回前,就做了下面的处理,可能会发生无法得到预期值的情况。
    想等待处理结果,虽说有写回调函数的方法,但是那样会使的结构比较复杂。我们也可以使用Promise来自定义。一起来挑战一下kintone API的Promise吧!

其他

  • 如果JavaScript发生错误的话,程序将不会执行到最后,数据可能无法反映到kintone上。请一定确认下是否发生了JavaScript错误。

  • 一般来说,参考 “kintone JavaScript 编程指南”可以防止意外的错误。kintone JavaScript编码指南

移动版的调试

可以通过将 kintone 应用的 URL 更改为以下内容来调试移动视图。

  • PC版 :https://{subdomain}.cybozu.cn/k/{appId}

  • 移动版:https://{subdomain}.cybozu.cn/k/m/{appId}

来宾空间使用以下 URL:

  • https://{subdomain}.cybozu.cn/k/guest/{spaceId}/m/{appId}

最后

虽然还有许多这篇文章里未写的错误类型,但希望上面这些知识点能帮助大家更轻松地进行kintone的JavaScript自定义。
如果看了上面这些还是不懂的话,请在developer network的社区里咨询。在咨询的时候,请您具体说明“出现了什么样的错误”,而不是“无法运行了”这样的询问方式,这样对于回答问题的人来说也会更加好回答问题。

这个Tips是在确认了2016年1月版基础上做的。

回复(5)

  • cybozu

    应该是这样的吧

     json['record']['Table']['value'][i]['value']['money']= {     
     'value':record['Table']['value'][i]['value']['amount']['value'] -
         record['Table']['value'][i+1]['value']['amount']['value']}

    引用 closer 的回复:

    json['record']['Table'][i]['value']['money'] = {     
      'value':record['Table']['value'][i]['value']['amount']['value']
         - record['Table']['value'][i+1]['value']['amount']['value']
    }


  • closer
    json['record']['Table'][i]['value']['money'] = {
         'value':record['Table']['value'][i]['value']['amount']['value'] - 
           record['Table']['value'][i+1]['value']['amount']['value']
    }

    你好,代码运行到这里,更新表格“money”字段报错了,“show.js:116 Uncaught TypeError: Cannot read property 'value' of undefined”。我试过用别的不是表格字段可以更新成功。

    引用 cybozu 的回复:


    表格的两行之间进行减法,请问用这种赋值方式,可以吗?可以的。更新表格的操作请参考以下文章:更新记录:https://cybozudev.kf5.com/hc/kb/article/201605/#更新记录时的表格操作技巧:https://cybozudev.kf5.com/hc/kb/article/211417/#

  • cybozu

    表格的两行之间进行减法,请问用这种赋值方式,可以吗?

    可以的。


    更新表格的操作请参考以下文章:

    更新记录:

    https://cybozudev.kf5.com/hc/kb/article/201605/#

    更新记录时的表格操作技巧:

    https://cybozudev.kf5.com/hc/kb/article/211417/#

    引用 closer 的回复:

    在修改保存前对记录的表格两行数据进行减法操作,需要用到put方法?

  • closer

    在修改保存前对记录的表格两行数据进行减法操作,需要用到put方法?

  • closer

    表格的两行之间进行减法,请问用这种赋值方式,可以吗?

    record['Table']['value'][i]['value']['money']['value'] =  
      record['Table']['value'][i]['value']['amount']['value'] - 
       record['Table']['value'][i+1]['value']['amount']['value'];