Vue의 차세대 개발자 도구는 공식적으로 오픈 소스입니다!

최근 Vue의 차세대 개발자 도구(DevTools)가 공식적으로 오픈 소스로 공개되었습니다! Vue DevTools는 Vue 개발자 경험을 향상시키기 위해 설계된 도구로, 개발자가 Vue 애플리케이션을 더 잘 이해하는 데 도움이 되는 몇 가지 기능을 제공합니다. 차세대 Vue DevTools의 기능과 사용법을 살펴보겠습니다!

기능

먼저 Vue DevTools에서 어떤 기능을 사용할 수 있는지 살펴보겠습니다!

개요 : Vue 버전, 페이지 수, 구성 요소 수를 포함한 애플리케이션 개요를 표시합니다.

페이지 : 페이지 탭은 현재 경로 및 관련 정보를 표시하고 페이지 간을 빠르게 탐색할 수 있는 방법을 제공합니다. 또한 텍스트 상자를 사용하여 각 경로에 대한 일치 항목을 볼 수도 있습니다.

구성 요소 : 구성 요소 탭에는 노드 트리, 상태 등을 포함한 구성 요소 정보가 표시되고 상태 편집, 구성 요소 스크롤 등과 같은 일부 대화형 기능을 제공합니다.

Assets : Assets 탭에는 프로젝트 디렉터리에 있는 파일들이 표시되며, 선택한 파일에 대한 정보를 볼 수 있습니다.

타임라인 : 타임라인 탭을 사용하면 이전 버전의 상태 또는 이벤트를 찾아볼 수 있습니다.

라우터 : 라우터 탭은 vue-router와 통합되어 경로 목록과 세부 정보를 볼 수 있습니다.

Pinia : Pinia 탭은 Pinia와 통합되어 저장 목록 및 세부 정보를 확인하고 상태를 편집할 수 있습니다.

그래프 : 그래프 탭에는 모듈 간의 관계가 표시됩니다.

설정 : 설정 탭은 DevTools를 사용자 정의하기 위한 몇 가지 옵션을 제공합니다.

Inspect : Inspect는 vite-plugin-inspect와 통합되어 Vite의 변환 단계를 검사할 수 있습니다.

Inspector : vite-plugin-vue-inspector와 통합된 Inspector는 앱의 DOM 트리를 검사하고 이를 렌더링하는 구성 요소를 확인하여 변경이 필요한 위치를 더 쉽게 찾을 수 있습니다.

독립형 창 : Vue DevTools는 독립형 창으로 실행될 수 있으며, 이는 작은 화면에서 애플리케이션을 디버그하려는 경우 매우 유용합니다.

사용

Vue 프로젝트에서 Vue DevTools를 사용하는 방법에는 여러 가지가 있습니다.

Vite 플러그인
독립형 애플리케이션
Chrome 확장 프로그램(현재 개발 중)

Vite 플러그인 과 독립형 애플리케이션을 통해 Vue DevTools를 사용하는 방법을 살펴보겠습니다 .

알아채다:

DevTools는 Vue 3과만 호환됩니다. Vue2를 사용하는 경우 대신 vue-devtools를 사용하세요.

Nuxt를 사용하는 경우 더 강력한 개발자 경험을 위해 nuxt-devtools를 사용하세요.

Vite 플러그인

Vue DevTools를 실행하는 첫 번째 방법은 Vite 플러그인입니다. 프로젝트에서 Vite를 사용하는 경우 더 강력한 기능을 제공하므로 DevTools 실행 시 Vite를 기본 설정으로 지정하는 것이 좋습니다.

참고: Vue DevTools에는 Vite v3.1 이상이 필요합니다 .

먼저 다음 명령을 사용하여 Vue DevTools를 설치합니다.

npm add -D vite-plugin-vue-devtools

용법:

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
  ],
})

구성 항목:

interface VitePluginVueDevToolsOptions {
  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp

  /**
   * Customize openInEditor host (e.g. http://localhost:3000)
   * @default false
   */
  openInEditorHost?: string | false

  /**
   * DevTools client host (e.g. http://localhost:3000)
   * useful for projects that use a reverse proxy
   * @default false
   */
  clientHost?: string | false
}

구성 항목은 다음과 같습니다.

appendTo : 스크립트를 추가하는 대신 모듈 끝에 가져오기를 추가 id 합니다 . HTML 파일을 진입점으로 사용하지 않는 프로젝트에 매우 유용합니다. 참고로 이 옵션의 기능을 정확히 알고 있는 경우에만 이 옵션을 설정하세요. 기본값은 입니다 .appendTo<body>''
openInEditorHost: 편집기가 열리는 호스트를 사용자 정의합니다(예: http://localhost:3000). 기본값은 입니다 false.
clientHost:DevTools 클라이언트 호스트(예: http://localhost:3000), 역방향 프록시를 사용하는 프로젝트에 유용합니다. 기본값은 입니다 false.

독립형 애플리케이션

지원되지 않는 브라우저를 사용 중이거나 다른 특정 요구 사항(예: Electron에 있는 앱)이 있는 경우 독립형 앱을 사용할 수 있습니다.

먼저 다음 명령을 통해 DevTools를 전역적으로 설치합니다(전역적으로 설치하거나 프로젝트 종속성으로 설치할 수 있습니다. 여기서는 전역 설치를 예로 들어 보겠습니다).

npm add -g @vue/devtools

설치가 완료되면 터미널에서 다음 명령을 실행합니다.

vue-devtools

<head>그런 다음 HTML 파일이 적용되는 섹션 에 다음 코드를 추가합니다 .

<script src="http://localhost:8098"></script>

또는 장치를 원격으로 디버깅하려면 다음을 수행하세요.

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

공식 문서(https://devtools-next.vuejs.org/guide/standalone)에서 자세한 내용을 볼 수 있습니다.

확인하다

공식 웹사이트: https://devtools-next.vuejs.org/
Github: https://github.com/vuejs/devtools-next