VSCode에서 Vue 코드를 디버깅하는 방법은 무엇입니까?

Vue 코드를 VSCode에서 디버깅하는 방법은 무엇입니까? 다음 문서에서는 VS Code에서 Vue.js를 디버깅하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. ㅋㅋㅋ 프로젝트 루트 경로

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

.vscode 파일에 launch.json 추가:

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}

중단점 설정

루트 디렉터리에서 일반 터미널을 열고 Vue CLI를 사용하여 애플리케이션 시작:

npm run submit code><li>디버그 보기로 이동하여 <strong>"vuejs: chrome/firefox"</strong> 구성을 선택한 다음 F5 키를 누르거나 녹색 재생 버튼을 클릭하세요. <li> <li><img src="https://img.php.cn/upload/image/863/923/511/1606815752449632.png" title="1606815752449632.png" alt="VSCode에서 Vue 코드를 디버깅하는 방법은 무엇입니까?"></li>

새 브라우저 인스턴스가 http://localhost:8080 열리면 이제 중단점이 적중됩니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 코스
• 를 방문하세요! !

위 내용은 VSCode에서 Vue 코드를 디버깅하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!