Vue和Vue-Element-Admin（五）：使用Vscode在chrome中调试vue

最新推荐文章于 2023-08-25 11:38:11 发布
置顶 最新推荐文章于 2023-08-25 11:38:11 发布
阅读量7.7k 收藏 6
点赞数 5
分类专栏： # Vue与Web开发 文章标签： vue elementui javascript vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yezonggang/article/details/110070915
版权
本文介绍了如何使用Visual Studio Code（VSCode）和Debugger for Chrome插件在Chrome浏览器中调试Vue.js应用程序，特别是Vue-Element-Admin项目。调试过程包括在VSCode中安装插件，配置launch.json文件，以及设置断点和运行调试。
摘要由CSDN通过智能技术生成

前后端分离使前端的断点调试更加复杂，chrome中调试vue，需要先在vscode中装Debugger for Chrome插件，然后增加调试的配置修改launch.json配置文件；可以参考vue官网步骤：chrome中调试vue

在集成过程中，可以使用debugger对指定的js文件行进行debugger操作，也可以在vue.config.js文件中通过设置devtools在运行时候在前端看source：webpack的devtools；也可以在vscode直接开启chrome进行调试运行；

// vue.config.js文件中设置devtools    
config
      .when(p
了解本专栏 订阅专栏 解锁全文 超级会员免费看
A叶子叶
关注
专栏目录
订阅专栏
Vue和Vue-Element-Admin（四）：vue-element-admin的用户登录集成
叶子叶来
11-20 1万+
Vue-element-admin使用mock.js数据进行用户和权限的验证，使用该框架开发的首要事情就是用户集成改造，使用本地测试环境的用户和角色信息完成登录验证；github地址：https://github.com/yezonggang/testspring
vscode-devtools:VSCode扩展，用于在Webview中托管chrome devtools
05-02
适用于Chrome的VSCode DevTools VSCode扩展，用于在Webview中托管chrome devtools。 如果您正在寻找更简化且受官方支持的devtools扩展，则应尝试 附加到正在运行的Chrome实例： 启动“ Chrome调试程序”项目并使用截屏视频： 使用扩展名 作为调试器启动 通过使用launch.json配置文件，您可以像调试器一样启动以VS Code托管的Chrome DevTools。 但是，Chrome DevTools并不是调试器，不会碰到在VS Code中设置的任何断点，您当然可以在Chrome DevTools中使用脚本调试器。 为此，请在launch.json添加带有两个参数的新调试配置。 type -它必须是调试器的名称devtools-for-chrome 。 必需的。 url用于启动Chrome的URL。 可选的。 fil
VScode调试Vue-element-admin、Vue项目
CN_CKG__KK的博客
08-19 1712
第一步：扩展 中输入 Debugger for Chrome 安装该扩展； 第二步：创建 launch.json 文件，选择 Chrome 后 把原有的内容替换 为以下内容，一个是谷歌浏览器、一个火狐浏览器的配置，记住把 url 的端口号改为本地开发的端口号； { "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "launch",
VsCode搭建vue极简后台管理模板vue-admin-template
Thinkingcao的专栏
10-11 6113
前言 vue-admin-template：一个极简的 vue admin 管理后台，它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。是一个vue轻量级后台管理系统基础模板，预览地址：https://woai3c.github.io/#/login或者http...
Chrome和VSCode进行联调
renqiaoer的博客
08-11 737
调试之前要找到Chrome的快捷方式，对属性进行以下配置，添加remote-debugging-port=9222 tips:注意前面有一个空格。 首先在左侧扩展中搜索Debugger for Chrome并点击安装： 点击Run>start Debbugging(或者选择F5)，选择下拉按钮，会有一个添加，选择chrome 之后会出现laungh.json的配置文件在自己的项目目录下面 进行如上配置，“file”是一个笨方法，每次调试不同的文件时都需要更改相应的路劲，由于才开始学习，等我研究归
Chrome Devtools和VSCode的几种打断点的方式
jaqi.csdn
12-17 659
Chrome Devtools 普通断点 在Sources面板左侧代码行标位置左键单击 条件断点 在Sources面板左侧代码行标位置右键单击 DOM断点 在HTML面板在DOM节点上右键单击 XHR断点 可以根据url条件对所有的XHR命令打断点 Sources面板下面 全局监听断点 Sources面板下面 事件断点 Sources面板下面 异常断点 Chrome Devtools 普通断点 右侧行标位置左键单击 条件断点 右侧行标位置右键单击 引用自知
vue-element-admin-chrome:[WIP] vue-admin-element作为侧面板来统一集成一些有用的功能，以供githubgitlabbitbucket浏览
04-30
vue-element-admin-chrome 环境 节点v10.5.0 npm v6.1.0 纱线v1.7.0 要求 节点> = v5 NPM> = v3 Webpack v3 目标 使用vue-admin-element作为侧面板来统一/集成一些有用的功能，以供github / gitlab / bitbucket...
vue-admin-java：Spring启动+ mybatis + vue + element-ui实现后台管理API接口https：lmxdawn.github.iovue-admin-java
01-29
前言 ...项目JAVA前端地址： 项目JAVA首次地址： ...欢迎星 要求java8版本 整体效果 功能 管理员登录 ...（建议使用最新版Chrome浏览器） 捐 鼓励鼓励鼓励，重要的事情说三遍 执照 版权所有（c）2018 lmxdawn
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
在vue-admin-template中，学习如何配置路由，使用动态路由匹配和命名视图。 5. **axios**：常用于Vue项目的HTTP客户端，处理前后端数据交互。了解如何发起GET、POST请求，处理响应，以及错误处理。 6. **Element ...
vue-element-admin源码解读——项目启动过程
星留影的刹那间
06-09 2719
vue-element-admin是一款优秀的前端框架，使用了最新的前端技术，内置了(Vue-i18)国际化解决方案，动态路由(Vue Route)、状态管理(Vuex)等等方案使得整个框架结构非常清晰。不仅如此，该框架还有Typescript的实现版本(vue-typescript-admin-template)，具有强制类型约束、接口规范统一等等功能，对今后项目的拓展与模块化、与后端的对接等等方面将起到必不可少的作用。 虽然vue-element-admin官方也编写了相关的用户指南，不过只是单纯地介绍
vue-element-admin中如何打断点
csx blog
12-08 941
vue-element-admin中如何打断点 1、vue.config.js中加一行 devtool: ‘source-map’, configureWebpack: { devtool: 'source-map', // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name:
前端断点调试（以vue项目举例）
qq_40460454的博客
11-08 3527
前端代码断点调试方法，不会调试的小白赶快来看吧
vue项目打断点的三种方式
热门推荐
A_Common_Man的博客
02-05 2万+
如何在vsCode调试vue项目，vue断点调试时跳过源码，vue调试时怎么跳过不必要的文件
vue-element-adminV4.0版本遇到的一些问题及解决方案
超频化石鱼的博客
05-07 1万+
V4.0与之前版本的差异 在vue-element-admin V4.0之前的版本，根目录下存在2个文件夹： build文件夹包含构建相关的build及webpack等文件。 config文件夹包含各种环境下的配置。 通常地，各种基础设置都能在这2个文件夹下的配置文件中完成。 然而，V4.0版本变化较大： build文件夹保留，但其下只剩了一个index.js文件。 config文件夹去掉。...
vue-element-admin使用的详细步骤以及报错解决
最新发布
weixin_71893751的博客
08-25 877
这个问题是ssh的报错，我们需要想办法把ssh改成https。说明你的nodejs版本和npm版本不匹配，可以通过。出现此报错说明没有nodejs，需要重新进行安装。
VSCode和谷歌浏览器的常用插件
chonger_feifei的博客
03-02 686
VSCode和谷歌浏览器的常用插件
19个实用vscode开发插件分享
qq_43067585的博客
11-08 1789
工欲善其事必先利其器。本篇文章给大家总结分享19个我在开发中使用到的vscode插件，希望对大家有所帮助！
vscode插件“Debugger for Chrome”配置
jie_rookie的博客
03-23 5085
1：VSCode 上安装：Debugger for Chrome 2：vscode打开一个html，按F5，在弹出来的框中选择 Chrome，会自动打开launch.json文件 3.往launch.json中追加以下代码： { "name": "使用本机 Chrome 调试", "type": "chrome", "request": "launch", "file": "${file}",...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A叶子叶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值