急速 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/