Javascript | JS如何断点测试(WebStorm)

最新推荐文章于 2024-06-11 20:28:15 发布
最新推荐文章于 2024-06-11 20:28:15 发布
阅读量724 收藏
点赞数 3
分类专栏： 前端研究院 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45325204/article/details/136002801
版权
本文对比了JavaScript在WebStorm中的断点调试方法与Java和Python在PyCharm中的不同，介绍了如何在WebStorm中设置断点并通过控制台进行调试，旨在帮助初学者理解和实践JavaScript调试。
摘要由CSDN通过智能技术生成

JavaScript的断点与之前所学到的Java和python在jetbrain系列编辑器中的断点debug不太一样，往常我们在编写python的时候用pycharm的时候是直接断点进入debug的，就像下面这样

只要直接在代码中断点，然后运行debug功能即可

但是在WebStorm中不是，使用中直接打开debug功能，会自动选择默认浏览器打开页面

在浏览器中按F12打开控制台

在控制台中点击“Sources”选项，可以看到当前文件运行的JS代码

选中要断点的行

刷新浏览器当前页面（F5）即可进入debug模式

这里就和其他编辑器的debug功能一样了，还是挺怪的，可能这就是前端和后端不一样的地方吧

特意写这篇文章，用来帮助那些用书本学习Javascript且不知道怎么断点debug的人

