vConsole
简介：
腾讯开发的轻量、可扩展的前端开发者调试面板，专门针对移动端网页设计，能解决在手机上无法直接查看console.log输出的问题。
功能
日志查看：
支持console.log、console.info、console.error等日志输出。
网络监控：
可查看xmlhttprequest、fetch、sendbeacon的请求和响应详情。
节点查看：
能查看 HTML 节点树
存储管理：
方便管理cookies、localStorage、sessionStorage
命令执行：
可手动执行 JS 命令行，类似 Chrome DevTools 的 Console 面板。
插件扩展：
支持自定义插件来扩展功能。
安装与使用
①npm 安装：
npm install vconsole
在项目中引入并初始化：
import VConsole from 'vconsole';
const vConsole = new VConsole();
②CDN 引入：
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"> </script>
<script>var vConsole = new window.VConsole();</script>
eruda
简介：
专为手机网页前端设计的调试面板，类似 DevTools 的迷你版。
功能
Console 面板：
捕获多种类型的 Console 日志，支持占位符、按日志类型及正则表达式过滤等，还支持快捷命令加载underscore、jQuery库和 JavaScript 脚本执行。
Elements 面板：
可查看标签内容及属性、应用在 Dom 上的样式，支持页面元素高亮、屏幕直接点击选取以及查看 Dom 上绑定的各类事件。
Network 面板：
能捕获请求，查看发送数据、返回头、返回内容等信息。
Resources 面板：
可以查看并清除localStorage、sessionStorage及cookie，查看页面加载脚本、样式文件和图片。
Sources 面板：
用于查看页面源码，格式化html、css、js代码及json数据。
Info 面板：
输出URL及User Agent，支持自定义输出内容。
Snippets 面板：
可给页面元素添加边框、加时间戳刷新页面，支持自定义代码片段。
安装与使用：
①npm 安装：
npm install eruda --save
在页面中加载脚本：
<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>
②CDN 引入：
<script src="//cdn.jsdelivr.net/eruda/1.2.2/eruda.min.js"></script>
<script>eruda.init();</script>
weinre
简介：
一款网页检查工具，可通过在本地启动服务，并向手机网页嵌入一段 js 脚本来实现和电脑的通信，达到类似浏览器开发工具的调试效果。
功能：
主要包括查看DOM、Console、Network等，可在电脑上操作对手机网页进行调试，微信 web 开发者工具的移动调试也借助于此。
安装与使用：
通常需要先在本地安装 weinre 工具，启动服务后，将生成的特定 js 脚本嵌入到手机网页中，然后在电脑浏览器中访问对应的调试地址进行调试。具体步骤可参考相关官方文档或教程。
BrowserStack
简介：
是一个在线的跨浏览器测试平台，提供了大量不同型号、系统版本的手机设备环境，可在这些虚拟设备上测试网页，查看页面在不同设备上的显示效果和交互情况。
功能：
支持在多种真实手机设备和浏览器组合中进行测试，能实时调试，可查看页面布局、样式渲染、脚本执行等情况，还能进行截图、录制操作视频等，方便记录和分析问题。
使用方式：
通过注册登录其官网，选择所需的手机设备和浏览器环境，上传网页或输入网页链接，即可开始在虚拟设备上进行调试和测试。
🌟 关于我 🌟
你好呀，感谢一直陪伴在这里的你！我是程序媛‘小帅哥’。在这里，我致力于分享前端领域的知识点，希望能为你的工作与生活带来一丝灵感与帮助。
💼 服务承接 💼
如果你也喜欢我的内容，或者正在寻找前端或者后端方面的帮助，那么请不要犹豫，联系我吧！我都愿意倾听你的想法，共同探索更多可能。
欢迎关注微信公众号：自学PS转前端
