vuedebug（vuedebugger）

本篇文章给大家谈谈vuedebug，以及vuedebugger对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue之调试工具DevTools
• 2、安装好vue devtools后,运行程序打开调试,vue里面空白
• 3、怎么把vue环境搭建好并写入文件需要改动什么
• 4、脚手架如何改vue.min.js，在做vue调试的时候
• 5、在 VS Code 中调试vue项目

vue之调试工具DevTools

1.创建一个空文件夹（我命名为vue devtools），

2.进入这个文件夹按住 shift + 右键 选择差旅进入在此处打开powershell 窗口，就可以进入这个文件的终端

3.在终端输入 npm install vue-devtools

完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文亏轿件，进入其中，将vender 文件拖至谷歌虚空凳浏览器的扩展程序中即可。

进入verder下的 manifest.json ，修改persistent 为 true， 保存。

刷新浏览器扩展程序即可使用。运行vue程序，即可在控制台中看到此调试工具。

vue devtools 在用vue做的网站上会变亮但不能查看其结构。只有在本地运行的项目才能查看。

资料参考：

[img]

安装好vue devtools后,运行程序打开调试,vue里面空白

1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝态此的镜像，所历闭唯以先安装cnpm（因为肢培速度和稳定性都比较好） 2、在目标文件夹下打开终端 3、执行cnpm install vue-cli -g 全局安装 运行vu

怎么把vue环境搭建好并写入文件需要改动什么

1.首先新燃基建一个目录vue-wkdemo，这是我们的项目目录链帆。执行 npm init 命令生成package.json文件。执行npm init之后，会皮唤谨提示你填写一些项目的信息，一直回车默认就好了，或者直接执行 npm init -y 直接跳过询问步骤。

2.安装项目依赖项

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader

vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev

npm install html-webpack-plugin --save-d

npm install vue --save12341234

3.新建入口文件index.js，文件位置放置为：vue-wkdemo-app-index-index.js

import Vue from 'Vue'

import Favlist from './components/Favlist.vue'

Vue.config.debug = true;//开启错误提示

window.onload = function () {

new Vue({

el: '#app',

components: {

'my-component': Favlist

}

脚手架如何改vue.min.js，在做vue调试的时候

先安装node.js, 然后再安装全局vue-cli脚手架、webpack.

命令输入

1.(npm)cnpm install -g vue-cli //全局安装vue-cli

2.(npm)cnpm install -g webpack //全局安装webpack

(npm)npm install -g webpack-dev-server //安装webpack的本地webserver

安装完成后，vue-cli脚手架其实就已经把vue也装掉了，所以只需输入vue -V 和 webpack -v 等等就可以查看安装成功与否。上面的 cnpm是因为我使用淘启陵段宝的加汪肢速镜像，如果你没有使用此镜悄誉像，请替换回括号内的npm。

在 VS Code 中调试vue项目

1.VS Code 中安装Debugger for Chrome扩展的最新版本：

2.在config/development.config.js（官网描述的是config/index.js，所以需要根据具体的项目而定）中添加如下配置：

3.点击运行调试按滑粗做钮，再点击设置按钮，修改launch.json文件，配置如下：

4.在vue项目的文件中设置断点

5.启动vue项目：

6.点击运行调试按钮，再点击运行小图标，这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作，触发断点时会跳转掉凳灶vscode的断点处。

遇到的问题：信衡

官网中的launch.json配置中"url": " "，url的端口是8080，这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考：

在 VS Code 中调试：

关于vuedebug和vuedebugger的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。