js前端debugger总结

SSR页面debugger

	进入devtools source面板
	window ctrl+p
	mac cmd+p
	输入「>disable javascript」,按回车,然后刷新页面,你的页面就是纯 SSR 状态了。

在这里插入图片描述
在这里插入图片描述

debuger按钮

step over next functnion call 跳过下一个函数调用

step info next functnion call 进入下一个函数调用

step out of current functnion call 跳出当前函数调用

Globle listener 查看全部变量

call stack 查看调用盏,查看函数调用关系,执行过程

元素debuger

选中元素 $0就打印出来了

setTimeout

setTimeout(() => {debugger;}, 4000);

vsCode调试node

简单的来说,只要启动的 node 加上 --inspect 命令,
VSCode 就能自动监视到,并且 attach 到进程里开启调试

cmd+shift+p 搜索 比较常用的是仅带标志。

这样我们只要在 VSCode 终端里输入任意带有 
--inspect 的命令,就会自动被断点到了,很香。

nodeJs

console.log感觉也行
“开启 node 调试端口” + “符合 v8调试协议的调试器 attach 到调试端口”。

--inspect-brk 会停在代码的第一行
但是这只是普通的卡住代码,我们需要能支持 v8调试协议的 UI。

Chrome 自带了一个调试页 chrome://inspect/ ,打开后,如果是在本机,
会直接列出可调式的端口和文件地址(如果在远程,也可以配置 ip)。

点击这个 inspect ,添加我们的项目后,蓝色的断点条就乖乖的展现到眼前了。

线上bug调试


	一般开发环境有sourcemap
	prod环境没有,应为害怕代码泄漏
	可以弄到错误监控平台
	但是线上bug很难调试

	一般先去找sourcemap文件,如果webpack没有配置sourcemap
	可以本地build,然后花瓶 
	proxy mac proxy
	tool 工具栏 找 map local
	代理 访问 http://localhost8080
	的时候代理到对应的本地build好的sourcemap文件

移动端调试指南

mobiledebuger
vpn代理到手机有问题

### 前端调试工具 `debugger` 的作用 在前端开发过程中,`debugger` 是一种用于暂停 JavaScript 执行的关键字,允许开发者检查变量状态并逐步执行代码以查找错误的位置和原因[^3]。 当浏览器遇到 `debugger` 关键字时,会触发断点机制,使程序暂停运行以便于分析当前上下文环境中的数据流和逻辑结构。这种方式对于快速定位常见 Bug 非常有效,并能在1分钟内找到问题所在之处[^1]。 ### 使用方法 #### 方法一:直接嵌入代码 最简单的方式是在源码中插入 `debugger;` 语句: ```javascript function calculateSum(a, b) { debugger; return a + b; } ``` 一旦这段代码被执行到含有 `debugger` 行的地方,JavaScript 运行将会停止等待进一步指令。 #### 方法二:通过浏览器开发者工具设置断点 除了手动编写 `debugger` 外,还可以利用现代浏览器内置的开发者工具来设定断点而不改变实际代码文件的内容。例如,在 Chrome 中打开 DevTools 后可以点击左侧边栏上的某一行号旁边的小圆圈图标即可创建一个临时性的断点[^4]。 此时页面刷新后如果触达该处则同样会被中断下来供审查。 --- 另外值得注意的是,虽然可以在任何地方放置此关键字来进行即时测试,但在生产环境中应避免使用它以免影响用户体验甚至泄露敏感信息给访问者查看内部实现细节;因此建议仅限于本地开发阶段或是严格受控环境下运用此类功能[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值