WebStorm 中调试 (Debug) JavaScript 文件(js)

已于 2024-04-23 15:47:04 修改
阅读量1.2k 收藏 7
点赞数 10
分类专栏： 前端 文章标签： webstorm javascript ide
于 2024-04-23 14:51:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53940224/article/details/138125921
版权

WebStorm 中调试 (Debug) JavaScript 文件(js)

在 WebStorm 中调试 JavaScript 文件，您可以设置断点，启动调试会话，并使用浏览器中的开发者工具来查看变量和执行流程。以下是详细步骤：

设置断点

  1. 打开您的 JavaScript 文件。

  2. 在您想要暂停执行的代码行点击并按下 F9 键，这样就会在那一行代码上创建一个断点。

启动调试会话

  1. 点击顶部菜单栏的 Run > Debug... 或者使用 Shift + F9 快捷键启动调试会话。

  2. 选择合适的运行/调试配置，如果是在浏览器中运行的代码，则可能需要配置一个 Web Server。

  3. 点击 OK 开始调试。

在调试中操作

  1. 当执行到达带有断点的代码行时，WebStorm 会暂停执行并允许您查看变量值、单步执行等。

  2. 使用调试工具栏上的按钮进行操作：

    • Resume Program (F9)：继续执行程序直到下一个断点。
    • Step Over (F8)：逐行执行当前函数，不进入函数内部。
    • Step Into (F7)：进入当前行中调用的函数。
    • Step Out (Shift + F8)：从当前函数返回到调用它的函数。
    • Restart (Ctrl + F5)：重新启动调试会话。

使用开发者工具查看变量和执行流程

  1. 在浏览器中打开调试页面，并打开开发者工具（通常是按 F12 键）。

  2. 在开发者工具中，切换到 Sources 或 Debugger 标签页，找到您的 JavaScript 文件。

  3. 在这里，您可以查看变量值、执行流程，以及在调试会话中的所有断点。

确保您的 WebStorm 已经安装并启用了 JavaScript 语言支持，并且您的项目设置中已经包括了您正在调试的 JavaScript 文件。

通过以上步骤，您可以在 WebStorm 中轻松调试 JavaScript 文件，并查看变量和执行流程，以便更好地理解代码的执行过程和调试问题。

