why and how to debug without browser

大家如果对调试不熟悉的话建议先看一下科普文章再来看，会有不一样的感受哦。比如这个：http://seejs.me/2016/03/27/jsdebugger/ 。 如果大家英文比较好推荐这个：https://css-tricks.com/debugging-tips-tricks/ 。 这个文章也是我”尝试“ 翻译的一个文章（https://my.oschina.net/wanjubang/blog/880777），翻译到一半的时候，由于工作原因中断了一段时间，后来发现已经有掘金的人翻译了（https://juejin.im/post/5901e8d6a0bb9f0065e64f63）

Why

讨论为什么不要在浏览器中debug之前，我们先来看下日常开发的过程是怎样的。

一个经典的调试过程是这样的：

切到编辑器写代码 -> 切到到浏览器看下执行-> 如果不正常需要debug -> 打开开发者模式-> 找到代码 ->打断点 -> 刷新浏览器 -> 找到问题 -> 回到编辑器继续改代码



我相信这是大部分的开发状态，那么这种开发状态有什么坏处呢？ 显而易见，你需要频繁的在编辑器和浏览器中进行切换，浪费时间。 而且为了在浏览器中找到我们写的代码通常需要花费些功夫（比如source map 就是为了解决这个问题的）。

那么不使用浏览器调试是一种什么样的状态呢？

切到编辑器写代码 -> 编辑器中执行->打断点 -> 找到问题



问题得到了简化，我们debug的时间大幅度减少。而且避免了频繁切换导致打断我们的思路。

另一方面，不同的浏览器的调试工具不一样。 尽管我们开发的大都使用chrome dev tool， 只有在非要调试其他浏览器才会使用其他dev tool 。 不过我们还是不得不面对不同的开发者工具，学习不同的debug 功能。 为什么这些不能集成到编辑器中呢？

延伸：

编辑器中直接debug， 需要编辑器能够和浏览器进行交互。大概是这样的：

编辑器: hi， chrome， 麻烦在cat.js 的 100 行打一个断点。

也就说编辑器要遵守浏览器的”约定“。 更多请参考：https://chromedevtools.github.io/devtools-protocol/

How

我使用的编辑器是VSCode， 推荐使用 debugger for chrome (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

使用方法很简单：

直接切换到debug选项卡，点击debug。 这时候新建一个.vscode/launch.json 文件.

只需要简单改下配置就可以了。

分享下我的vscode的 lauch.json配置

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}

有时候我们的项目中需要是用代理。比如我的项目，静态资源请求本地，后台接口请求mock 或者 test 或者其他后端的服务。这时候就不可以通过浏览器代理了，因为debugger for chrome 会新开一个完全干净的浏览器，不会有你普通chrome 安装的插件（当然不是没有办法让他有你本地chrome安装的插件）。 我的方式是使用nginx。

目前该工具实现的只是script 部分的协议，也就说network啦， resource ， element等都是不支持的。可能后期会支持？

这是我的nginx配置：

server {
listen       80;
server_name  localhost;

#charset koi8-r;

#access_log  logs/host.access.log  main;

location / {
proxy_pass http://127.0.0.1:8989; }
}

其他的支持chrome devtool protocol 的如下：

Sublime Web Inspector - Debug Javascript right in the Sublime Text editor

WebStorm & JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.