Vscode React Native Tools 플러그인 디버깅 문제

vscode 에디터에서 React Native Tools 플러그인 이용해서 디버깅을 시도해보려고 하는데, 잘 안되네요.
vscode 버전: 1.25.0 (오늘자 최신버전)
맥 OS: 10.13.3
React Native Tools Plugin 버전: 0.6.12 (최신 버전)
입니다.

제가 디버깅을 시도하는 절차는

  1. Package 서버 실행(vscode 내부 혹은 외부 터미널에서)
  2. Attach To Package Server 실행
  3. 시뮬레이터에서 Debug JS Remotely

혹은

Debug Configuration을 debug ios/android로 설정해놓고 F5

그러면 OUTPUT(출력)에 Package서버 도 출력되고 Debug Console에 로그도 뜨고 잘됩니다.

문제는, break point 설정이 안됩니다. break point를 설정하면

확인되지않은 중단점입니다. 영어로는 unverified breakpoints 라고 뜨네요.
실행하면 그냥 지나쳐버립니다.

혹시 해결법 아시는 분 계실까요?

아래는 launch.json입니다.

{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug in Exponent",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}
1 Like

혹시 expo 사용 중이신가요~? 아니면 TypeScript 같이 소스맵에 영향줄 수 있는 도구를 사용 중이신지요~?

1 Like

react-native init 사용중이고,
TypeScript 등은 사용하지 않고 있습니다!

아 그런데 저는 사용하지 않는데,
확인해보니 하단의 출력(Output)탭을 확인해보니 TypeScript와 Flow가 돌아가고있긴하네요

이것들 끄는 것 확인해보고 다시 시도해봐야겠습니다.

1 Like

네~ 혹시 .babelrc에 아래와 같은 소스맵 설정을 해주는 게 도움이 될 지도 모르겠네요(추측)~

{
  "presets": [
    "react-native"
  ],
  "sourceMaps": "inline"
}

vscode-rn 리포에서 찾아봐도 이유가 제각각이라 한 가지로 특정하기가 쉽지 않네요~

1 Like

물론 이런 경우가 아닐 수 있겠지만, 저는 어떤 이유에서인지 iOS빌드가 실패했는데, 디버거가 작동이 되더라구요. 예전 성공한 빌드로 떴는데, 이전 빌드 성공과 지금까지 바뀐 소스사이의 차이는 당연히 소스맵에 반영이 안된 거 같더라구요. 그래서 브레이크 포인트를 잡으면 거기가 아닌 다른 곳으로 잡히는 경우가 있었어요.

빌드 문제 해결하고 나니, 제대로 잡히더라구요.

2 Likes

브레이크 를 VSCode 에디터에다 해도 작동을 하나요? @sunkibaek
보통 크롬기준 디버거로 할때,
내가 작성하고 있던 코드 에디터(vs code)가 아니라.
디버거 안에 있는 소스코드 뷰어 에서 브레이크를 찍어야 작동했었거든요.

1 Like

@benevbright

네~ VS Code 내의 debugger에 연동을 시키면 가능합니다~

2 Likes

React Native 0.54.x 버전의 Metro Bundler 문제가 있다고 하네요.

제가 0.54.3 사용중이었습니다ㅠㅠ

3 Likes

다른 주제이긴 한데 Metro Bundler 가 하는 역할이 무엇인지 궁금하네요.

1 Like

Metro Bundler 를 찾아보니,

The JavaScript bundler for React Native.

JavaScript bundler 를 또 찾아보니,

First of all, what is a JavaScript bundler? A JavaScript bundler is a tool that puts your code and all its dependencies together in one JavaScript file. There are many of them out there these days, being the most popular ones browserify and webpack.

즉, 자바 스크립트 파일과 그 의존성 있는 모든 파일을 한 파일로 만들어주는 툴을 자바스크립트 번들러라고 하는군요. 가장유명한 것들이 browserify와 웹팩

근데 왜 한 파일로 만들어 주는 걸까요? (꼬리를 무는 의문점…)

이 링크에 잘 설명 되어 있으니 한 번 읽어보시면 될 거 같아요. 정말 대충 요약하면, “ES5 부터 import 가 도입되었고, 그전에는 다른 의존 파일을 global 로 가져와서 썼었는데, 그로 인해서 순서에 따라서 의존성이 문제가 되곤 했었는데 이런 것들을 해결하기 위해서 require가 나왔으나, require가 동기방식으로만 동작하다보니, http로 가져와야하는 모듈은 가져오기 힘들어서 한 파일로 다 담았다”

암튼 js bundler 가 뭔지는 알거 같네요. 한 파일로 만들어주는 것… RN디버깅에 source code랑 맵핑이 안되서 가끔씩 index.bundle 몇만번째 줄로 에러를 알려줄 때가 있는데, bundler가 만든 그 하나의 파일이 이 파일일거라는 합리적 의심이 드네요.

그럼 돌아와서 Metro bundler는 facebook에서 RN전용으로 만든 js bundler인데, 빠르고, 스케일러블하고, RN과 통합되어있어 그냥 쓰면 된다는거…

이 아이가 하는 역할은 API문서에 나와 있는 걸로 보면, 두 가지 일인데, 컴파일하고 서버를 띄우고 두가지 인거 같네요.

컴파일은 아마도 하나의 파일 index.bundle 를 만들어 주는 과정을 이야기 하는 것이고, 서버를 띄우는 건 RN에서 run-ios 같은 걸 하면 8080 포트로 서버를 하나 띄우는데 그 서버를 실행시켜준다는 거 같군요.

근데 왜 서버가 필요할까나?? 이제부터는 소설이에요. 추측인데요. 그냥 파일 하나로 만들어주면 땡 아닌가 싶은데 서버를 띄워주는 건 뭔가 통신해서 자료를 주거니 받거니한다는 이야기인데, 뭐랑 뭐가 연결해서, 무슨 자료를 주고 받을까 생각해보면, RN할 때 이 서버가 안떠 있으면 디버깅이 안되잖아요. 아마도 index.bundle 파일이 실행될 때 원래 소스코드랑 맵핑를 관리하는 목적의 서버 같구요. 이걸 서버로 띄우는 이유는 소스코드가 굉장히 방대하니깐 그걸 다 들고 있을 수 없고 특정 라인에 해당되는 코드를 요청하면 그 코드의 매핑 정보를 띄우는 게 아닐까 생각됩니다. 또 파일이 바뀌면 그걸 watch 하고 있다가 변경된 index.bundle를 앱으로 업로드 해주는 역할도 하게 되겠군요.

일단 오늘 공부는 여기까지만.

JS를 오랫동안 해오셨던 분들에게는 상식같은 이야기일텐데 JS초보에게는 하나 하나 새롭군요.

3 Likes

참고로 말씀 드리면 production 환경에서는 8080 포트에서 번들러가 실행되지는 않고요 미리 만들어둔 번들 파일을 사용합니다. (http:// 가 아닌 file://) 제 생각에는 번들러가 dev 환경에서 서버로서 동작하는 이유는 변경된 파일에 대해 동적으로 번들파일을 생성해주는 것이 가장 큰 이유입니다.

4 Likes