webstorm 断点调试 tips

最新推荐文章于 2025-02-06 14:13:36 发布
最新推荐文章于 2025-02-06 14:13:36 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： webFE node 文章标签： typescript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lynnwonder6/article/details/108639485
版权

webstorm debug 记录

文章目录

背景: ts 作为 js 的超集，我们常常用其来开发一些工具函数直接上传到 npm 使用，抑或是直接用来开发服务端，vscode 调试方便，网上教程也很多。这篇文章用来记录用 webstorm 调试的一些 tips

调试前端代码

前置配置

image

  • yarn dev or npm dev
  • 点击 debug 开始 debug

同时推荐使用 debugger+ Chrome 断点调试的方式来实现前端项目的 debug

调试工具函数

前置配置

webtorm Running and debugging TypeScript

npm install ts-node --save-dev or npm install ts-node -g

image

具体调试

以一个异步调用为例，当然也可以直接不用这种函数的方式，直接 then 出来数据即可：

image

IDEA TOP TIPS
Tattoo
03-04 7023
福利：JetBrains激活码 JetBrains(Idea/pyCharm/WebStorm…15款全都可以用)，切记，不要传播！ 点赞关注持续更新！ 812LFWMRSH-eyJsaWNlbnNlSWQiOiI4MTJMRldNUlNIIiwibGljZW5zZWVOYW1lIjoi5q2j54mIIOaOiOadgyIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVl...
手把手带你快速上手uni-app项目
小程序公社
04-28 2796
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，解决了多个平台，分别需要些多套代码，开发效率低，开发成本高的问题。 uni-app一套代码，可以编到七个平台，平台如下：android， ios， H5， 微信小程序，支付宝小程序，百度小程序，头条小程序。 uni-app在跨端数量、扩展能力、性能体验...
用webstorm和vscode断点调试vue
12-04
VUE断点调试技术 大家都知道后端开发是可以设置断点调试运行的,现在前端开发也可以和后端开发一样设置断点调试运行了
WebStorm打断点调试Vue项目--方法/实例
热门推荐
IT利刃出鞘的博客
11-21 2万+
本文介绍如何通过在WebStorm里打断点来调试Vue项目。
webStorm debug vue项目的两种方案图文详解
s_156的博客
02-06 99
本文将介绍通过webstorm对vue项目进行debugger调试的两种方案。但是，不管通过那种方案，都无法达到类似后端idea调试的体验，感觉十分难受，不过，比起用console.log还是好一些。如果各位有更好的方案，还望赐教。
webstrom 断点调试,小白详细步骤篇
1
06-21 2621
网上找了很久都是七零八落的,要么就是不够通俗易懂故作此文章记录和分享。
webStorm使用断点
vv_wisher的博客
09-29 4389
webStorm使用断点
如何使用WebStorm打断点调试Vue项目
qq_46614863的博客
07-27 2788
在开发 Vue 项目时，定位错误往往是一个令人头痛的问题。为了提升调试效率，我们可以利用 WebStorm 的强大调试功能，通过设置断点来逐步检查代码，找出问题所在。下面是具体的操作步骤： 注意：这里要启动两个，如果只启动一个是访问不到了
Python要点
weixin_46008163的博客
03-04 388
Python要点一、Python语言概述1. Python语言1.1 Python语言的基本概念1.2 Python 的特色1.3 Python的发展及应用1.4 Python之禅二、Windows下Python环境搭建2. 搭建环境2.1 Python的解释器2.2 Python的交互模式2.3 pip工具的使用2.3.1 pip介绍2.3.2 pip使用2.3.3 查看pip版本2.3.4普通安装2.3.5 指定版本安装2.3.6 卸载已安装的库2.3.7 列出已经安装的库2.3.8 显示所安装包的信息
秋名山直播php源码,【斗鱼直播源】浏览器抓取真实直播源地址(纯前端JS & PHP解析源码)...
weixin_34731217的博客
03-24 3218
浏览器抓取真实直播源地址0. 前言1. 直播源查找2. 浏览器请求过程分析及思路3. 模拟实现4. 整合播放器5. 【附】真实源地址6. 总结网上搜索各种平台的直播源地址都是满天飞，但是经常会有失效的时候，因为官方也会定期的升级系统修改各种参数或链接让直播源不能永久，所以敝人一直崇尚的是授人以鱼不如授人以渔，与其给直播源别人，不如教大家如何去爬取直播源，就算失效了也不怕。 0. 前言继虎牙直播后，...
2、Python语言概述——旺仔
wang_12588的博客
01-17 992
Python语言概述一、Python语言1.1、Python语言的基本概念1.2、Python 的特色1.3、Python的发展及应用1.4、Python之禅二、搭建环境2.1、Python的解释器2.2、搭建Python环境2.3、Python的交互模式三、Python的交互模式pip工具的使用3.1、pip介绍3.2、pip使用3.3、查看pip版本3.4、pip版本升级3.5、普通安装3.6、列出已经安装的库3.7、将已经安装的库列表保存到文本文件中3.8、批量下载导出来的包四、Pycharm简介4.
webstorm 断点调试
Dafei4的博客
10-21 4795
1. chrome 断点调试插件 插件下载地址 插件地址02 其他参考地址: 参考地址1 官方参考地址
Vue项目在WebStorm + Chrome组合下进行断点调试
qq_43659871的博客
12-20 1815
第一步，下载安装Chrome和WebStorm，本文不赘述，请自行百度。 第二步，在Chrome商店中安装插件：JetBrains IDE Support 注意：需要先FQ才能下载安装。 安装方式：把下载文解压->然后进入谷歌浏览器插件界面()打开开发者)->加载已解压的扩展程序->选择即可 第三步，用WebStorm打开Vue项目，配置启动项目环境 1. 新增配置，添加npm，如下图： 2. 进行配置，如下图： 第四步，配置debug环境 1. 设置WebStorm端口，如下图：
Javascript | JS如何断点测试(WebStorm)
红星编程实验室
02-03 949
Javascript | JS如何断点测试(WebStorm)
用WebStorm和VS Code断点调试Vue
w708955424的博客
06-03 679
无论是使用WebStorm还是VS Code进行Vue项目的断点调试，都可以帮助我们更好地追踪代码的执行流程，找到并修复bug。在VS Code的左侧边栏中，有一个绿色的虫子图标，这就是调试启动按钮。在VS Code中进行调试的操作与WebStorm类似，我们可以查看变量的值、调用栈等信息，并使用单步执行、跳入函数、跳出函数等操作来追踪代码的执行流程。WebStorm是JetBrains公司开发的一款强大的JavaScript IDE，它内置了对Vue.js的支持，使得我们可以在其中轻松地进行断点调试。
WebStorm调试
阳光码术-Java面试宝典
02-08 807
// 安装JetBrains IDE Support插件(需要翻墙) 地址:https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji 注:安装好后可见chrome右上部会出现一个JB的图标,右击这个图标可以设置调试端口(默认是63342) // 打开live edit功能 ->实现自动刷新 Build,Execution,Deployment->Live Edi
webstorm调试
s8806479的博客
09-27 814
简易流程，自用 下载插件 3 4 运行页面 5 页面内右键insert in webstorm
WebStorm--调试
IT利刃出鞘的博客
11-20 2470
环境搭建 其他网址 WebStorm强大的调试JavaScript功能_弃天笑的程序世界-CSDN博客 简介 Webstorm联合JetBrains IDE Support调试跟其他浏览器的调试相比的好处： 方便，不用去切换。 他可以直接把一些参数类型、数值结果直接显示在代码上面。 安装插件 1.Chrome安装JetBrains IDE Support https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjag..
WebStorm 中调试 (Debug) JavaScript 文件(js)
Java小白白的博客
04-23 2388
在 WebStorm 中调试 JavaScript 文件，您可以设置断点，启动调试会话，并使用浏览器中的开发者工具来查看变量和执行流程。
mac webstorm 断点调试
最新发布
03-08
### 如何在Mac OS上设置WebStorm中的断点调试 #### 配置Docker服务器连接 为了使WebStorm能够与远程服务交互，在开始配置断点之前，需先告知WebStorm Docker服务器的位置。这可以通过编辑运行/调试配置对话框来完成，不过更清晰的做法是在专门用于管理Docker服务器列表的地方进行操作[^2]。 #### 设置文件映射 为了让WebStorm能正确解析源码映射（source maps），需要配置文件系统的路径同开发服务器指定路径之间的对应关系。这项设置对于确保调试过程中变量和函数调用栈显示无误至关重要[^4]。 #### 创建JavaScript Debug Run Configuration 通过`Run | Edit Configurations...`菜单选项打开配置窗口，点击左上方加号并选择`JavaScript Debug`项。在此界面内输入应用启动地址URL，并确认已勾选启用断点追踪功能。 #### 添加断点 在想要暂停执行的代码行左侧空白处单击鼠标左键即可插入断点；也可以右键点击某一行并从上下文菜单中选取相应命令实现相同效果。当程序遇到这些标记时会自动停止以便进一步分析状态或检查数据流。 #### 开始调试过程 保存所做的更改后，按下绿色播放按钮旁边的虫形图标启动带有断点支持的应用实例。此时浏览器将会加载目标网页并且一旦触及任何预设好的中断位置就会触发暂停机制允许开发者逐步探索内部逻辑直至解决问题为止。 ```javascript // 示例：简单的Node.js应用程序入口文件app.js内容 const express = require('express'); const app = express(); app.get('/', function(req, res){ console.log("Request received"); // 可以在这里设置断点 res.send('Hello World!'); }); app.listen(3000); console.log('Server running at http://localhost:3000/'); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值