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...
在“JavaScript file”字段中选择你的Vue入口文件,通常是“main.js”。 点击“Apply”保存配置。 现在你已经成功配置了Vue项目的调试环境。下一步是启动调试,点击菜单栏的“Run”选项,选择你刚刚配置的调试配置名称,然后点击“Debug”按钮。WebStorm会自动启动调试,并在浏览器中打开你的项目。 2. 如何在WebStorm中...
法1:快速配置 使用npm启动项目 按住Shift+Ctrl,鼠标点击项目的url。 此时会自动启动调试 法2:手动配置 Run=> Edit Configurations=> "+"号 => JavaScript Debug=> 指定项目的url 例:http://localhost:8080 测试 测试1:自动配置debug 1.使用npm启动项目 2.自动生成debug配置 按住Shift+Ctrl,鼠标点击项目的url ...
一、新建Vue项目 为了演示一个完整的示例,所以从创建项目开始,这里通过vue脚手架命令开始创建一个项目 vueinitwebpack debug-vue 如果运行成功就会创建一个名称为debug-vue的vue项目,我们通过WebStorm打开这个项目并运行,启动命令 npmrundev 启动成功后查看页面 ...
1. 打开WebStorm，并加载Vue项目。2. 点击WebStorm右上角的“Run/Debug Configurations”按钮（或使用快捷键Alt+Shift+F10），在弹出的窗口中选择“+”号，添加一个新的JavaScript Debug配置。3. 在配置窗口中，选择“Browser/Live Edit”作为调试类型，并选择你要使用的浏览器（如Chrome、Firefox等）。如果你使用...
在helloworld.vue中添加一个按钮和方法,用来测试debug 8、webstorm设置浏览器 image.png 注: 1、这里可能会出现不管你选择什么,最后启动项目的时候都是弹框出IE浏览器,所以,建议直接把系统中的IE卸载掉 2、在后面安装好chrome插件后,项目debug时弹出的浏览器,不是这里配置好的本地浏览器,而是webstorm自带的默认浏...
在WebStorm的右上角，有一个绿色的虫子图标，这就是调试启动按钮。点击它，然后选择要运行的调试配置（通常是默认的JavaScript Debug），然后点击OK即可启动调试。此时，浏览器会自动打开，并加载Vue项目。5. 进行调试 当代码执行到断点处时，会暂停执行。此时，我们可以查看变量的值、调用栈等信息。同时，WebStorm还...
首先第一步在Vue 项目添加 devtool 配置。 module.exports = { configureWebpack: { devtool: 'source-map' } } 添加JavaScript Debug 点击Edit Configurations 添加JavaScript Debug Debug 配置 URL:填写待调试项目运行时的域名和端口号 Browser:选择调试运行的浏览器,默认即可 ...
第三步,用WebStorm打开Vue项目,配置启动项目环境 1. 新增配置,添加npm,如下图: image.png 2. 进行配置,如下图: image.png 第四步,配置debug环境 1. 设置WebStorm端口,如下图: image.png 2. 配置debug环境,添加JavaScript Debug,如下图: image.png ...