聊聊调试的事儿（二）-Js中文网

一直以来，都有一个梗：找男朋友就要找程序员，因为他很擅长思考自己错在哪里，当他惹你生气时，便会很自然地思考自己错在哪里。开个小小的玩笑。实际上，找错、定位问题是程序员非常重要的能力之一，它关系到你定位问题、修改问题的进度和效率。所以继很久之前的聊聊调试的事儿（一），来聊聊调试的事儿（二）。

真机调试

在手机跟开发电脑统一网络情况下，手机通过电脑的ip+端口+路由是可以访问电脑本地起的热更新服务

查看ip

 bash
    //mac
    ifconfig

    // windows
    ipconfig

![截屏2020-10-22 下午10.24.05](https://static.javascriptc.com/imgs/tools/20201115/tool-0932a03e80932a03e.jpeg)
+   在手机浏览器输入类似于10.99.1.58:8080/xxxx/，或者是使用本公司软件中扫码打开web-view，愉快地做调试。

vConsole

vConsole，腾讯开源的手机端调试工具，用于打印、查看h5的控制台情况

引入vConsole

 bash
// 在html中加入,至于为什么不用npm安装vSconsole,是因为之前试过npm安装，但是import进代码里，使用不了
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

使用正则匹配你要使用vConsole的场景，正式路由避免你写的正则，就一定不会出现vConsole，
- 好处：随时可以通过加入符合正则的参数，来显示vConsole，并且可控地避开正式环境
- 坏处：如果未知规则，则有可能出现vConsole

 js
if (/test/.test(window.location.href)) {
  // @ts-ignore
  var vConsole = new VConsole();
}

Sentry 大法好

起因：今天旁边的同事，有个bug是我之前写的弹窗组件在按钮点击之后没有反应，所以我就帮忙也定位一下问题。

经过：因为我的这个弹窗组件在别的页面也使用到了，没什么问题，所以直觉是他的某行代码报错了，导致阻塞到后面弹窗组件js执行了。但是很奇怪的是浏览器控制台没有报错。

我在点击事件应该进入的地方写了debugger，也确实是执行到了。后面又想起，这几天刚在另一个项目重构中使用Sentry来定位手机端vConsole未能定位的报错。所以马上在里面加一个

安装sentry相关依赖

Js中文网 – 全球前端挚爱的技术成长平台 www.javascriptC.com
Javascript中文网是以前端进阶资源教程分享为主的专业网站，包括：前端教程、JavaScript资讯、大厂面试题、typescript教程、程序人生、React.js源码解读、Vue3.js技术揭秘等，以帮助开发者成长为愿景的社区

 bash
npm i @sentry/browser @sentry/integrations -S

代码里初始化

 js
// src/index.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations'

Sentry.init({
  dsn: 'https://1526b9f30b46428eabe39fbb05e93219@o460252.ingest.sentry.io/5468986',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

点击按钮，在sentry后台发现以下的报错

聊聊调试的事儿（二）

回到代码里查看，
- vue中，
  1. {{competition.teamTitle || '队伍名称'}}，初始化data中，competition：[]
  2. 请求接口后得到data.data有赋值给了competition，导致competition=null
  3. 回到1， {{competition.teamTitle || '队伍名称'}} 相当于competition.teamTitle ？competition.teamTitle ： '队伍名称'

 js
        var a = null
        a.b //VM275:1 Uncaught TypeError: Cannot read property 'b' of null at <anonymous>:1:3
        var b = {}
        b.b // undefined
        b.b = 2 //声明并初始化
        实际上a是一个空指针对象，仅仅是占位符，还没有分配内存空间，那么a固然不会存在有b等任何属性。
        b则声明并初始化了，分配了内存空间，b的属性只是声明未初始化值而已

    ![截屏2020-10-22 下午10.02.32](https://static.javascriptc.com/imgs/tools/20201115/tool-cd9226ee8cd9226ee.jpeg)

    4.  为什么控制台没打印出错误，因为出错在template的运算中，而不是script中的js，而且也不是template中的data未定义这种情况，所以控制台是不会报错的。

结果：结合两篇提到的调试方法，写起代码，调试bug是真的香！

本文原文：聊聊调试的事儿（二）