移动端调试
随着移动端的便捷越来越深入人心，移动端用户上网人数和上网时间已经突飞猛进，相信在5g的环境中，更多人会选择便捷的移动端进行浏览网页获取信息，然而对于开发人员来讲，移动端的调试工具便必不可少了（9102年了，你还在用alert作为移动端的调试工具的话，我只能说，我鄙视你）。许多的调试工具网上都已有众多教程，我这里就不再重复，有需要的朋友可自行百度，或者往下拉，我搜集了一些比较详细的教程供大家参考。
eruda
Eruda 是一个专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版。官方地址：https://github.com/liriliri/eruda
最简单的使用方式就是直接引入，有了下面两行代码，就可以享受eruda带给你的便利了，有兴趣的快去探索吧：
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
教程：
Eruda 一个被人遗忘的调试神器
web移动端调试神器Eruda
移动端调试神器（eruda）
vconsole
vConsole称得上是一款移动端调试神器。官方地址：https://github.com/Tencent/vConsole
使用方式：
npm install vconsole
// 在需要调试的文件种引进，或者全局引进
import VConsole from 'vconsole'
// 使用
var vConsole = new VConsole();
console.log('Hello world');
教程：
vConsole
移动端（微信等）调试console神器——vConsole
Chrome-浏览器调试移动端网页
chrome 是一个优秀的浏览器，我们在调试网页端的同时，实质也是可以调试手机端网页的，在chrome调试手机端网页，需要翻墙，它能读取到连接设备的打开的webview，然后显示在电脑上，此时在电脑上进行的操作会同步到手机上显示出来。当然，这种调试相对于上面两种插件来讲是复杂许多，毕竟，翻墙能难倒一大片人，但是不得不说，曾经我用这种方式还是帮我解决了许多问题的。
步骤：
- 手机开启调试模式连接电脑
- 手机打开你要调试的页面（APP内嵌的H5也没问题哦）
- 电脑chrome浏览器地址栏输入：chrome://inspect/#devices，回车
- 找到你准备调试的那个地址，然后点击inspect
- 请随心所欲，自由发挥
教程：
安卓：
Chrome-浏览器调试移动端网页 chrome://inspect/#devices
使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices
IOS：
移动端调试(ios手机safari+chrome调试(windows))
CSS
单行文本省略号显示
.ellipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
多行文本省略号显示
.multi-ellipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
&.three-line{
-webkit-line-clamp: 3; ////显示行数
}
}
清除浮动
.clearfix:after {
content:'.';
height:0;
display: block;
clear: both;
visibility: hidden;
}
删除图片默认的底部边框
.img {
vertical-align: bottom;
}
背景渐变色
.background {
// 可改变角度，渐变两端色值
background: linear-gradient(120deg, #FEC001 0%, #FE8701 100%);
}
文字渐变色
.text {
// 重点属性代码
background: linear-gradient(to bottom, #FFD700, #FFA702);
-webkit-background-clip: text;
color: transparent;
}
JS
移动端判断用户上滑下滑（左滑右滑同理）
let startY;
document.addEventListener('touchstart', ev => {
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend', ev => {
// 先排除用户点击上滑按钮，再根据用户滑动操作判断上滑下滑
if (ev.target.className !== 'slide-up') {
const endY = ev.changedTouches[0].pageY;
const dist = startY - endY;
switch (true) {
case dist < 0:
console.log('下滑');
break;
case dist > 0:
console.log('上滑');
break;
case dist === 0:
console.log('点了一下');
break;
}
}
}, false);
正则表达式集合
予人玫瑰，手有余香！如果本博的某篇文章帮助了你，并且让你觉得想要放到自己的博客上，欢迎转载，转载请注明出处。
为能够给自己带来价值的东西付费，是再正常不过的事情，物质支持【右侧打赏】和精神支持【评论、转载】都是我持续总结，持续分享的最大动力！
有兴趣的朋友可以关注我的公众号：非梧不栖oy，微信可直接搜索关注或是下方扫码关注，公众号会同步本站的部分博客，您可以直接在手机上随时阅读到自己感兴趣的文章
