背景
前端h5在调试移动设备会非常麻烦，比如需要抓包啊、看日志啊、调试页面啊。 传统的方法是使用usb线将电脑与移动设备相连接后再定位问题，这样的操作非常操蛋。
chii的使用如下
作用
能让开发者不用连接usb线，就能在浏览器按了F12一样远程调试移动端页面。
安装
安装
npm install chii -g
启用
chii start -p 8080
要远程调试的前端项目的index.html注入如下代码
<script src="http://本地Ip:8080/target.js"></script>
注意：必须是192开头的自己局域网的ip，这样你的移动设备才能访问到页面。
举例 <script src="http://192.123.321.123:8080/target.js"></script>
开始调试
浏览器访问:http://localhost:8080/
手机访问要调试的前端项目：页面地址
pc端如图所示
点击进入之后，你就能像平常在pc页面上调试代码一样调试移动端的页面咯。
eruda使用如下
作用
移动端console.log日志打印与抓包
安装
# index.html
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
eruda.position({x:0,y:200})
</script>
使用
设置隐藏开关
在一定时间间隔内左下角点击区域超过15次就显示。
<!--eruda-->
<script async>
function handleCreateEruda(){
let script = document.createElement('script')
script.src = '//cdn.jsdelivr.net/npm/eruda'
document.getElementsByTagName('head')[0].appendChild(script)
script.onload = () => {
eruda.init()
eruda.position({ x: 0, y: 200 })
}
}
let eruda_preTime = 0
let eruda_count = 0
let eruda_isopen = false
let eruda_minWidth = 0
let eruda_maxWidth = window.innerWidth / 5
let eruda_minHeight = window.innerHeight - window.innerHeight / 10
let eruda_maxHeight = window.innerHeight
function eruda_is_inzone({clientX, clientY}) {
if (
clientX <= eruda_maxWidth &&
clientX >= eruda_minWidth &&
clientY <= eruda_maxHeight &&
clientY >= eruda_minHeight
) {
return true
} else {
return false
}
}
// 如果是本地或者测试环境就直接打开
if (location.hostname.includes('192') || location.hostname === 'testwww.xxx.mx') {
handleCreateEruda()
eruda_isopen = true
}
window.addEventListener('click',(data) => {
let currentTime = new Date().getTime()
if (eruda_isopen) {
return
}
if (eruda_is_inzone({clientX: data.clientX, clientY: data.clientY})) {
if (currentTime - eruda_preTime < 500) {
count++
} else {
count = 0
}
} else {
count = 0
}
eruda_preTime = currentTime
if (count >= 15) {
handleCreateEruda()
eruda_isopen = true
}
})
</script>
就可以快乐的看日志与抓包啦～
whistle
作用
抓包与请求代理，常用于大公司进行联调的时候, 它的工作原理就是app发出去的所有请求，都会经过whistle，whistle在根据配置的信息进行数据请求，然后再响应回去。
安装
启动
# 启动
w2 start
# 重启
w2 restart
# 停止
w2 stop
配置
配置host
# 当你网页访问www.google.com时，实际返回的相应是www.baidu.com内容。
www.google.com www.baidu.com
