大厂技术 高级前端 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;此时在我们将编译生产环境的产物部署后点击按钮会发现控制台报如下错误：
这样的一段信息很难帮助我们去定位问题，此时我们就可以通过右键添加源代码映射（Add source map）
然后将本地的sourcemap地址填写并添加
回到控制台查看错误信息就会发现已经能够展示具体的文件，点击也能查看编译前的错误代码了
Select选项样式调试
正常情况下如果我们想调试Select组件的选项样式，当我们右键选择检查后会发现Select会自动收起，非常麻烦
这时就可以通过选择devtools里的更多工具-渲染-勾选模拟所聚焦的网页
这时你再在Select选项右键选择检查后就不会再收起选项，可以随意调试样式了
Hover样式调试
针对一些hover场景的样式进行调试，以Tooltips组件为例，需要注意的是关于这一块的调试方法还和你所使用的框架相关，这里分别介绍下Vue的Element UI和React的Ant Ddesign的调试区别
Element UI
将元素定位到对应的按钮，并移除按钮上绑定的mouseleave事件监听
然后再将元素定位到tooltip组件，然后就可以修改其样式了
Ant Design
antd的组件无法通过移除事件监听器的方式去调试，简单来说是因为React的事件委托机制会将所有事件都挂在根节点上，从下图也可以看出来所有的事件都挂载在#react-content下
这时我们可以通过快捷键开启断点来进行调试
先鼠标悬浮在文本上，然后按下command + (windows 下按F8) 开启断点
然后切回样式元素面板就可以调试样式了
结语
除了上述介绍的几种方法外，Charles和Chrome的开发者工具还有很多实用的小功能，比如重发请求、性能检测等等，感兴趣的同学可以自行翻阅相关介绍文章
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍
3065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
