why and how to debug without browser

最新推荐文章于 2024-10-06 15:34:54 发布

weixin_33794672

最新推荐文章于 2024-10-06 15:34:54 发布

阅读量92

点赞数

文章标签：开发工具运维 javascript ViewUI

原文链接：https://my.oschina.net/wanjubang/blog/1490739

版权

2019独角兽企业重金招聘Python工程师标准>>>

大家如果对调试不熟悉的话建议先看一下科普文章再来看，会有不一样的感受哦。比如这个：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.

转载于:https://my.oschina.net/wanjubang/blog/1490739