前言
前端开发过程中总会遇到的重大bug情况，这是我这些年总结的希望对大家有所帮助，啊不对是一定要收藏这太关键了，关键时刻能保命
背景
在项目上线后出现严重的 bug,我们需要第一时间利用线上的环境,复现 bug,并且定位 bug的代码,在修复 bug后,做打包上线操作,并且最好尽快控制或者通知所有客户端更新程序
关键步骤
1.定位 bug
部署上线的代码,通常都是打包之后的代码,都是经过压缩处理过的,这样的代码如何进行调试定位 bug?通常有 2 种方式
- 第 1 种,通过 source map 还原线上压缩之后的代码
- 第 2 种,用本地的跟线上同版本的代码代理到线上的接口地址
方式 1-通过 source map
在vue-cli创建的项目当中,通过npm run build生成的文件夹dist当中,有一类文件以.map结尾,例如图
疑问-什么是 source map?
简而言之,Source map 就是一个信息文件，里面储存着压缩文件位置信息。也就是说，压缩的代码的每一个位置，所对应的压缩前的位置,具体的内容可以查看JavaScript Source Map 详解这篇文章
测试-通过source map调试代码
示例代码仓库
链接
步骤
- 步骤 1-执行程序
- 在仓库文件夹04_部署项目toutiao-m-server里面执行命令node app
- 步骤 2-通过chrome浏览器,打断点调试代码
存在的问题
这种方式调试代码不推荐,因为通过打断点,在chrome浏览器中点击下一步,代码会莫名其妙跳转到不该去的地方,让调试无法正常进行
方式 2-通过服务器代理
可通过跟线上版本一样的开发环境的代码,通过服务器代理的方式,访问线上的接口的方式来定义出错的代码,这里需要多vue.config.js进行配置,例子:
module.exports = {
devServer: {
proxy: {
// 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
'/api': {
target: 'http://api-toutiao-web.itheima.net/app/', // 跨域请求线上的地址
changeOrigin: true // 只有这个值为true的情况下 才表示开启跨域
}
}
}
}
2.更新程序
定位到bug之后,除了修改完和打包好代码,并把代码部署线上,最好能主动通知客户端页面,刷新页面,这样能及时的堵上程序的漏洞,防止给公司带来损失
为了实现这种业务场景,需要在代码实现后端主动通知前端页面做刷新处理,具体的方式如下:
方式1-通过 websocket 刷新客户端
websocket是h5中新增的对象,它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应,具体的内容可以查看mdn上websocket的介绍
示例代码仓库
链接
前端客户端代码
在dist/index.html中,显示内容和通过websocket连接到服务端
// 创建对象和连接到服务器
const socket = new WebSocket('ws://localhost:3000')
socket.onopen = function (event) {
console.log('连接到服务器')
}
// 服务器通知客户端刷新页面
socket.onmessage = function (event) {
console.log('接收到服务器的消息', event.data);
let data = JSON.parse(event.data)
if (data.reload) {
// 刷新页面
location.reload()
}
}
前端管理端代码
在dist/admin.html中,点击按钮发送请求给服务器端,刷新所用在线客户端的页面
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
<body>
<button id="btn">刷新所有客户端</button>
</body>
<script>
document.querySelector('#btn').onclick = function () {
// 发请求,刷新所有客户端
axios.get('http://localhost:3000/reload')
}
</script>
服务器端代码
app.js 后端程序代码,负责部署前端程序和提供websocket的服务器端的支持
var express = require('express');
var path = require('path');
var app = express();
var expressWs = require('express-ws')(app);
// 指定静态文件托管
app.use(express.static(path.join(__dirname, './dist')))
// 对http协议请求做处理
// 处理刷新请求
app.get('/reload', function(req, res, next){
// 得到所有的客户端
let clients = expressWs.getWss().clients
clients.forEach(t=>{
let msg = JSON.stringify({reload: true})
// 通知所有的客户端刷新页面
t.send(msg)
})
res.send({status: 200, message: '刷新成功'});
});
// 对ws协议请求做处理
app.ws('/', function(ws, req) {
ws.on('message', function(msg) {
console.log('接收到客户端的消息', msg)
});
console.log('连接到客户端');
});
app.listen(3000);
方式2-通过socket.io刷新客户端
socket.io是第三方包对websocket的封装,方便websocket的使用,更多的内容查看socket.io的官网
示例代码仓库
连接
前端客户端代码
在dist/index.html中,显示内容和通过socket.io连接到服务端
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.4.0/socket.io.min.js"></script>
<script>
// 创建对象和连接到服务器
const socket = io("ws://localhost:3000");
socket.on("connect", () => {
console.log('连接到服务器')
});
// 服务器通知客户端刷新页面
socket.on("message", data => {
console.log('接收到服务器的消息', event.data);
if (data.reload) {
// 刷新页面
location.reload()
}
});
</script>
前端管理端代码
在dist/admin.html中,点击按钮发送请求给服务器端,刷新所用在线客户端的页面
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
<body>
<button id="btn">刷新所有客户端</button>
</body>
<script>
document.querySelector('#btn').onclick = function () {
// 发请求,刷新所有客户端
axios.get('http://localhost:3000/reload')
}
</script>
服务器端代码
app.js 后端程序代码,负责部署前端程序和提供websocket的服务器端的支持
var express = require("express");
var path = require('path')
var { createServer } = require("http");
var { Server } = require("socket.io");
var app = express();
var httpServer = createServer(app);
var io = new Server(httpServer, {
// 跨域的配置
cors: {
origin: "*",
methods: ["GET", "POST"]
}
});
// 指定静态文件托管
app.use(express.static(path.join(__dirname, './dist')))
// 对http协议请求做处理
// 处理刷新请求
app.get('/reload', function(req, res, next){
// 通知所有的客户端刷新页面
io.emit('message', {reload: true});
res.send({status: 200, message: '刷新成功'});
});
// 对ws协议请求做处理
io.on("connection", (socket) => {
socket.on('message', function(msg) {
console.log('接收到客户端的消息', msg)
});
console.log('连接到客户端');
});
// 监听3000端口,运行程序
httpServer.listen(3000);
