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

最新推荐文章于 2023-06-08 14:38:45 发布
最新推荐文章于 2023-06-08 14:38:45 发布
阅读量5.3k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Webstorm 文章标签： webstorm jb 调试 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ade1986/article/details/46356071
本文介绍了一种解决Webstorm无法通过Chrome进行调试的问题的方法。通过更改设置中的端口为63342并启用外部连接选项，可以有效解决调试过程中出现的空地址和网页无法显示的问题。

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

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


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


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


Webstorm无法调试JavaScript（使用JavaScript Debuger）
pipi_Pia_bibi_Biu的博客
06-14 948
No scripts loaded by Edge（Edge 未加载任何脚本）使用Chrome也是一样表现。这里发文，是想知道有没有大佬能找到出现这个问题的原因哈。在调试界面的脚本切页，显示。
暑期实训日志11——webstorm+chrome实时浏览插件
TsukinagaShiroko的博客
07-23 541
一个webstorm插件
Webstorm 无法用google进行调试
qq_44061175的博客
03-16 715
弄了一下午没找到解决办法，而且最离谱的是其他项目（非页面文件）是用google作为浏览器调试的。其他的尤其是google取消勾选，然后使用Edge就可以调试了。如图所示，Webstorm用google进行调试打开的页面显示。弄了很久没找打解决办法，只能使用Edge调试。强迫症犯了，昨天都可以用的，突然不行。如图，在setting中设置Edge。记录下，看以后找的到解决办法不。webstorm通知显示。很显然没获取到端口号。
避坑！解决webstorm无法调试的问题
m0_46275020的博客
04-28 6483
解决webstrom无法打开html的问题！
webstrom 搜不到eslint插件
weixin_43566573的博客
07-07 1560
webstrom 搜不到eslint插件 解决方法：本地安装eslint插件 ESlint插件下载: https://plugins.jetbrains.com/plugin/7494-eslint/versions.
webstorm等JetBrains全家桶搜索任何插件都无反应
皮皮虾的博客
05-30 3310
使用webstorm搜索任何插件都无反应 打开webstorm设置 搜索settings或者是System Settings，找到HTTP Proxy [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sl00XCdR-1622367521583)(TS.assets/image-20210530173153940.png)] 设置AUTO-detect proxy settings后，点击右下角的Apply应用后回到plugins [外链图片转存失败,源站可能有.
谷歌浏览器 webstorm 网页开发调试插件
08-03
2. **调试JavaScript**：插件提供了强大的JavaScript调试工具，可以设置断点、查看变量值、单步执行代码，帮助开发者快速定位和解决问题。 3. **版本控制集成**：与WebStorm的Git集成相似，开发者可以直接在浏览器...
webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
02-27
其中，Live Edit插件是Webstorm中的一个功能，它允许开发人员在修改代码的同时实时查看更改后的效果，极大地提升了开发效率和体验。 要实现在Webstorm中使用Live Edit功能进行实时预览，需要配合Chrome浏览器的扩展...
WebStorm eslint 插件
09-27
在WebStorm中安装ESLint插件，你可以选择通过内置的插件市场在线安装，或者如描述中所述，从本地进行安装。以下是通过本地安装的步骤： 1. 下载ESLint插件的`.jar`文件，这通常可以在WebStorm的插件仓库或开发者...
完美解决webstorm启动索引文件卡死的问题
10-19
通过上述方法，可以在很大程度上解决WebStorm在索引大型项目时遇到的性能问题。在处理具体的项目时，可能需要结合以上几种方法共同作用，以达到最佳效果。开发者应根据项目的特点和自身的需求，灵活选择和调整优化...
webstorm的egg debug断点无效
weixin_42212558的博客
03-24 3902
环境 egg 2.6.1 + TypeScript 3.0.0 、node.js 12.13.1 、IntelliJ IDEA 2019.3.1 遇到的问题 根据egg官网配置的idea后，仍无法在idea内打有效断点。起初以为是我使用了typescript的缘故，但在Chrome的调试器中断点是能够成功的。 解决方案 Edit Configurations => 新增 => A...
webStorm使用
fh09102103的专栏
05-18 3736
WebStorm快捷键收集 1、webstorm快捷键： IntelliJ-Idea 的快捷键 Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/*…*/ ） Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D
westorm debug无法连接Google浏览器
Hello
06-08 1749
Webstorm debug无法连接浏览器
WebStorm用Chrome做网页调试访问的网页js文件出错，不是当前工程的js文件，是以往工程的文件导致404
旧城以西的博客
04-21 693
用Chrome做网页调试访问js文件出错导致404问题解决方案 尽管我们是用WebStorm点击选择的浏览器打开， 但Chrome打开时出现服务器访问出错的问题404，而我服务器明明已经打开了却说访问不到。便使用F12调试查看发现访问服务器的路径URL是这个: 这是我之前做的一个项目的服务器路径，但当前项目我login.html的js文件写清楚了访问的路径应该是："http://*****...
WebStorm+Chrom 调试React Native 项目图文详解
kill_bugs的博客
02-25 9785
在看这篇文章之前，大家要准备好的
webStorm 无法安装插件
fu20126041的博客
03-21 9038
最近不明原因导致webstorm无法下载插件进行安装，症状是下载失败。用一个非常土的办法解决更新最终解决方案在最下面。1. File -> settings -> Plugins  打开插件安装界面 点击中间按钮 浏览插件库搜索需要的插件后点击install后长时间没反应 然后跳出提示下载失败选中下载地址然后 Ctrl+C 复制到浏览器 去掉https 改成http协议就可以下载了。将...
前端代码调试：Webstorm调试js
热门推荐
EricaKang 的专栏
11-30 2万+
【前言】 目前前端开发JavaScript的debug一般都是用chrome和firefox的开发者工具进行调试，浏览器工具使用不方便，webstorm支持了在代码上打断点，在编辑器里debug js代码。类似Java后台 Eclipse debug效果。接下来就给大家介绍如何安装webstorm和对webstorm进行配置调试代码。 【Webstorm下载与安装】 1.官网
webStrom调试debug vue + live edit
04-14 635
用webStrom开启调试vue 第二个文章比较全 WebStorm+Chrome调试Vue步骤 其中与到了webstorm点run能启动chrome，但是debug缺无法响应的问题，网上找了一下，重启MAC电脑搞定了。 ...
WebStorm Debug 配置
温染的笔记
01-08 5072
WebStorm 调试配置 【所需工具】： Chrome 浏览器 Chrome 浏览器插件——JetBrains IDE Support WebStorm 配置过程 首先，下载 Chrome 浏览器以及 JetBrains IDE Support 插件。 安装成功后，我们可以看到右上角多了 JetBrains 公司的图标。 接下来，在我们要调试的代码处打上断点（在行号右侧空白处单击即可创建断...
如何配置 WebStorm 使其自动附加到 Chrome 调试实例
最新发布
08-09
<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、付费专栏及课程。

余额充值