解决Webstorm通过Chrome无法调用JB插件调试的问题

本文介绍了一种解决Webstorm无法通过Chrome进行调试的问题的方法。通过更改设置中的端口为63342并启用外部连接选项,可以有效解决调试过程中出现的空地址和网页无法显示的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天碰到了很奇怪的问题,Webstorm原来可以通过Chrome进行debugger,但是突然就不可以了。调试打开的是空地址,运行打开后网页无法显示,百思不得其解。


最后通过百度加上自己的实验找到了我的问题所在,进行了一下设置就搞定了,很简单,下面就把我的设置过程放上来。


1,打开设置界面,找到Build,Execution,Deployment->Debugger,然后把端口改成63342,勾选上"Can accept external connection".点击 ok,然后调试就好了,请参考下图


<think>我们正在配置WebStorm以自动附加到已经运行的Chrome远程调试实例(使用--remote-debugging-port=9222启动Chrome实例)。这样,当我们在WebStorm启动调试时,Vue项目将在已打开的Chrome调试实例中打开,而不是新开一个窗口。 步骤: 1. 确保Chrome调试模式运行,并且Vue项目已经启动(但不自动打开浏览器)。 2. 在WebStorm中创建一个新的“JavaScript Debug”配置,并设置为“Attach”模式。 3. 配置该调试配置,指定端口(9222)和需要打开的URL(如Vue项目的本地地址)。 4. 启动调试WebStorm将附加到现有的Chrome实例。 详细步骤: 第一步:配置Vue项目不自动打开浏览器 在vue.config.js中设置: ```javascript module.exports = { devServer: { open: false } } ``` 如果没有这个文件,在项目根目录创建。 第二步:启动Chrome调试实例 使用命令行启动Chrome(确保关闭所有Chrome进程后再执行): ``` "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_debug" ``` 第三步:在WebStorm中创建调试配置 1. 打开WebStorm,点击菜单栏的“Run” -> “Edit Configurations...”。 2. 点击左上角的“+”号,选择“JavaScript Debug” -> “Attach to Node.js/Chrome”。 3. 在右侧配置面板中: - 设置“Name”为任意名称,例如“Attach to Chrome”。 - 在“Attach to”选择“Chrome”。 - 设置“Port”为9222(与启动Chrome时指定的端口一致)。 - 在“URL”中填写你的Vue项目地址,例如:`http://localhost:8080`(确保与Vue项目启动的地址和端口一致)。 - 其他选项保持默认。 4. 点击“Apply”保存配置。 第四步:启动Vue项目 在终端中运行: ``` npm run serve ``` 第五步:启动WebStorm调试 选择刚刚创建的调试配置(“Attach to Chrome”),然后点击调试按钮(绿色的虫子图标)。 此时,WebStorm会尝试附加到已经在运行的Chrome实例。如果成功,你将在Chrome调试实例中看到Vue项目的页面,并且可以在WebStorm中设置断点进行调试。 注意:如果遇到无法附加的情况,请检查: - 确保Chrome调试实例正在运行,并且端口9222没有被其他进程占用。 - 确保Vue项目的地址与调试配置中填写的URL完全一致(包括端口)。 - 如果Vue项目使用了代理,可能需要额外配置。 另外,WebStorm调试配置中有一个“Reuse existing tabs”选项(在配置的“After launch”部分),但这是用于“Launch”模式的,在“Attach”模式下不可用。因此,我们通过禁用Vue项目的自动打开和手动附加来确保页面在同一个Chrome实例中打开。 相关问题: 1. WebStorm附加调试时出现“无法连接到Chrome”错误怎么办? 2. 如何配置WebStorm以同时调试多个Vue项目? 3. 在WebStorm调试Vue项目时如何解决断点不生效的问题? 4. 如何配置WebStorm调试配置以支持HTTPS的Vue项目?</think>### 配置 WebStorm 自动附加到 Chrome 远程调试实例 以下是详细配置步骤,确保 Vue 项目调试时自动附加到已运行的 Chrome 调试实例: --- #### 1. **创建调试配置** 1. 打开 `Run > Edit Configurations...` 2. 点击 `+` 添加新配置 3. 选择 **JavaScript Debug** > **Attach to Node.js/Chrome** ```json { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, // 与启动参数一致 "url": "http://localhost:8080", // Vue 项目地址 "webRoot": "$PROJECT_DIR$/src" } ``` --- #### 2. **关键配置项说明** | 配置项 | 值 | 说明 | |--------|----|------| | **type** | `chrome` | 调试器类型 | | **request** | `attach` | 附加到现有进程 | | **port** | `9222` | 需与启动参数 `--remote-debugging-port` 一致 | | **url** | Vue 项目地址 | 如 `http://localhost:8080` | | **webRoot** | 项目源码路径 | Vue 组件所在目录 | --- #### 3. **启动顺序优化** 1. **先启动 Chrome 调试实例**: ```bash chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_debug" ``` 2. **禁用 Vue CLI 自动打开浏览器**: 在 `vue.config.js` 中添加: ```javascript module.exports = { devServer: { open: false // 禁用自动打开 } } ``` 3. **启动 Vue 项目**: ```bash npm run serve ``` 4. **在 WebStorm 启动调试配置**: 选择配置后点击调试按钮(🐞图标) --- #### 4. **验证附加状态** 成功附加后: 1. WebStorm 调试窗口显示 **Connected to Chrome** 2. Chrome 地址栏显示 **⚡ WebStorm 调试标识** 3. 可在 WebStorm 中直接设置断点调试 --- #### 5. **解决常见问题** - **无法附加**: 1. 访问 `http://localhost:9222/json` 确认调试实例存在 2. 检查防火墙是否阻止 9222 端口 3. 在 Chrome 启动参数添加 `--no-sandbox` - **断点不生效**: 1. 在 WebStorm 配置中启用 **JS 断点映射**: ``` Languages & Frameworks > JavaScript > Debugger > 勾选 "Resolve variable names in compiled code" ``` 2. 确保 `webRoot` 路径正确指向 Vue 组件目录 --- ### 相关问题 1. 如何配置 WebStorm调试时自动重新加载 Vue 组件? 2. 当同时调试多个 Vue 项目时,如何避免端口冲突? 3. 如何在 WebStorm调试 Vue 3 组合式 API 的响应式变量? 4. 远程调试时如何解决 WebStorm 断点与 Chrome DevTools 断点的冲突? 5. 如何配置 WebStorm调试 Vue 项目的 TypeScript 源码映射?[^1]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值