急速 debug 實戰二（瀏覽器 - 調試線上篇）

1.急速 debug 實戰一 （瀏覽器 - 基礎篇）

2.急速 debug 實戰二 （瀏覽器 - 線上篇）

3.急速 debug 實戰三 （Node - webpack插件,babel插件,vue源碼篇）

經過前一篇的介紹，咱們已經懂得基本的 debug 技巧，那麼咱們如何快速調試一些線上的問題呢。本文將線上的調試分爲如下三種：（固然有更好的調試方式，能夠在評論區提出）

1. 線上即時修改；針對一些樣式以及一些 js 已經知道問題所在快速地修改以達到解決 bug 的模式。
2. 代理到本地代碼; 這種狀況能夠解決線上代碼與本地不一致，也能夠很是方便地在源碼插入代碼當即調試
3. 線上不存在 sourceMap 啓用本地sourceMap; 有時候一些問題乍一眼看不出是什麼問題，可是線上又不提供 sourceMap 因此咱們能夠啓動本地的 sourceMap 來幫助咱們定位問題。

注意，如下yifenghua.win域名下線，替換爲https://hua1995116.github.io/myblog/

因此示例在如下環境經過。

操做系統: MacOS 10.13.4

Chrome: 版本 72.0.3626.81（正式版本） （64 位）

線上即時修改

打開功能

在調試線上問題的時候，咱們會遇到這樣的問題，例如: 我須要在頁面上直接修改樣式快速地定位問題，多是某些樣式不兼容，致使渲染不成功。可是每當咱們再 devTools 上修改完，咱們想從新刷新頁面。這個時候咱們修改的東西都不見了。下面我介紹的這個功能就是可以讓咱們更好地調試線上問題，而且保持狀態。

chrome devTools 有一個名叫 Overrides 的功能。這個功能對於咱們線上調試有着極大的幫助

1. 打開: hua1995116.github.io/myblog/exam…
2. 經過按 Command+Option+I (Mac) 或 Control+Shift+I（Windows、Linux），打開 DevTools。 此快捷方式可打開 Console 面板。
3. 點擊 source 按鈕

4. 點擊箭頭所示按鈕，找到 Overrides, 選中。

5. 點擊 Select folders for Overrides。選擇一個本地的空文件夾目錄。

6. 跳出受權，點擊容許

   

開始

這是咱們剛纔的頁面

假設咱們設計稿須要咱們將背景色改爲紅色，而且字體大小改爲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 展現。 那麼這種方式主要能調試線上的什麼問題呢？

1. 快速確認本地版本與線上是否一致。若是本地文件沒有問題，線上有問題，那麼從新打包一次便可。（若是有版本號請忽略）
2. 調試代碼。

調試代碼

下面來演示一下，如何調試線上的代碼。

假設以上是咱們本地的項目。因此爲了演示，你須要作如下幾個步驟。

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

1. 打開: hua1995116.github.io/myblog/exam…

2. 打開 devTools 的 netWork 查看 js 路徑。 hua1995116.github.io/myblog/exam…

3. 打開咱們的 charles （嗯，如何配置和使用我不進行講解，自行百度和 Google 吧）

4. 點擊 Tools 中的 Map Local 進行配置 。

5. Add 一個規則

6. 將剛纔 netWork 中的 url 映射到本地地址（即剛纔咱們 clone 項目的位置），如圖所示

7. 對咱們本地內容進行改動。改爲以下所示

const card = document.querySelector('.card-link');
card.onclick = function() {
  card.text = '你好';
}
複製代碼

8. 再次打開咱們的頁面 hua1995116.github.io/myblog/exam…

9. 查看 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

如今打開 hua1995116.github.io/myblog/exam…

點擊 Card link，發現報錯。

點擊 index.js ，能夠看到咱們的能直接定位到源碼啦。

總結

有了以上三種方式調試線上代碼。應該說能夠定位到絕大多數數問題了。若是你們有什麼更好的方式能夠留言，一塊兒學習下,嗯，真香。 (溜了溜了

更多請關注

友情連接： huayifeng.top/