1.打开项目,并保证可以正常启动vue项目 2.设置信息: --remote-allow-origins=* --remote-debugging-port 3.终端启动项目: 得到访问地址http://192.168.4.130:1799/ 4.配置启动项 5.配置浏览器 6.输入启动项监听的路径 配置浏览器之后 7.点击debug方式运行...
要在WebStorm中调试Vue项目,可以通过以下几个步骤实现:1、配置项目,2、使用内置终端启动开发服务器,3、在WebStorm中设置断点,4、启动调试工具。下面将详细描述每个步骤。 一、配置项目 创建或导入Vue项目:在WebStorm中创建一个新的Vue项目,或者通过“Open”选项导入现有的Vue项目。如果是创建新的项目,可以使用Vue CL...
1. 打开WebStorm，并加载Vue项目。2. 点击WebStorm右上角的“Run/Debug Configurations”按钮（或使用快捷键Alt+Shift+F10），在弹出的窗口中选择“+”号，添加一个新的JavaScript Debug配置。3. 在配置窗口中，选择“Browser/Live Edit”作为调试类型，并选择你要使用的浏览器（如Chrome、Firefox等）。如果你使用...
首先,确保你已经在WebStorm中打开了Vue项目。打开项目后,点击菜单栏的“Run”选项,选择“Edit Configurations”。 在弹出的窗口中,点击左上角的“+”按钮,选择“JavaScript Debug”。 在“Name”字段中输入一个你喜欢的配置名称,比如“Vue调试”。 在“URL”字段中输入你的项目的启动URL,比如“http://localhost:80...
在helloworld.vue中添加一个按钮和方法,用来测试debug 8、webstorm设置浏览器 image.png 注: 1、这里可能会出现不管你选择什么,最后启动项目的时候都是弹框出IE浏览器,所以,建议直接把系统中的IE卸载掉 2、在后面安装好chrome插件后,项目debug时弹出的浏览器,不是这里配置好的本地浏览器,而是webstorm自带的默认浏...
首先第一步在Vue 项目添加 devtool 配置。 module.exports = { configureWebpack: { devtool: 'source-map' } } 添加JavaScript Debug 点击Edit Configurations 添加JavaScript Debug Debug 配置 URL:填写待调试项目运行时的域名和端口号 Browser:选择调试运行的浏览器,默认即可 ...
本文介绍如何通过在WebStorm里打断点来调试Vue项目。 WebStrom配置 1.设置调试端口 File=> Settings=> Build,Execution,Deployment=> Debugger=> Build-in Server=> Port 默认是:63342 非必要无需修改它。若非要修改,不要改为8080等影响正常业务的端口。
一、新建Vue项目 为了演示一个完整的示例,所以从创建项目开始,这里通过vue脚手架命令开始创建一个项目 vueinitwebpack debug-vue 如果运行成功就会创建一个名称为debug-vue的vue项目,我们通过WebStorm打开这个项目并运行,启动命令 npmrundev 启动成功后查看页面 ...
第三步,用WebStorm打开Vue项目,配置启动项目环境 1. 新增配置,添加npm,如下图: image.png 2. 进行配置,如下图: image.png 第四步,配置debug环境 1. 设置WebStorm端口,如下图: image.png 2. 配置debug环境,添加JavaScript Debug,如下图: image.png ...
JavaScript file: 选择Vue项目的入口文件,例如src/main.js。 Environment variables: 可以设置一些环境变量,例如NODE_ENV=development。 点击OK保存配置。 现在,我们可以开始调试了。在WebStorm的顶部菜单中,选择Run->Debug 'Vue Debug'。这会打开一个新的浏览器窗口,并在控制台中输出调试信息。