前言

平常开发项目时候，虽然用console.log在浏览器打印变量的值和判断方法是否执行比较省事，但是有时候打印多了会很混乱。掌握一些debug的技巧就很重要，最起码可以让你早点下班回去干饭！

浏览器调试

其实浏览器调试不止是有打印日志，其实我们还可以使用浏览器的开发者选项进行断点调试，这样做可以让你直观的看到在执行的过程，变量是怎么变化，然后调用的函数方法是什么，这样碰到一些奇怪的bug也很快的就可以定位出来，不会说还比较难找到具体是什么错，这样也方便了我们百度相关错误的解决方案或者很快的去请教大佬。

调试过程

首先打开浏览器，按住F2或者鼠标右击，选择最后一个检查

然后我们就进入到开发者调试窗口，进入到Sources选项，然后找到自己要调试代码的文件，然后在想要调试的地方侧边右键，就会弹出一个选项，然后选择 Add breakpoint(就是在这个地方打个断点) 然后当下次执行这个方法就会在右边显示相关的变量、执行栈简单说就是函数调用的国臣。

scope就是我们想要看的变量，就是执行函数时方法的变量的值。Breakpoints就是我们打的断点，一般可以打很多断点，这样可以方便我们去进入到想要调试的地方。Global Listeners就是全局监听的事件，就是我们注册的一些方法比如说点击事件等等。

然后上面的小小的符号含义依次是暂停、跳过当前函数往下执行、进入函数体、跳出函数、下一步。

后端node代码调试

node代码调试的话也和前端类似，但是会比前端调试稍微麻烦一些，因为还得在编辑器和webpack.json去配置一些选项。

chorm调试

首先得去webpack.json的Scripts 属性去配置debug运行命令

可以用nodemon--- inspect指定运行的方式然后再加上编译后输出的文件路径或者用node --inspect-brk ./node_modules/.bin/webpack --inline --progress"命令

"scripts": {
    "start": "nodemon --exec babel-node src/index.js",
    "webpack:debug": "node --inspect-brk ./node_modules/.bin/webpack --inline --progress",
    "build": "cross-env NODE_ENV=prod webpack --config config/webpack.config.prod.js",
    "watch": "cross-env NODE_ENV=DEV=dev webpack --watch --progress --hide-modules --config config/webpack.config.dev.js",
    "debug": "nodemon --inspect ./dist/server.bundle.js",
  }