程序动不了？来调试一下吧！入门篇

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'];


最多浏览的文档