node.js inspect 浏览器 断点调试技巧与原理

做前端开发你一定会用到浏览器自带的各种调试工具firebug 谷歌的debugtools等，我们太过于熟悉使用这些工具了，以致于在node开发中同样的js文件我们是否也可以用浏览器就行调试呢，答案当然可以，本篇文章我们就node端的js代码如何通过inspect进行调试，以及说明其调试原理。

首先我们先用vd code工具来调试一端代码

通过vs工具新建js文件 a.js编辑如下内容：

let v=0;

function a(v){
    var v2 =100;
    v += v2;
}

function b(){
    a(v);
}

b(v);

按F5开启vs调试，此时在调试控制台你会看到如下信息：

在本地建立了websocket连接，它是我们调试监听过程所有操作的通道，

可以在浏览器中 http://127.0.0.1:10860/json 打开

如果你通过vscode打断点在代码中：

ok对于vs工具的调试我们不做过多说明。

如何通过浏览器调试

为了便于演示调试过程我们用express大建议的web请求b.js：

const express = require('express');
const app = express();

app.get('/',(req,res)=>{
    res.send("gcc");
})
 app.listen(3000,function(){
     console.log("端口3000已经启动。。。。。")
 })

我们通过 --inspect 命令来运行上面代码:node --inspect b.js

1.通过chrome://inspect/#devices打开调试工具

浏览器打开：chrome://inspect/#devices会看到

点击inspect，此时就会打开devtools

我们在get方法中打断点，然后刷新http://localhost:3000/就会进入我们的断点。

注意： 确保host与prot对应正确。

2.通过访问元信息：“devtoolsFrontendUrl”
元信息是通过inspect建立的websocket查看的见开始：

在浏览器端输入上面红框内信息后会直接打开

此种方式稍有点延迟不推荐使用；

3.在devtools调试控制台打开绿点

点击绿点：

如图会再打开一个devtools窗口，此时就可以来调试了。