Vuejs 디버깅 방법: 1. Vue-cli 명령줄 도구를 사용하여 wabpack 템플릿을 기반으로 프로젝트를 초기화하고 devtool 구성을 source-map으로 변경합니다. 2. vue에 "module.exports = { 구성을 추가합니다. .config.js 파일 ...}"을 수행할 수 있습니다.
이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
vuejs를 디버깅하는 방법은 무엇입니까? vuejs가 코드를 디버깅하는 방법
Vue-cli 명령줄 도구를 사용하여 wabpack 템플릿 기반 프로젝트를 초기화하는 명령 구문:
npm install -g @vue/cli # 全局安装vue-cli,版本vue3.x vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。 cd my-project # 进入目录 npm install # 安装依赖 (package.json) npm start # 启动开发环境版本
config/index.js
변경 > 파일 devtool
은 source-map
으로 구성됩니다. config/index.js
文件中更改devtool
配置为source-map
:
module.exports = { devtool: 'source-map',//默认是:cheap-module-eval-source-map }
设置为 source-map
,则可以生成.map
文件,在chrome浏览器中调试的时候可以显示源代码,效果如下:
cheap-module-eval-source-map
选项效果:
eval
:文档上解释的很明白,每个模块都封装到 eval 包裹起来,并在后面添加 //# sourceURLsource-map
:这是最原始的 source-map 实现方式,其实现是打包代码同时创建一个新的 sourcemap 文件, 并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿hidden-source-map
:文档上也说了,就是 soucremap 但没注释,没注释怎么找文件呢?貌似只能靠后缀,譬如 xxx/bundle.js 文件,某些引擎会尝试去找 xxx/bundle.js.mapinline-source-map
:为每一个文件添加 sourcemap 的 DataUrl,注意这里的文件是打包前的每一个文件而不是最后打包出来的,同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串,而不是一个 url。eval-source-map
:这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrlcheap-source-map
:不包含列信息,不包含 loader 的 sourcemap,(譬如 babel 的 sourcemap)cheap-module-source-map
:不包含列信息,同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份,它是 webpack 对 loader 生成的 sourcemap 进行简化,然后再次生成的。参考:webpack sourcemap 选项多种模式的一些解释
vue-cli
是基于webpack的打包的效果和上面的一样,只是配置不一样。
在vue.config.js
module.exports = { configureWebpack: { devtool:'souce-map' } }는
source-map
으로 설정된 다음 .map code> 파일이 생성될 수 있으며, 크롬 브라우저에서 디버깅할 때 소스 코드가 표시될 수 있으며, 효과는 다음과 같습니다: <h2 id="vscode编辑器调试"></h2>
<img src="https://img.php.cn/upload/article/000/000%20/020/3ef027b7fe60f90b852b440f779dd649-0.png" alt="vuejs를 디버깅하는 방법" loading="lazy"><p></p>
<code>cheap-module-eval-source-map
옵션 효과:
eval
: 문서에서는 이를 매우 명확하게 설명합니다. 각 모듈은 eval에 캡슐화되어 있으며 //# sourceURLsource-map
이 끝에 추가됩니다. 이것이 가장 원본 소스입니다. -map 구현 및 그 구현은 다음과 같습니다. 코드를 패키징할 때 새 소스맵 파일을 생성하고 패키징된 파일 끝에 //# sourceURL 주석 줄을 추가하여 파일이 어디에 있는지 JS 엔진에 알려줍니다.hidden-source-map
: Documentation 위에서 언급한 대로 soucremap인데 주석이 없는 파일을 어떻게 찾을 수 있나요? xxx/bundle.js 파일과 같은 접미사에만 의존할 수 있는 것 같습니다. 일부 엔진은 xxx/bundle.js.mapinline-source-map
을 찾으려고 시도합니다. >: 각각에 대해 소스 맵의 DataUrl을 파일에 추가합니다. 여기서 파일은 패키징되기 전의 각 파일이며 동시에 패키징된 마지막 파일이 아닙니다. 동시에 이 DataUrl은 전체 소스 맵 정보를 포함하는 Base64 형식의 문자열입니다. URL이 아닌 파일입니다. eval-source-map
: eval의 sourceURL을 완전한 souremap 정보의 DataUrl로 대체합니다.cheap-source-map
: 열 정보를 포함하지 않으며 로더의 소스 맵(예: babel의 소스 맵)을 포함하지 않습니다.cheap-module-source-map
: 열 정보를 포함하지 않습니다. 및 로더 소스맵도 단순화되어 해당 행만 포함합니다. 로더에 의해 생성된 소스맵을 단순화한 후 다시 생성하여 웹팩에 의해 생성되는 최종 소스맵은 단 하나뿐입니다. vue-cli
는 webpack을 기반으로 하며 패키징 효과는 위와 동일하지만 구성이 다릅니다. 🎜🎜vue.config.js
파일에 다음 구성을 추가하세요: 🎜rrreee🎜vscode 편집기 디버깅🎜🎜vscode 디버깅에 문제가 있어 잠시 후 디버그 모드가 중단됩니다. 다양한 방법을 시도해 보세요. 성공하지 못했습니다. 계속하세요...🎜🎜추천: "🎜5개의 vue.js 비디오 튜토리얼 중 최신 선택🎜"🎜위 내용은 vuejs를 디버깅하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!