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

已于 2024-04-23 15:47:04 修改
阅读量1.4k 收藏 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
    评论
专栏目录
Webstorm无法调试JavaScript（使用JavaScript Debuger）
pipi_Pia_bibi_Biu的博客
06-14 665
No scripts loaded by Edge（Edge 未加载任何脚本）使用Chrome也是一样表现。这里发文，是想知道有没有大佬能找到出现这个问题的原因哈。在调试界面的脚本切页，显示。
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...
webstrom Debug 调试vue项目的方法步骤
10-18
主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用WebStorm如何调试Vue代码
w708955424的博客
05-28 950
WebStorm作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试Vue应用。如果你使用的是Vue CLI创建的项目，并且已经配置了开发服务器（通常使用webpack-dev-server），那么你需要将URL设置为开发服务器的地址（如http://localhost:8080）。另外，WebStorm支持多种调试工具，包括浏览器的开发者工具，但本文主要讲解的是使用WebStorm自带的调试功能。2. 在你想要调试的代码行左侧点击，你会看到一个红色的圆圈。
webStorm debug vue项目的两种方案
大话家的博客
06-24 788
总的来说，方案2的操作，实际上会让webstorm打开两个端口，一个是服务端口（对应我这里的serve服务），另外一个就是debug端口（对应我这里的serve JavaScript），通过debug端口浏览器和webstorm之间交互用户debugger动作，以便知道用户干了什么。
Javascript | JS如何断点测试(WebStorm)
红星编程实验室
02-03 732
Javascript | JS如何断点测试(WebStorm)
如何在WebStorm中调试JavaScript代码（补充）
明月看潮生的博客
03-22 807
如何在使用Edge浏览器的情况下，在WebStorm中调试JavaScript代码。
如何在WebStorm中调试JavaScript程序
FormulaRoom的博客
12-08 5448
1.下载chrome插件在chrome应用商店中搜索”JetBrains IDE Support”，点击”添加至chrome”进行安装：安装完成后，chrome的右上解会出现一个图标： 2.配置WebStorm 点击WebStorm右上角的三角，点击”Edit Configurations”： 点击”+”号，选择”JavaScript Debug”: 配置要调试的页面路径： 点击右上角的debug
在webstorm中调试（Debug）前端代码
bigdargon的博客
12-05 1971
操作步骤如下: 1. 先运行项目：npm run dev 2. 配置JavaScript Debug 3.Debugger
webstorm下debug调试react js程序
学亮编程手记
04-08 2222
第一步：添加给你的Chrome添加JetBrains IDE Support的插件，需要翻墙，就是下图的这个。 image 第二步：我们把项目create-react-app创建的app跑起来，也就是运行命令 yarn start 它会自动打开一个页面，我们把它的url地址复制下来。 第三步：打开Webstorm的运行窗口，点击Edite Connfigurations。 到下面这个页面。 image 点选左上角的+号，选择JavaScript Debug，出现下面的界面。我们把复制的URL链接复制到
Webstorm 调试 JavaScript 代码
BoReFrontEnd的博客
02-18 3971
通常前端项目的 JavaScript 代码调试是通过浏览器的开发者工具（右键菜单中点击 “检查”）来完成。这种调试的方式的舒适度很差，显示页面的区域占了很大一块空间，留给调试窗口的空间很小。另外，浏览器开发者工具也不具备 IDE 代码跳转功能等。在不跳出 IDE 的情况下直接调试 JavaScript 代码，可以最大限度增加调试窗口，并在不写 console.log 的情况下，通过直接在代码处显...
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如何调试Vue代码
qq_63605379的博客
02-28 1198
调试Vue代码
Bug日记-webstorm运行yarn 命令报错
heart000_1
08-15 2014
Bug日记-webstorm运行yarn 命令报错
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 641
JavaScript青少年简明教程：函数及其相关知识（下）
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、付费专栏及课程。

余额充值