Vue提供的三种调试方式你知道吗
作者：长不大的大灰狼 发布时间：2024-05-29 22:44:57
标签：Vue,调试,方式
一、在 VS Code 中配置调试
使用 Vue CLI 2搭建项目时：
更新 config/index.js 内的 devtool property：
devtool: 'source-map',
点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图：
选择Chrome/Firefox：Launch 环境。将 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}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}
开始调试：
设置断点：
#启动项目
npm run dev
在debug页面选择“vuejs：chrome”：
二、debugger语句
推荐
function potentiallyBuggyCode() {
debugger
// do potentially buggy stuff to examine, step through, etc.
}
浏览器：F12打开DevTools，当运行程序后，会停在debbger语句：
注意：当安装了Eslint插件时，点击快速修复，Disable no-debugger for this line.不然，保存时会自动清除debugger语句。
三、Vue Devtools
谷歌浏览器的插件。
详情参考官方链接：https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
来源：https://blog.csdn.net/glpghz/article/details/122462311
0
投稿猜你喜欢
先举个例子，分别以不指定编码、指定编码为 utf-8、指定编码为 utf-8-sig 三种方式来做比较，再将写入 csv 文件和 txt 文- 一：背景引入对于一张图片，怎样修改局部像素值?二：利用Tensor方法比如输入全零tensor，可认为为黑色图片>>> n
- 视图：mysql中的视图，视图与表有很多相似的地方，视图也是由若干个字段以及若干条记录构成，视图也可以作为select语句的数据源。视图中保
- 前言使用 Python 的时候，我们知道 list 是一个长度可变对的数组， 可以通过 insert，append 和 extend 轻易的
- 阅读上一篇：打造设计你自己的字体 Ⅱ永远都在寻觅字体设计的灵感。夏天过后，我买了一套便宜的书法钢笔，说服自己，它会让我的鸡爬字产生脱胎换骨的
- [1]定义:正则又叫规则或模式，是一个强大的字符串匹配工具，在javascript中是一个对象[2]特性：[2.1]贪婪性,匹配最长的[2.
- 对于数据库管理员来说，可以经常想了解一些之前未听说过的存储过程，特别是无文档类型的存储过程。或许是用这些存储过程，能够简化日常的数据管理。为
- format函数的调用format函数可以被直接调用或在print函数中以占位符实现格式化调用。在**2.6**版本前，占位符仍和其他语言一
- 目录项目地址：简介使用主要代码项目地址：https://github.com/king-xw/Face_Recogntion简介本仓库是使用
- transforms按住Ctrl查看transforms的源码可以知道，transforms就是一个python文件，里面定义了很多类，每一
- Bit-Packed Data TypesMySQL有一些存储类型使用一个值中的一些单个的比特位来紧凑的存储数据。纯技术上将，不管是底层的存
- 概述从今天开始我们将开启一段自然语言处理 (NLP) 的旅程. 自然语言处理可以让来处理, 理解, 以及运用人类的语言, 实现机器语言和人类
- 本文实例讲述了Javascript获取表单名称（name）的方法。分享给大家供大家参考。具体如下：下面的代码通过表单的name属性获得表单名
- 简单加载官方预训练模型torchvision.models预定义了很多公开的模型结构如果pretrained参数设置为False，那么仅仅设
- 前言前面一直使用命令行运行pytest用例，本篇来学下使用pytest.main()来运行测试用例pytest.main()args 传一个
- 1、Git最基础的使用方式（1）初始化本地版本库要对现有的某个项目开始使用Git管理，只需到此项目所在的根目录，执行git init命令即可
- 前言：以往看到我博客的小伙伴可能都知道，我的前言一般都是吐槽和讲废话环节，哈哈哈哈。今天难得休息，最近可真是太忙了，博主已经连续一年都在99
- 有这么一段代码,可以先看一下有没有什么问题,作用是输入一段json字符串,反序列化成map,然后将另一个inputMap的内容,merge进
- 本文实例为大家分享了python xlsxwriter创建excel图表的具体代码，供大家参考，具体内容如#coding=utf-8 imp
- 有没有头疼过百度云盘都要塞满了，可是又没有工具能剔除大量重复无用的文件？这里教你一个简单的方法，通过整理目录的方式来处理我们云盘中无用的文件
