阿里云优惠活动，点击链接进行购买: 一年仅需96.9元即可以购买服务器~
腾讯云优惠活动, 点击链接进行购买一年仅需99元
腾讯云限时开团活动, 点击链接进行购买一年仅需95元
# 急速 debug 实战二（浏览器 - 调试线上篇）
本教程共三篇。
1.急速 debug 实战一 （浏览器 - 基础篇） (opens new window)
2.急速 debug 实战二 （浏览器 - 线上篇） (opens new window)
3.急速 debug 实战三 （Node - webpack 插件,babel 插件,vue 源码篇） (opens new window)
通过前一篇的介绍，我们已经懂得基本的 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://qiufeng.blue
