急速 debug 實戰二（瀏覽器 - 除錯線上篇）
3. 急速 debug 實戰三 （Node - webpack外掛,babel外掛,vue原始碼篇）
通過前一篇的介紹，我們已經懂得基本的 debug 技巧，那麼我們如何快速除錯一些線上的問題呢。本文將線上的除錯分為以下三種：（當然有更好的除錯方式，可以在評論區提出）
- 線上即時修改 ；針對一些樣式以及一些 js 已經知道問題所在快速地修改以達到解決 bug 的模式。
- 代理到原生代碼 ; 這種情況可以解決線上程式碼與本地不一致，也可以非常方便地在原始碼插入程式碼立即除錯
- 線上不存在 sourceMap 啟用本地sourceMap ; 有時候一些問題乍一眼看不出是什麼問題，但是線上又不提供 sourceMap 所以我們可以啟動本地的 sourceMap 來幫助我們定位問題。
所以示例在以下環境通過。
作業系統: MacOS 10.13.4
Chrome: 版本 72.0.3626.81（正式版本） （64 位）
線上即時修改
開啟功能
在除錯線上問題的時候，我們會遇到這樣的問題，例如: 我需要在頁面上直接修改樣式快速地定位問題，可能是某些樣式不相容，導致渲染不成功。但是每當我們再 devTools 上修改完，我們想重新重新整理頁面。這個時候我們修改的東西都不見了。下面我介紹的這個功能就是能夠讓我們更好地除錯線上問題，並且保持狀態。
chrome devTools 有一個名叫 Overrides 的功能。這個功能對於我們線上除錯有著極大的幫助
- 開啟: yifenghua.win/example/deb…
- 通過按
Command+Option+I (Mac)或Control+Shift+I（Windows、Linux），開啟 DevTools。 此快捷方式可開啟 Console 面板。 - 點選 source 按鈕
-
點選箭頭所示按鈕，找到 Overrides, 選中。
-
點選 Select folders for Overrides。選擇一個本地的空資料夾目錄。
-
跳出授權，點選允許
開始
這是我們剛才的頁面
假設我們設計稿需要我們將背景色改成紅色，並且字型大小改成22px。我們來進行修改。修改完成後重新整理頁面。開啟後發現是這樣的。
繼續點選 source 標籤。點選 Page 按鈕。
開啟我們demo3.html，將head中的 title 改成 debug03，並且儲存（mac: command + s， windows: ctrl + s）。
再次重新整理頁面，發現我們的頁面 title 已經成功被修改了。
最後，我們點選 source Page 中的 demo3.js。將 card.text = '123'; 修改成 card.text = 'hello'; ，繼續儲存。
好了。我們已經完成了我們所有的修改了。
可以發現我們所有的檔案下面都有一個小藍點。這個就是修改後的檔案儲存在一開始選擇的資料夾中。
檢視 diff
那麼如何檢視我們之前修改了哪些內容呢？
繼續開啟 devTools ，點選右上角的三個小點 -> More tools -> Changes
可以看到我們剛才的所有修改啦。
到此我們已經完成了 Overrides 除錯線上的方法了。
代理到原生代碼
首先需要下載 charles 其他的代理工具也可以，只要能將請求代理到本地的工具都可以，這裡我就用我熟悉的 charles 展示。 那麼這種方式主要能除錯線上的什麼問題呢？
- 快速確認本地版本與線上是否一致。如果本地檔案沒有問題，線上有問題，那麼重新打包一次即可。（如果有版本號請忽略）
- 除錯程式碼。
除錯程式碼
下面來演示一下，如何除錯線上的程式碼。
假設以上是我們本地的專案。所以為了演示，你需要做以下幾個步驟。
git clone https://github.com/hua1995116/debug.git cd debug cd charles-debug npm install npx webpack --watch --progress (npm >= v5.2.0) 複製程式碼
然後在我們的 dist 目錄下會生成我們打包後的 js
-
開啟 devTools 的 netWork 檢視 js 路徑。 yifenghua.win/example/deb…
-
開啟我們的 charles （嗯，如何配置和使用我不進行講解，自行百度和 Google 吧）
-
點選 Tools 中的 Map Local 進行配置 。
- Add 一個規則
- 將剛才 netWork 中的 url 對映到本地地址（即剛才我們 clone 專案的位置），如圖所示
- 對我們本地內容進行改動。改成如下所示
const card = document.querySelector('.card-link');
card.onclick = function() {
card.text = '你好';
}
複製程式碼
-
再次開啟我們的頁面 yifenghua.win/example/deb…
-
檢視 charles 日誌
可以看到已經成功將檔案對映到本地。這樣，我們就可以實時地除錯我們的線上的檔案啦。你可以插入各種標誌點以及 debugger。
線上不存在 sourceMap 啟用本地sourceMap
嗯，除此之外，我們還可以通過 charles 新增 sourceMap。
修改我們剛才 clone 的專案，修改 webpack.config.js 和 index.js
webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename:'demo3.js'
},
devtool: 'source-map',
};
複製程式碼
index.js
const card = document.querySelector('.card-link');
card.onclick = function() {
console.log(ss);
card.text = '你好';
}
複製程式碼
執行
npx webpack --watch --progress 複製程式碼
給 charles 再增加一個 Map Local
現在開啟 yifenghua.win/example/deb…
點選 Card link，發現報錯。
點選 index.js ，可以看到我們的能直接定位到原始碼啦。
