node 代码调试模式

本文详细介绍了如何在VSCode、Node.js和浏览器环境下进行断点调试,包括添加断点、启动调试模式、逐行执行和查看变量值。涵盖全局安装node-inspect-brk、不同工具的使用技巧,适合前端开发者深入理解调试过程。
摘要由CSDN通过智能技术生成
方式一:
	vscode:
	(1)添加断点或debugger
	 
	(2)点击左侧瓢虫运行或调试,进入调试模式
	 


方式二:
node --inspect-brk 文件路径

(1)在文件中要调试的位置添加debugger
(2)刷新浏览器打开调试器,点击绿色node图标

在这里插入图片描述

方式三:
	全局下载:npm install -g  node-nightly
	
	添加debugger或断点
	
	执行命令
		node-nightly --inspect --inspect-brk 文件路径
	
	在浏览器:chrome://inspect打开调试页面

浏览器断点调试:

断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例)
在这里插入图片描述
用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下

1、添加断点
在这里插入图片描述断点现在已经打上了,然后做什么呢
在这里插入图片描述2、点击页面触发事件从而触发断点

3、点击图标,逐语句执行或者叫逐步执行
在这里插入图片描述
4、鼠标选中可看到变量值
选中以后,鼠标悬浮在目标上方,你就看到上图的结果
在这里插入图片描述
5、点击图标,逐过程执行
在这里插入图片描述在这里插入图片描述假设上图我只在227行打了个断点,然后一直点击逐语句执行”按钮到229行,这时候如果再点击一次“逐语句执行”按钮呢?则会进入下图的js里:

在这里插入图片描述这些都是zepto库文件的内容,没啥好看的,里面运行很复杂,我们不可能一直使用“逐语句执行”按钮,这样你会发现你按了大半天还在库文件里面绕。。。这时候咋办?

那就该“逐过程执行”按钮上场了

在这里插入图片描述
当我们运行到229行时,直接单击“逐过程执行”按钮,你会发现,js直接跳过了库文件,运行到了237行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值