kintone JS 사용자 정의를 디버깅하는 방법

3120 단어 금과킨톤
config-helper에 풀 요청을 던졌습니다.
그 때의 간이적인 동작 확인 방법을 메모합니다.

개발자 콘솔에서는 조금・・・Visual Studio Code로 하고 싶다는 사람에게 추천합니다.

풀 요청 내용



config-helper를 사용하면 앱의 필드 정보를 얻을 수 있지만 테이블의 필드인지 여부를 확인할 수 없습니다.
이것을 판단할 수 있도록 했습니다.

절차



1. 앱 만들기



kintone 앱을 만듭니다.
(이번에는 양식에 테이블이 필요하므로 준비했습니다)
JS 사용자 정의에 kintone-config-helper.js를 적용합니다.

2. kintone-config-helper 실행



개발자 콘솔에서 다음 명령이 작동하는지 확인합니다.
KintoneConfigHelper.getFields().then(console.log);

이런 느낌이 될 것입니다.


3. 로컬 재정의 설정



Google 크롬의 로컬 재정의를 사용합니다.
로컬 재정의에 대한 자세한 내용은 여기을 참조하십시오.

JS 사용자 정의로 설정한 kintone-config-helper.js를 로컬 재정의합니다.

처음 로컬 재정의를 사용하는 경우 개발자 콘솔에서 Sources 탭, Overrides 탭을 선택합니다.
Select folder for overrides를 클릭하고 적절한 로컬 폴더를 선택합니다.


개발자 콘솔에서 kintone-config-helper.js를 찾습니다.
(kintone의 사양으로 파일명은 download.do?…가 되는 것 같습니다)
마우스 오른쪽 버튼을 클릭하고 Save for overrides를 선택합니다.


4. Visual Studio Code에서 JS 파일로 인식



로컬 재정의된 파일을 Visual Studio Code에서 엽니다.
그대로 JS 파일로 인식되지 않습니다.
Visual Studio Code의 설정에 다음을 추가한다고 인식해 줍니다.
    "files.associations": {
        "download.do*": "javascript"
    }

5. 동작 확인



예를 들어 console.log()를 추가하고 저장합니다.


화면을 다시로드하고 개발자 콘솔에서 KintoneConfigHelper를 다시 실행하면 console.log()가 반영됩니다.


사실 Visual Studio Code의 Debugger for Chrome을 사용하고 싶었습니다.

좋은 웹페이지 즐겨찾기