切換語言為:簡體
作為前端開發,如何除錯線上程式碼?

作為前端開發,如何除錯線上程式碼?

  • 爱糖宝
  • 2024-06-15
  • 2151
  • 0
  • 0

釋出以後,線上報錯了,咋辦?有沒有很恐慌?

每次上線都戰戰兢兢得生怕出錯,又得搞到凌晨一兩點,煩死了?這是不是你的現狀?作為一名資深程式設計師,我深知大家得不容易,所以今天奉上一本解決現場問題得法寶。具體如下:

(方法千變萬化,沒有最好,只有更好,如果大家有更好得辦法可以在評論區共同探討,共同成長,謝謝!)

上線以後,為什麼會出現問題?

問題來源有2種:

1.現場資料更加複雜,在uat測試階段,由於資料相對比較簡單,測試人員得臨界值設定得並不準確,導致bug沒有找出來。

2.前端程式碼有問題,在測試的時候沒有測試出來,釋出以後發現了。

解決辦法:

第一: 假設這就是後端資料問題,我們需要用一個chrome 外掛: Ajax-intercetion

下載:直接執行

git clone https://github.com/YGYOOO/ajax-interceptor.git

下載下來以後,直接拉進chrome的外掛裡面就好了,當然你也可以從chrome 的外掛商店裏麵直接下載,我的window10的chrome的外掛商店被攔截了,進不去,只能從倉庫裡面獲取。不管從哪裏獲取,拿到就好,無需較真。最後你可以得到如圖所示的標誌:

作為前端開發,如何除錯線上程式碼?

1.把需要攔截的介面地址輸入ajax-interceptor的 url 的設定裡面,然後重新整理頁面,觸發相關功能。

2.在chrome的devtool裡面的network裡面找到相關介面的資料,直接ctrl+A複製response

作為前端開發,如何除錯線上程式碼? 

3.把上面複製好的響應資料放到 ajax-interceptor 的 replace Response with 裡面,然後把你覺得異常資料找到,改成合理的資料,然後觸發相關功能,你修改後的資料就會展示到頁面上。此時就能斷定是不是資料問題了。

如果你不會用,沒有關係,我為大家找了一個說明影片,大家可以點進去看看:

weibo.com/tv/show/103…

4.經過我們一系列的騷操作,終於發現不是資料問題呀,有沒有想死的心都有了?

第二:現在斷定一定是程式碼的bug, 可是線上錯誤指向的是一個壓縮檔案呀,咋辦?

想解決個bug,咋就這麼難呢?心裏噴涌而出的草泥馬,算了,不抱怨了,爲了早點下班,還是老老實實想一下解決辦法,纔是正事,你說對不對!我也不兜圈子了看下面。

線上無法除錯的根本原因就是沒有 suorcemap 唄,說白了就是打包的時候我們配的是 hidden-source-map,而不是source-map,他們的區別是啥?

首先 hidden-source-map 和 source-map 在打包的時候都會產生一個 .map 檔案,而且他們處理後的檔案大體是一樣的,唯一的區別就是source-map處理後的檔案下面多了一行程式碼,如圖所示:

作為前端開發,如何除錯線上程式碼?

我做了個測試程式碼,一個用source-map打包,一個用hidden-source-map打包,結果如下

作為前端開發,如何除錯線上程式碼?

用http-server將他們同時啟動

作為前端開發,如何除錯線上程式碼?

作為前端開發,如何除錯線上程式碼?

作為前端開發,如何除錯線上程式碼? 

進入頁面看看

作為前端開發,如何除錯線上程式碼?

作為前端開發,如何除錯線上程式碼? 明顯他們的目錄訪問目錄不一樣,是不是?解決問題的根本就是把index.js和index.js.map用 //# sourceMappingURL=index.js.map關聯在一起,他們就能找到原始碼了,我們就可以歡樂的除錯它了,對不對?

方法1.利用chrome的 add  sourcemap 功能,如下:

作為前端開發,如何除錯線上程式碼?

設定add sourcemap的檔案的時候,你可以連本地的,反正是對應的.map檔案就好了,如果沒有出來,一定是你的地址不對,趕緊改路徑吧。

此時8081的頁面和8082的頁面就一摸一樣了,你是不是就可以開心的除錯了呢,一眼看過去就能知道,線上到底是哪一行在報錯。

方法2.手動對映

1.在專案裡面安裝source-map庫

npm i source-map -D

2.在專案裡面建立一個source.js檔案

作為前端開發,如何除錯線上程式碼?

只需要修改紅框的地方即可,操作如下:

作為前端開發,如何除錯線上程式碼?

const { SourceMapConsumer } = require('source-map')
const fs = require('fs')

const rawSourceMap = fs.readFileSync('./dist/index.js.map', 'utf-8')

// 填入錯誤資訊
originalPositionFor('index.js:1:161')

function originalPositionFor(errInfo) {
  const [budleName, line, column] = errInfo.split(':')

  SourceMapConsumer.with(rawSourceMap, null, (consumer) => {
    const originalPosition = consumer.originalPositionFor({
      line: parseInt(line),
      column: parseInt(column),
    })

    console.log('bundle name = ', budleName)
    console.log('original position = ', originalPosition)
  })
}


是不是很美麗呀!

方法3. 用Charles代理

其實代理的目的就是對原始檔進行攔截,然後在response的檔案裡面加上//# sourceMappingURL=index.js.map,此時的url你可以寫線上的map檔案,也可以指定本地檔案對應的.map檔案,也就是說,

可以這樣://# sourceMappingURL=index.js.map

  1. 也可以這樣://# sourceMappingURL=http://127.0.0.1/index.js.map

具體如下:

設定斷點地址

  作為前端開發,如何除錯線上程式碼?

2.如果此時Charles沒有工作,很可能是因為你chrome的代理外掛沒有關閉,關閉就可以正常工作了。

作為前端開發,如何除錯線上程式碼?

作為前端開發,如何除錯線上程式碼?

作為前端開發,如何除錯線上程式碼?

其實精髓就是要index.js和index.js.map連線起來,當然對面的大神們,你們肯定有更好的解決方法,不防在評論區說下,我來給大家補充全面,必經程式的發展本就靠的是大家的集思廣益,不是單打獨鬥!

謝謝!

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.