Java小白白同学
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
idea Debug快捷键
weixin_34375233的博客
05-08 417
快捷键介绍 F7 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则进入当前方法体内， 如果该方法体还有方法，则不会进入该内嵌的方法中* F8 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则不进入当前方法体内* F9 在 Debug 模式下，恢复程序运行，但是如果该断点下面代码还有断点则停在下一个断点上...
Javascript | JS如何断点测试(WebStorm)
红星编程实验室
02-03 665
Javascript | JS如何断点测试(WebStorm)
使用WebStorm如何调试Vue代码
w708955424的博客
05-28 832
WebStorm作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试Vue应用。如果你使用的是Vue CLI创建的项目，并且已经配置了开发服务器（通常使用webpack-dev-server），那么你需要将URL设置为开发服务器的地址（如http://localhost:8080）。另外，WebStorm支持多种调试工具，包括浏览器的开发者工具，但本文主要讲解的是使用WebStorm自带的调试功能。2. 在你想要调试的代码行左侧点击，你会看到一个红色的圆圈。
WebStorm打断点调试Vue项目--方法/实例
IT利刃出鞘的博客
11-21 1万+
本文介绍如何通过在WebStorm里打断点来调试Vue项目。
webstrom Debug 调试vue项目的方法步骤
10-18
主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webStorm debug vue项目的两种方案
最新发布
大话家的博客
06-24 539
总的来说，方案2的操作，实际上会让webstorm打开两个端口，一个是服务端口（对应我这里的serve服务），另外一个就是debug端口（对应我这里的serve JavaScript），通过debug端口浏览器和webstorm之间交互用户debugger动作，以便知道用户干了什么。
WebStorm--调试
IT利刃出鞘的博客
11-20 2326
环境搭建 其他网址 WebStorm强大的调试JavaScript功能_弃天笑的程序世界-CSDN博客 简介 Webstorm联合JetBrains IDE Support调试跟其他浏览器的调试相比的好处： 方便，不用去切换。 他可以直接把一些参数类型、数值结果直接显示在代码上面。 安装插件 1.Chrome安装JetBrains IDE Support https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjag..
WebStorm调试javaScript
牛八少爷的专栏
08-24 1万+
目录 1. WebStorm调试官方视频： 2. Chrome安装插件JetBrains IDE Support 3. 设置ip地址和端口号 3.1 查看WebStorm的Debugger端口 3.2 设置JetBrains IDE Support 4. WebStorm测试debug 4.1 创建一个index.html 4.2 js调试 1. WebStorm调试官方视频： ...
调试React Native项目(webstorm)
gaokaikai1996的博客
02-27 384
第一步：下载安卓 React Developer Tools谷歌插件地址：http://blog.csdn.net/gaokaikai1996/article/details/79386992第二步：需要使用Debug模式启动react native项目第三步：在安卓设备上调出菜单 选择 Debug Js Remotely便会自动打开谷歌浏览器个人demo： http://www.chenzhuo...
如何在WebStorm中调试JavaScript程序
FormulaRoom的博客
12-08 5428
1.下载chrome插件在chrome应用商店中搜索”JetBrains IDE Support”，点击”添加至chrome”进行安装：安装完成后，chrome的右上解会出现一个图标： 2.配置WebStorm 点击WebStorm右上角的三角，点击”Edit Configurations”： 点击”+”号，选择”JavaScript Debug”: 配置要调试的页面路径： 点击右上角的debug
用webstorm和vscode断点调试vue
12-04
VUE断点调试技术 大家都知道后端开发是可以设置断点调试运行的,现在前端开发也可以和后端开发一样设置断点调试运行了
es6-debug-webstorm：如何在Webstorm中调试ES6（使用gulp）
02-05
-- index.js |-- sample.js.babelrcgulpfile.babel.jspackage.json.babelrc内容： { "presets" : [ "es2015" ]} 下面描述的设置使用gulp 3.x将ES6文件（包括源映射）转换为ES5，然后可以在WebStorm中使用它们调试ES6...
Debug_js.rar_ jsdebug_debug js_javascript_js debug_js能debug
09-24
"Debug_js.rar"这个压缩包显然提供了一些关于JavaScript调试的资源或工具，可能是为了帮助开发者更有效地定位和解决问题。在这个压缩包中，文件名"js调试"可能包含具体的调试教程或者示例代码。 在JavaScript调试中...
WebStorm调试ThinkJS
12-03
在"WebStorm调试ThinkJS"的主题下，我们将探讨如何在WebStorm 2018.3版本中设置和使用调试器来优化ThinkJS项目的开发流程。以下是详细的步骤和知识点： 1. **安装ThinkJS**: 首先，确保已经安装了Node.js环境，然后...
WebStorm-cant-debug-Meteor-packages:Webstorm 的复制
06-26
WebStorm-cant-debug-Meteor-packages Webstorm 的重现： 安装流星： Windows： : *nix: curl https://install.meteor.com/ | sh curl https://install.meteor.com/ | sh 使用这些文件创建一个项目。 使用 Meteor ...
js调试工具debug
07-09
"js调试工具debug"的标题和描述提到了一种用于调试JS的高效方法，不再依赖简单的`alert`语句。以下将详细介绍JavaScript调试工具的相关知识点，并探讨其在实际开发中的应用。 1. **浏览器内置的开发者工具**：现代...
用webstorm进行javascript的Debug
热门推荐
yangyuhan156的专栏
10-04 2万+
本来想些一个关于karma+jasmine单元测试覆盖率和如何与kenkins配合使用，发现已经有一篇写的很好的了，而且验证是可以用的。地址直接贴上了：http://www.myexception.cn/software/1632891.htmljavascript Debug目前我们开发中javascript的debug一般都是用chrome和firefox的开发者工具来进行debug，这些工具使
webstrom 断点调试,小白详细步骤篇
1
06-21 1936
网上找了很久都是七零八落的,要么就是不够通俗易懂故作此文章记录和分享。
webstorm断点调试vue
08-28
在WebStorm中进行断点调试Vue项目的步骤如下： 1. 首先，在WebStorm中打开你的Vue项目。 2. 在代码编辑器中选择你想要设置断点的位置，可以是Vue组件的某一行代码。 3. 在你选择的位置上点击鼠标右键，然后选择"Toggle Breakpoint"或者"Add Breakpoint"，这样就在该位置设置了一个断点。 4. 接下来，你需要配置调试环境。点击WebStorm右上方的"Edit Configurations"按钮，在弹出的窗口中选择"Add New Configuration"，然后选择"JavaScript Debug"。 5. 在配置窗口中，将"URL"设置为你的Vue项目的入口文件（通常是main.js或app.js）。 6. 设置"Browser"为你想要在哪个浏览器中进行调试。 7. 确保"Port"的数值与你在Vue项目中设置的调试端口数值相同。你可以在Vue项目的配置文件中找到调试端口的设置。 8. 点击"Apply"保存配置。 9. 现在，你可以点击WebStorm右上方的绿色"Debug"按钮来启动调试模式。WebStorm会自动打开调试控制台，并在你设置的断点处停止执行代码。 10. 在调试控制台中，你可以使用常见的调试功能，例如逐行执行代码、查看变量的值等等。 11. 当你调试结束后，可以点击调试控制台右上方的红色"Stop"按钮来停止调试模式。 这样，你就可以在WebStorm中使用断点调试来调试Vue项目了。请注意，在配置调试环境时，确保端口设置正确，并且选择了正确的入口文件和浏览器。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [WebStorm打断点调试Vue项目--方法/实例](https://blog.csdn.net/feiying0canglang/article/details/121452651)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [如何在webstorm下进行vue项目的断点调试](https://blog.csdn.net/weixin_29005819/article/details/109988307)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值