vuejs를 디버깅하는 방법-View.js-php.cn

vuejs를 디버깅하는 방법

藏色散人

풀어 주다： 2021-11-02 14:10:37

원래의

2689명이 탐색했습니다.

Vuejs 디버깅 방법: 1. Vue-cli 명령줄 도구를 사용하여 wabpack 템플릿을 기반으로 프로젝트를 초기화하고 devtool 구성을 source-map으로 변경합니다. 2. vue에 "module.exports = { 구성을 추가합니다. .config.js 파일 ...}"을 수행할 수 있습니다.

vuejs를 디버깅하는 방법

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs를 디버깅하는 방법은 무엇입니까? vuejs가 코드를 디버깅하는 방법

Webpack 기반 구성 디버깅

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浏览器中调试的时候可以显示源代码,效果如下:

vuejs를 디버깅하는 방법

cheap-module-eval-source-map选项效果：

vuejs를 디버깅하는 방법

webpack中devtool的其它选项各代表什么呢：

eval ：文档上解释的很明白，每个模块都封装到 eval 包裹起来，并在后面添加 //# sourceURL
source-map ：这是最原始的 source-map 实现方式，其实现是打包代码同时创建一个新的 sourcemap 文件，并在打包文件的末尾添加 //# sourceURL 注释行告诉 JS 引擎文件在哪儿
hidden-source-map ：文档上也说了，就是 soucremap 但没注释，没注释怎么找文件呢？貌似只能靠后缀，譬如 xxx/bundle.js 文件，某些引擎会尝试去找 xxx/bundle.js.map
inline-source-map ：为每一个文件添加 sourcemap 的 DataUrl，注意这里的文件是打包前的每一个文件而不是最后打包出来的，同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一个 url。
eval-source-map ：这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl
cheap-source-map ：不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）
cheap-module-source-map ：不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份，它是 webpack 对 loader 生成的 sourcemap 进行简化，然后再次生成的。

参考：webpack sourcemap 选项多种模式的一些解释

基于vue-cli的配置调试

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

옵션 효과:

webpack의 다른 devtool 옵션은 무엇을 나타냅니까:

eval : 문서에서는 이를 매우 명확하게 설명합니다. 각 모듈은 eval에 캡슐화되어 있으며 //# sourceURL
source-map이 끝에 추가됩니다. 이것이 가장 원본 소스입니다. -map 구현 및 그 구현은 다음과 같습니다. 코드를 패키징할 때 새 소스맵 파일을 생성하고 패키징된 파일 끝에 //# sourceURL 주석 줄을 추가하여 파일이 어디에 있는지 JS 엔진에 알려줍니다.
hidden-source-map: Documentation 위에서 언급한 대로 soucremap인데 주석이 없는 파일을 어떻게 찾을 수 있나요? xxx/bundle.js 파일과 같은 접미사에만 의존할 수 있는 것 같습니다. 일부 엔진은 xxx/bundle.js.map
inline-source-map을 찾으려고 시도합니다. >: 각각에 대해 소스 맵의 DataUrl을 파일에 추가합니다. 여기서 파일은 패키징되기 전의 각 파일이며 동시에 패키징된 마지막 파일이 아닙니다. 동시에 이 DataUrl은 전체 소스 맵 정보를 포함하는 Base64 형식의 문자열입니다. URL이 아닌 파일입니다.
eval-source-map: eval의 sourceURL을 완전한 souremap 정보의 DataUrl로 대체합니다.
cheap-source-map : 열 정보를 포함하지 않으며 로더의 소스 맵(예: babel의 소스 맵)을 포함하지 않습니다.
cheap-module-source-map: 열 정보를 포함하지 않습니다. 및 로더 소스맵도 단순화되어 해당 행만 포함합니다. 로더에 의해 생성된 소스맵을 단순화한 후 다시 생성하여 웹팩에 의해 생성되는 최종 소스맵은 단 하나뿐입니다.