大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

前言

在日常工作中，我们难免会碰到各式各样的线上问题，而有些问题可能因为不同环境下的数据、构建产物不同等原因导致在本地或者测试环境不易复现，如果公司内没有比较完善的线上错误监控和日志分析平台，不妨尝试下以下的调试方法，也许就能帮助你解决线上的“疑难杂症”

移动端调试

移动端很多问题需要在真机上复现，通常情况下可以借助 Charles 或 Whistle 来辅助我们实现移动端页面的生产环境问题调试，这里我们以Charles为例列举几个调试方法（如何使用Charles代理就不在这里介绍了，如果没使用过的可以查阅相关教程），看看如何让哪些开发时没有发现的问题原形毕露

Rewrite

VConsole可以帮助我们调试一些简单的问题，但大部分时候我们只会在本地或者测试环境开启，那有没有办法在生产环境使用VConsole呢，答案自然是有的，我们只需借助Charles的 Rewrite功能对我们需要访问的页面html资源进行重写，在head插入VConsole脚本即可实现。

打开Charles-Tools-Rewrite

在Location处添加你需要重写的页面地址，我这里以百度为例

然后最主要的就是右下角的Rewrite 规则设置，简单点来说就是对返回的Response内容进行替换，将<head>替换为<head><script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script><script>var vConsole = new VConsole();</script> ，即在head标签内插入vconsole的js脚本

保存后用连接了代理的手机设备打开百度的页面就会发现右下角多了一个VConsole的组件，然后就可以开始愉快的调试了！

你也可以利用这个能力去做其他的事情，比如修改请求头信息、修改请求地址参数、修改返回数据等等，根据自己的诉求去使用所需要的能力

Map Remote

顾名思义，Map Remote就是将一个链接A 转发到链接B，一般用于多页面业务功能跳转链路之间的某个页面的问题排查（特别是App或小程序等容器内的原生页面和webview页面之间的跳转）

同样这里以baidu为例，当访问百度的时候将请求重定向到本地服务

手机访问百度可以看到成功转发到了本地页面

Map Local

Map Local 和 Map Remote 类似，不同点在于一个是转发到另一个远程链接（或本地服务），而Map Local是用本地文件替换请求的资源文件，一般用于排查某个文件引起的问题，由于配置方式和上述的Map Remote类似，就不再重复介绍了

Devtools调试

手动添加Source Map

我们的前端应用在生产环境不会上传source map，这时如果有异常错误，我们很难通过混淆压缩过后的代码排查真实报错原因，这时就可以通过手动添加Source Map 来帮助我们进行问题排查。

假如我们有以下一段代码，我们在点击按钮的时候主动抛出一个错误：

import logo from './logo.svg';
import './App.css';

function App() {
  const handleClick = () => {
    throw new Error('error test');
  };
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={handleClick}>test</button>
      </header>
    </div>
  );
}

export default App;