聊聊除錯的事兒（二）

阿新 • • 發佈：2020-10-23

一直以來，都有一個梗：找男朋友就要找程式設計師，因為他很擅長思考自己錯在哪裡，當他惹你生氣時，便會很自然地思考自己錯在哪裡。開個小小的玩笑。實際上，找錯、定位問題是程式設計師非常重要的能力之一，它關係到你定位問題、修改問題的進度和效率。所以繼很久之前的聊聊除錯的事兒（一），來聊聊聊聊除錯的事兒（二）。

真機除錯

在手機跟開發電腦統一網路情況下，手機通過電腦的ip+埠+路由是可以訪問電腦本地起的熱更新服務

檢視ip
```
//mac
ifconfig

// windows
ipconfig
```
- 在手機瀏覽器輸入類似於10.99.1.58:8080/xxxx/，或者是使用本公司軟體中掃碼開啟web-view，愉快地做除錯。

vConsole

vConsole，騰訊開源的手機端除錯工具，用於列印、檢視h5的控制檯情況

引入vConsole

// 在html中加入,至於為什麼不用npm安裝vSconsole,是因為之前試過npm安裝，但是import進程式碼裡，使用不了
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

使用正則匹配你要使用vConsole的場景，正式路由避免你寫的正則，就一定不會出現vConsole，
- 好處：隨時可以通過加入符合正則的引數，來顯示vConsole，並且可控地避開正式環境
- 壞處：如果未知規則，則有可能出現vConsole

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

Sentry 大法好

起因：今天旁邊的同事，有個bug是我之前寫的彈窗元件在按鈕點選之後沒有反應，所以我就幫忙也定位一下問題。

經過：因為我的這個彈窗元件在別的頁面也使用到了，沒什麼問題，所以直覺是他的某行程式碼報錯了，導致阻塞到後面彈窗元件js執行了。但是很奇怪的是瀏覽器控制檯沒有報錯。

我在點選事件應該進入的地方寫了debugger，也確實是執行到了。後面又想起，這幾天剛在另一個專案重構中使用Sentry來定位手機端vConsole未能定位的報錯。所以馬上在裡面加一個

安裝sentry相關依賴

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

程式碼裡初始化

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

Sentry.init({
  dsn: 'https://[email protected]/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 ： '隊伍名稱'
```
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的屬性只是宣告未初始化值而已
```
  1. 為什麼控制檯沒打印出錯誤，因為出錯在template的運算中，而不是script中的js，而且也不是template中的data未定義這種情況，所以控制檯是不會報錯的。