IntelliJ IDEA 前端调试（Js Debug）

最新推荐文章于 2025-02-21 08:00:00 发布
最新推荐文章于 2025-02-21 08:00:00 发布
阅读量1.2w 收藏 16
点赞数 10
分类专栏： IntelliJ IDEA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fm0517/article/details/117664226
版权

最近在学习Draw.io项目，希望用IntelliJ对代码进行调试，因为项目中除了少部分后台代码外，几乎都是Java Script，所以希望找到一个好的JS调试方法，而不总是依赖于浏览器的开发者控制台。

网上大部分搜索结果都需要用到Chrome的JetBrains IDE support扩展，但是该扩展在Chrome扩展商店中已经下架了，而且历史最新版本2.0.10也已经无法在最新的Chrome中安装了。后来阴差阳错发现IntelliJ IDEA本身就带了JavaScript调试的功能，在此分享一下：

在这里插入图片描述
如上图，在Run/Debug Configurations中新建一个JsDebug项目，然后将需要调试的URL输入进去，并选择一个浏览器。

先启动服务端的Tomcat（如果需要启动服务端的程序的话），然后打好断点，再启动JsDebug项目，IntelliJ会自动拉起浏览器，跳转到指定的URl，然后就进入断点啦！

Java 领域中 IntelliJ IDEA 的代码调试秘籍
Java技术栈实战开发的博客
04-30 883
本文的目的是全面介绍 IntelliJ IDEA 在 Java 开发中的代码调试功能和技巧。涵盖了从基础的断点设置到高级的调试模式，如条件断点、异常断点等。通过详细的讲解和实际案例分析，让开发者能够熟练掌握 IntelliJ IDEA 的调试秘籍，解决开发过程中遇到的各种问题。范围包括 IntelliJ IDEA 社区版和旗舰版在 Java 项目中的调试应用。本文将按照以下结构进行阐述：首先介绍 IntelliJ IDEA 调试的核心概念和相关联系，包括调试的基本原理和架构；
不需要安装谷歌插件，使用使用IDEA自带的插件debug调试vue前端代码
sunzixiao的博客
09-11 854
点击启动下拉框，点击Edit Configuration弹出对话框后，点击+号，再选择JavaScript Debug，URL输入项目调试地址，浏览器建议选择默认的Chrome配置完成，然后启动会弹出Chrome页面，点击添加断点，就可以愉快地调试了。
JS debugger 调试
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2365442
在 IntelliJ IDEA 上进行前端开发
weixin_73060959的博客
02-21 2375
通过以上步骤，你可以在 IntelliJ IDEA 中高效地进行前端开发，充分利用其强大的工具链和插件生态提升生产力。IDEA 支持 HTML/CSS/JavaScript 的自动补全，输入标签或属性时按。当拉取代码遇到冲突时，IDEA 会弹出合并工具，手动选择保留的更改后标记为已解决。若使用框架（如 React/Vue），选择对应模板。配置 SFTP，直接将构建后的文件上传到服务器。插件，启动调试后，修改代码会自动刷新浏览器。，选择项目使用的语言版本（如 ES6+）。手动格式化：右键文件或代码块，选择。
idea 对JavaScript进行debug调试
baidu_21349635的专栏
08-23 3920
工作中接手别人的前端代码没有注释，看浏览器的network或者console切来切去，很麻烦，可以试试idea自带的js debug功能
debug idea js,IDEA调试javaScript
weixin_36081327的博客
03-18 1327
谈起JavaScript调试，大家可能想到的就是FireFox下的FireBug，这毫无疑问，FireBug基本已经成为JavaScript开发人员的必备工具。在本文中，将向大家介绍如何在IDEA下远程调试JavaScript，毕竟能在IDE工具中直接设置断点，进行调试，这还是非常诱人的。首先我们要给FireFox安装一个插件，该插件由IntelliJ IDEA的开发工程师开发，安装目录为%IDE...
idea 调试 js
weixin_44235759的博客
09-17 1055
下载 https://www.crx4chrome.com/crx/768/ 安装 https://blog.csdn.net/weixin_45369499/article/details/101429307 具体使用 https://www.cnblogs.com/cjw111/p/11526504.html
前后端不分离项目，如何使用idea调试前端js代码？
weixin_42677025的博客
12-13 1972
使用idea调试前端js代码
IntelliJ IDEA如何调试Vue路由的加载过程
05-02
接着，在IDEA中配置JavaScript调试，可能需要安装Vue.js插件，确保能够识别.vue文件。然后，设置运行配置，使用npm脚本启动开发服务器，并附加调试器。 在路由文件中设置断点，例如在router/index.js中的import语句...
IDEA Web项目调试方式1
sunbeacher的博客
05-16 1917
介绍IDEA调试web程序的实战经验和典型问题，包括local模式和remote模式
IDEA Maven项目使用debug模式运行Tomcat的详细教程
09-29
在本文中，我们将深入探讨如何在IntelliJ IDEA（IDEA）中使用Maven项目以Debug模式运行Tomcat服务器。这是一项非常实用的技能，对于开发和调试Java Web应用来说至关重要。 首先，我们需要确保在Maven项目中包含必要...
IDEA vuejs 插件
08-16
为了方便大家下载而上传，只需要1积分，我如果能赚10分，就免费共享了。
IDEA调试JavaScript代码
热门推荐
天堂的风的博客
06-04 2万+
1.使用 插件 JetBrains IDE Support这里提供的是CSDN下载，离线安装版，也可以自己去翻墙去谷歌的插件市场下载安装。其他浏览器只要是使用谷歌浏览器内核的都可以安装使用，你要是用的谷歌浏览器可以不用安装此插件也可以调试。下载的插件直接往浏览器里面拽就可以安装了。确保idea里的调试端口号和插件的一致记住用调试模式tomcat运行2.使用 Google Chrome浏览器只需要选...
三、JS小知识点之在IDEA中调试js
panchang199266的博客
06-02 1万+
  （一）在JS文件中需要调试的地方加上“debugger;”，然后运行程序。   （二）在浏览器中按“F12”打开调试面板，点击调试面板中的“调试器”或“Console”，当执行到该JS文件时，会进入调试模式。   （三）“F10”逐步执行，“F8”直接执行后续程序...
