cypress离线安装_vue调试工具vue-devtools安装及使用(亲测有效,望采纳)

本文主要介绍 vue的调试工具 vue-devtools 的安装和使用

工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧

安装:

1.到github下载:(下载一定要记得是master环境的代码,默认克隆后进入的是dev环境,执行npm run build会报错,执行git checkout master切换到master分支)

git clone https://github.com/vuejs/vue-devtools

2.在vue-devtools目录下安装依赖包

3.依赖包下载完后执行npm run build,编译打包成功后会在shells下生成chrome文件夹。此文件夹就是用来放入chrome的扩展程序。

npm run build

4.扩展Chrome插件

打开Chrome浏览器 >选择更多工具>扩展程序   >打开开发者模式

点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹,选择 vue-devtools > shells > chrome 放入, 安装成功如下图

6. vue-devtools使用

vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

怎么样, 是不是感觉工作效率提高了呢

温情提示:

1.vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试的

2.安装后, 需要关闭浏览器, 再重新打开, 才能使用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中接入Cypress来测试Monaco Editor可以按照以下步骤进行: 1. 首先,确保已经安装好了Cypress和Monaco Editor的依赖包。可以通过以下命令来安装它们: ```bash # 安装Cypress npm install cypress --save-dev # 安装Monaco Editor npm install monaco-editor --save ``` 2. 创建一个Cypress测试文件。在`cypress/integration`目录下创建一个新的测试文件,例如`monacoEditor.spec.js`。 3. 在测试文件中引入Monaco Editor的相关代码。根据你的项目具体情况,可以使用`import`或者`require`来引入Monaco Editor的代码。 ```javascript // 使用import引入Monaco Editor import * as monaco from 'monaco-editor'; // 或者使用require引入Monaco Editor const monaco = require('monaco-editor'); ``` 4. 编写测试用例。根据你的需求,编写相应的测试用例来测试Monaco Editor的行为。例如,可以使用Cypress的`visit()`方法来打开包含Monaco Editor的页面,并且使用Cypress的命令来操作和断言Monaco Editor的内容。 ```javascript describe('Monaco Editor', () => { beforeEach(() => { // 打开包含Monaco Editor的页面 cy.visit('/path-to-monaco-editor-page'); }); it('should have correct initial content', () => { // 断言Monaco Editor的初始内容是否正确 cy.get('.monaco-editor') .should('have.text', 'Hello, World!'); }); it('should update content on input', () => { // 在Monaco Editor中输入内容 cy.get('.monaco-editor') .type('New content'); // 断言Monaco Editor的内容是否更新正确 cy.get('.monaco-editor') .should('have.text', 'Hello, World!New content'); }); }); ``` 5. 运行测试。在终端中运行以下命令来执行Cypress测试: ```bash npx cypress open ``` 这将打开Cypress的图形化界面,你可以选择运行所有测试或者选择单个测试文件来执行。 注意:以上步骤仅供参考,具体的实现方式可能会因项目结构和需求而有所不同。你需要根据你的具体情况进行适配和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值