VScode로 Firebase Functions + Type Script 디버깅

Debugging with Visual Studio Code · GoogleCloudPlatform/cloud-functions-emulator Wiki
내용을 조금 정리하다.

시도된 환경

macOS

node - v6.11.5

VSCode - 1.24.1

구글 클라우드 플랫폼의 모든 계정(로그인만 하고 내용을 배치하지 않음)

설치firebase-tools 및@google-cloud/functions-emulator.

npm install -g firebase-tools
npm install -g @google-cloud/functions-emulator

샘플 항목 만들기

mkdir fb01
cd fb01
firebase login

브라우저에서 로그인하고 cli 접근을 허용하면 컨트롤러 측에서도 로그인이 완료됩니다.

firebase init functions

? Select a default Firebase... -> create a new project

? What language would you like... -> TypeScript

? Do you want to use TSLint... -> Y

? Do you want to install dependencies with npm now? -> Y

예시된 HelloWorld 함수 만들기

code .

fb01 VSCode에서 디렉토리를 엽니다./functions/src/index.ts를 열고 helloWorld의 주석 출력을 취소합니다.

import * as functions from 'firebase-functions';

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
export const helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});

그리고 제작/.vscode/launch.json은 다음과 같이 기술한다.
(VScode 메뉴 추가 -> 디버깅 -> 구성도 ok)

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Inspect Function",
            "type": "node",
            "protocol": "inspector",
            "request": "attach",
            "port": 9229
        }
    ]
}

VSCode에서 메뉴 -> 작업 -> 구축 작업 -> npmbuild-function(터미널에서npm run build도 ok)을 실행합니다./functions/lib 디렉토리에는 index.js index.js.map 이 있습니다.

함수 시뮬레이터에 함수 배치

cd functions
functions start

에서 Functions Emulator를 시작하고 를 클릭합니다.

functions deploy helloWorld --trigger-http

helloWorld 함수를 모의기에 배치합니다.
만약 배치할 수 있다면, 출력은 다음과 같다.

Copying file:///var/folders/lv/5j48kqb146xdtt0dn65h_2480000gn/T/tmp-69998WgYjI25qtJ59.zip...
Waiting for operation to finish...done.
Deploying function.......done.
Function helloWorld deployed.
┌────────────┬───────────────────────────────────────────────────────────────────────────────────┐
│ Property   │ Value                                                                             │
├────────────┼───────────────────────────────────────────────────────────────────────────────────┤
│ Name       │ helloWorld                                                                        │
├────────────┼───────────────────────────────────────────────────────────────────────────────────┤
│ Trigger    │ HTTP                                                                              │
├────────────┼───────────────────────────────────────────────────────────────────────────────────┤
│ Resource   │ http://localhost:8010/fb01/us-central1/helloWorld                             │
├────────────┼───────────────────────────────────────────────────────────────────────────────────┤
│ Timeout    │ 60 seconds                                                                        │
├────────────┼───────────────────────────────────────────────────────────────────────────────────┤
│ Local path │ /Users/xxx/dev/playground/fb01/functions                             │
├────────────┼───────────────────────────────────────────────────────────────────────────────────┤
│ Archive    │ file:///var/folders/lv/xxxxx_2480000gn/T/tmp-69998WgYjI25qtJ59.zip │
└────────────┴───────────────────────────────────────────────────────────────────────────────────┘

디버그 실행

터미널에서 다음 명령을 실행합니다.

functions inspect helloWorld

Debugger for helloWorld listening on port 9229 이러한 출력.
포트 번호가 9229가 아닌 경우 /.vscode/launch.json 의 port: 를 다시 쓰십시오.
VScode에서 실행 메뉴 -> 디버깅 -> 디버깅의 시작 (측면 메뉴의 벌레 같은 아이콘에서 실행해도 ok).
그런 다음 /functions/src/index.ts 을 열고 9 행의 행 번호 왼쪽을 클릭하여 브레이크를 추가합니다.

터미널로 돌아가 다음 명령을 수행합니다.

functions call helloWorld

그런 다음 VSCode 측면에서는 브레이크 지점을 배치해도 처리가 중지되는지 확인할 수 있습니다.

이전 단계functions deploy에서 내보낸 리소스에 설명된 URL에 액세스하면 중단된 지점에서 중지할 수 있습니다.
기쁘고 축하할 만하다.

뒷수습

functions delete helloWorld

큰 장면을 렌더링하는 동안 이 고장이 발견되었습니다.

functions kill

큰 장면을 렌더링하는 동안 이 고장이 발견되었습니다.

후기

Debugging with Visual Studio Code는 두 가지 디버깅 방법(표준 노드와 V8 Inspector Integration)을 제공하지만 전자는 제대로 작동하지 않습니다.그래서 이 보도는 후자의 내용이다.

V8 Inspector Integration에 소개된 launch.json 오래된 것 같아 경고합니다.그것을 수정한 것은 상술한 것을 사용한 것이다"type": "node2".