點擊上方“秋風的筆記”關注我們
本教程共三篇。
1.急速 debug 實戰一 （瀏覽器 - 基礎篇）
2.急速 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 的功能。這個功能對於我們線上調試有着極大的幫助
打開: http://yifenghua.win/example/debugger/demo3.html
通過按
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
打開: http://yifenghua.win/example/debugger/demo4.html
打開 devTools 的 netWork 查看 js 路徑。 http://yifenghua.win/example/debugger/demo3.js
打開我們的 charles （嗯，如何配置和使用我不進行講解，自行百度和 Google 吧）
點擊 Tools 中的 Map Local 進行配置 。
Add 一個規則
將剛纔 netWork 中的 url 映射到本地地址（即剛纔我們 clone 項目的位置），如圖所示
對我們本地內容進行改動。改成如下所示
const card = document.querySelector('.card-link');
card.onclick = function() {
card.text = '你好';
}
再次打開我們的頁面 http://yifenghua.win/example/debugger/demo4.html
查看 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
現在打開 http://yifenghua.win/example/debugger/demo4.html
點擊 Card link，發現報錯。
點擊 index.js ，可以看到我們的能直接定位到源碼啦。
總結
有了以上三種方式調試線上代碼。應該說可以定位到絕大多數數問題了。如果大家有什麼更好的方式可以留言，一起學習下,嗯，真香。 (溜了溜了
更多請關注
友情鏈接： https://huayifeng.top/
長按二維碼，可以關注我喲
萬水千山總是情，點個小贊行不行