【kintone】VSCode에서 직접 조작으로 디버그 효율 업

kintone 사용자 정의 디버깅에 무엇을 사용하고 있습니까?

대다수가 브라우저의 개발자 도구라고 대답할 것이라고 생각합니다.
절차는 "개발자 도구 확인 -> 코드 다시 쓰기 -> 페이지 업데이트하여 개발자 도구 확인 -> 코드 다시 쓰기 -> ..."입니다.

브라우저와 에디터를 여러 번 오가는 동작, 힘들지 않습니까?

이 기사에서는 에디터 (VSCode)의 조작만으로 디버깅하는 조금 기술을 소개합니다.

데모

왼쪽은 브라우저 (Chrome)이고 오른쪽은 편집기 (VSCode)입니다.
VSCode 측에서 페이지 리로드, 콘솔 표시, 스텝 실행이 가능합니다.


(↑커스터마이즈로 버튼을 표시하려고 고전하고 있는 모습입니다)

데모에서는 일부러 버튼을 누르고 있습니다 만,
디버깅 시작: F5
페이지 새로고침: Cmd + Shift + F5
재개 실행: F5
이와 같이 단축키로의 조작도 가능합니다.

소스 맵조차 작성하면 컴파일 번들 이전의 파일에 중단 점을 설정할 수도 있습니다.

사용하는 도구

다음 도구를 설치합니다.
Live Server와 Debugger for Chrome은 VSCode의 확장 기능이므로 VSCode에 설치합니다.

Visual Studio Code

Live Server

Debugger for Chrome

mkcert

Google 크롬

설정 절차

1. Live Server에서 전달한 JS 파일을 kintone으로 불러오기

아래와 같이 설정하면 OK입니다.
이것만 끝나면 절반 이상 끝난 것 같은 것이므로 노력해 주세요.

2. "/.vscode/launch.json" 만들기

프로젝트 루트에 .vscode 디렉토리를 만들고 그 안에 launch.json을 만듭니다.

/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "kintone",
      "type": "chrome",
      "request": "attach",
      "urlFilter": "https://*.cybozu.com/k/*",
      "webRoot": "${workspaceRoot}/",
      "port": 9222,
      "sourceMaps": true,
      "trace": true
    }
  ]
}

3. 원격 디버깅을 켜고 Chrome을 시작합니다.

아래 명령을 사용하여 원격 디버깅을 켜고 Chrome을 시작합니다.

Mac

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows

<path to chrome>/chrome.exe --remote-debugging-port=9222

4. 실행된 Chrome에서 디버깅할 kintone 앱 열기

3에서 시작한 Chrome에서 디버깅 할 kintone 앱을 엽니 다.
그런 다음 VSCode를 사용하여 디버깅 할 수 있습니다.

참고문헌

htps : //에서 ゔぇぺぺr. cy 흐림. 이오/hc/쟈/아르치 cぇs/360026502091

ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 그리고 m 핥기 = msjs ぢ 아 g. 로 부케 r fu r ch chrome # ch