在IDEA中调试JavaScript代码
yunfeather的博客
10-21 5180
在IDEA中调试JavaScript代码 插件（下载解压，直接安装在谷歌浏览器中）： 地址链接 提取码：f3wk 在tomcat中：
详述 IntelliJ IDEA 之 Debug 篇
AlbenXie的博客
04-17 967
如上图所示：从“Server”开始，往后图标依次为： Show Execution Point ：显示执行端点（Alt + F10）  Step Over ：跳到下一步 （F8）  Step Into ：进入代码或者说进入到方法内部（F7）  Force Step Into ：强制进入代码或者说进入到方法内部（Alt + Shift + F7）  Step Out ：跳到下一个断点或
IDEA的debug调试技巧详解
cbmljs的博客
04-12 1126
debug调试也叫断点调试在程序的某一行打上断点，则在debug模式下运行到断点位置时会暂停，便于程序员观察代码的执行情况学会debug，有助于在程序运行未达到理想情况时，对程序的各个流程进行分析本文只详细描述了debug的一些基本的常用操作，如果有缺漏欢迎评论区留言~
如何在 IntelliJ IDEA 中配置前端开发环境
最新发布
05-03
<think>好的，用户想在IntelliJ IDEA中配置前端开发环境。我需要根据提供的引用和之前的知识来组织回答。首先，用户可能刚接触这个IDE，需要一步步的指导。 首先，根据引用[1]和[3]，配置的基本步骤包括安装插件、设置语言支持、配置模板等。需要确保提到安装Node.js和npm，因为这是前端开发的基础。然后，可能需要指导用户如何安装必要的插件，比如Emmet或者前端框架相关的插件。 接下来，项目结构也很重要。用户可能需要知道如何创建项目，管理文件和文件夹。引用[2]提到本地仓库路径，但那是针对Maven的，可能不适用，但可以忽略这部分，专注于前端结构。 然后，代码编辑部分，Live Templates在引用[3]中提到，可以举例说明如何添加常用片段，比如clg生成console.log，这能提升效率。另外，代码自动补全和格式化也是重点。 调试和运行部分，需要提到内置的终端，运行npm脚本，以及如何配置调试器。引用[3]里的部署与构建可能涉及Webpack或Gulp，需要简要说明如何集成这些工具。 版本控制方面，引用[1]和[3]都提到IDEA支持Git，所以需要指导用户如何连接仓库，进行提交和推送。 最后，优化建议比如主题设置、快捷键，以及常用插件推荐，比如Vue.js或React的支持插件，这些能增强开发体验。 需要确保步骤清晰，使用中文，并且每个部分都有具体的操作路径，比如菜单栏的选项。同时，检查是否需要提到配置外部工具，比如Node.js的路径，或者如何在IDEA中使用npm安装包。 可能用户还会遇到问题，比如插件安装失败，或者项目配置错误，但根据用户当前的问题，暂时不需要深入这些，保持回答在环境配置的基础步骤即可。确保每个步骤都有对应的引用支持，但引用中的部分信息可能需要调整，比如引用[2]的Maven部分不相关，可以忽略。</think>### 逐步教程：IntelliJ IDEA 前端开发环境配置 #### 1. 基础环境准备 - **安装 Node.js 和 npm** 前端开发需依赖 Node.js 环境，官网下载安装包并配置环境变量。安装完成后终端输入： ```bash node -v # 验证 Node.js 版本 npm -v # 验证 npm 版本 ``` - **启用 IntelliJ IDEA 前端支持** 打开 `File > Settings > Languages & Frameworks > JavaScript`，选择 ECMAScript 版本（推荐 ES6+），并勾选相关代码检查工具[^3]。 #### 2. 插件安装与配置 - **核心插件** 安装以下插件提升效率： - **Emmet**：快速生成 HTML/CSS 代码（默认已集成，需检查是否启用） - **CSS/HTML/JavaScript 支持**（默认启用） - **Vue.js/React/Angular**：按需安装对应框架插件 - **Prettier**：代码格式化工具（`Settings > Plugins` 中搜索安装） - **插件配置示例** 配置 Prettier 自动格式化： `File > Settings > Languages & Frameworks > JavaScript > Prettier`，勾选 `On code reformat` 和 `On save`[^3]。 #### 3. 项目结构与模板配置 - **创建前端项目** `File > New > Project`，选择 `Empty Project` 或 `Static Web` 模板，指定项目路径。 - **自定义文件模板** 添加常用代码片段（如快速生成 HTML5 基础结构）： `File > Settings > Editor > File and Code Templates`，在 `HTML` 标签页添加模板： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>$TITLE$</title> </head> <body> $END$ </body> </html> ``` #### 4. 代码编辑与调试 - **实时模板（Live Templates）** 添加 `clg` 快捷生成 `console.log`： `File > Settings > Editor > Live Templates` → 选择 `JavaScript` → 新建模板： ``` 缩写：clg 模板内容：console.log('$VAR$', $VAR$); ``` 应用范围勾选 `JavaScript` 和 `TypeScript`[^3]。 - **调试配置** 创建 `JavaScript Debug` 配置： `Run > Edit Configurations > + → JavaScript Debug`，指定启动 URL 或 HTML 文件。 #### 5. 构建工具集成 - **npm 脚本集成** 右键 `package.json` → `Show npm Scripts`，可直接运行 `dev`/`build` 等命令。 - **Webpack 配置示例** 若使用 Webpack，安装依赖后，IDEA 会自动识别 `webpack.config.js`，支持可视化配置参数。 #### 6. 版本控制与部署 - **Git 集成** 连接远程仓库：`VCS > Git > Clone`，输入仓库 URL。提交代码时通过 `Commit` 面板操作，支持差异对比[^1]。 - **自动部署配置** 使用 `Tools > Deployment > Configuration` 配置 SFTP，实现代码保存后自动同步到服务器。 #### 7. 高级优化 - **主题与字体调整** `File > Settings > Editor > Font` 修改代码字体，`Color Scheme` 切换暗色/亮色主题。 - **快捷键定制** `File > Settings > Keymap` 中搜索常用操作（如 `Reformat Code`），绑定习惯的快捷键。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

皓月如我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值