红星编程实验室
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用webstorm和vscode断点调试vue
12-04
VUE断点调试技术 大家都知道后端开发是可以设置断点调试运行的,现在前端开发也可以和后端开发一样设置断点调试运行了
WebStorm打断点调试Vue项目--方法/实例
IT利刃出鞘的博客
11-21 1万+
本文介绍如何通过在WebStorm里打断点来调试Vue项目。
WebStorm前端项目打断点调试Vue项目
最新发布
zyhang666的博客
06-11 520
首先声明：本方法适合项目，不适合vite项目。
WebStorm 中调试 (Debug) JavaScript 文件(js)
Java小白白的博客
04-23 1460
在 WebStorm 中调试 JavaScript 文件，您可以设置断点，启动调试会话，并使用浏览器中的开发者工具来查看变量和执行流程。
Vue项目在WebStorm + Chrome组合下进行断点调试
qq_43659871的博客
12-20 1221
第一步，下载安装Chrome和WebStorm，本文不赘述，请自行百度。 第二步，在Chrome商店中安装插件：JetBrains IDE Support 注意：需要先FQ才能下载安装。 安装方式：把下载文解压->然后进入谷歌浏览器插件界面()打开开发者)->加载已解压的扩展程序->选择即可 第三步，用WebStorm打开Vue项目，配置启动项目环境 1. 新增配置，添加npm，如下图： 2. 进行配置，如下图： 第四步，配置debug环境 1. 设置WebStorm端口，如下图：
webStorm使用断点
vv_wisher的博客
09-29 4194
webStorm使用断点
webstrom 断点调试,小白详细步骤篇
1
06-21 1971
网上找了很久都是七零八落的,要么就是不够通俗易懂故作此文章记录和分享。
webstorm 断点调试
Dafei4的博客
10-21 4696
1. chrome 断点调试插件 插件下载地址 插件地址02 其他参考地址: 参考地址1 官方参考地址
webstorm 断点调试 tips
LynnWonder
09-17 2191
webstorm debug 记录 文章目录webstorm debug 记录调试前端代码调试工具函数前置配置具体调试 背景: ts 作为 js 的超集，我们常常用其来开发一些工具函数直接上传到 npm 使用，抑或是直接用来开发服务端，vscode 调试方便，网上教程也很多。这篇文章用来记录用 webstorm 调试的一些 tips 调试前端代码 调试工具函数 前置配置 webtorm Running and debugging TypeScript npm install ts-node --save
用WebStorm和VS Code断点调试Vue
w708955424的博客
06-03 533
无论是使用WebStorm还是VS Code进行Vue项目的断点调试，都可以帮助我们更好地追踪代码的执行流程，找到并修复bug。在VS Code的左侧边栏中，有一个绿色的虫子图标，这就是调试启动按钮。在VS Code中进行调试的操作与WebStorm类似，我们可以查看变量的值、调用栈等信息，并使用单步执行、跳入函数、跳出函数等操作来追踪代码的执行流程。WebStorm是JetBrains公司开发的一款强大的JavaScript IDE，它内置了对Vue.js的支持，使得我们可以在其中轻松地进行断点调试。
webstorm的egg debug断点无效
weixin_42212558的博客
03-24 3392
环境 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调试JavaScript
xuxuan1997的博客
11-20 572
1.WebStorm创建项目工程，直接选择Empty Project类型，然后增加相应的html和js文件 ，点击右上角 Add Configurations  2.点+号，然后选择JavaScript Debug  3.点击右上角的按钮 现在浏览器，除了ie8及以下的浏览器，当你切换标签页面时，浏览器会自动清除本页面的js缓存。 切换完选项卡之后会清除掉这里的缓存数据。   ...
Webstorm 调试 JavaScript 代码
BoReFrontEnd的博客
02-18 3970
通常前端项目的 JavaScript 代码调试是通过浏览器的开发者工具（右键菜单中点击 “检查”）来完成。这种调试的方式的舒适度很差，显示页面的区域占了很大一块空间，留给调试窗口的空间很小。另外，浏览器开发者工具也不具备 IDE 代码跳转功能等。在不跳出 IDE 的情况下直接调试 JavaScript 代码，可以最大限度增加调试窗口，并在不写 console.log 的情况下，通过直接在代码处显...
在webstorm中调试（Debug）前端代码
bigdargon的博客
12-05 1971
操作步骤如下: 1. 先运行项目：npm run dev 2. 配置JavaScript Debug 3.Debugger
JavaScript：断点调试
WLK654321的博客
12-01 5511
断点调试可以帮助我们查看代码运行过程。1.打开控制台，按F12或鼠标右键找到检查选项2.断点文件位置3.打断点4.进入调试状态5.逐语句执行暂停/恢复脚本执行（快捷键F8 Ctrl+ \ ）。 单步跳过下一个函数调用（快捷键F10 Ctrl+ ' ）。 单步执行下一个函数调用（快捷键F11 Ctrl+；）。 跳出当前执行函数（快捷键Shift+F11 Ctrl+Shift+；）。 步骤（快捷键F9）。 停用断点（快捷键Ctrl+F8）。 出现异常时暂停。
WebStorm强大的调试JavaScript功能
热门推荐
弃天笑的程序世界
01-06 6万+
一、JavaScript的调试目前火狐和Chrome都具备调试JavaScript的功能，而且还是相当的强大。如果纯粹是用浏览器来进行js调试的话，我比较喜欢用火狐。火狐可以安装各种插件，真的是非常适合开发者。不过今天的主角并不是火狐，也不是Chrome，而是号称最智能的JavaScript IDE：WebStorm。 WebStorm 是jetbrains公司旗下一款JavaScript 开发
JS系列（仅供参考）：【浏览器编程】浏览器F12调试工具面板详解和JavaScript添加断点
weixin_54626591的博客
03-27 1051
【浏览器编程】浏览器F12调试工具面板详解和JavaScript添加断点
JavaScript 打断点
zaxuezhe的博客
04-22 3991
程序加断点： 1.执行脚本通过浏览器打开， 2.按F12按键，弹出调试界面， 3.点击Source， 4.找到你需要添加断点的页 5.点击要添加断点行前面的数字，添加断点成功 6.点击右侧向下“箭头+原点”按钮，进行下一步调试 ...
Vue项目调试总结-WebStorm+Chrome调试
我是guyue，guyue就是我O(∩_∩)O
08-14 3万+
Vue项目调试总结-WebStorm+Chrome调试 Vue项目调试总结-WebStorm+Chrome调试 - 为程序员服务 http://ju.outofmemory.cn/entry/354985 Vue项目其实是可以调试的，刚接触Vue项目开发时，在网上搜了一堆关于Vue项目调试的资料，发现网上都说比较难搞，也没有一个方案能走得通。都快要放弃了，后来试验了Vue官方推荐的...
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 ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值