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代理到手机有问题