h5/wap端调试、移动端调试 / vconsole、eruda、spy-debugger

关于h5调试

一、vconsole,类似小程序的调试工具，可以在手机上看见打印，真机调试h5时，我们只能看alert,但有些内容无法alert,但vconsole能做到，就像谷歌的f12一样

用法，页面只需引入js和下面这句话就可以

vconsole.js下载地址 h5移动端调试工具vconsole/eruda_vconsole和eruda-互联网文档类资源-CSDN下载

<!-- <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script> -->
<script src="js/vconsole.min.js?"></script>
<script>var vConsole = new VConsole();console.log('Hello world');
</script>

vue项目里也可以用的

//vue里安装
npm install vconsole

//在main.js引入import Vconsole from 'vconsole';new Vconsole();

二、eruda（和vconsole 相似）

eruda.js下载地址 h5移动端调试工具vconsole/eruda_vconsole和eruda-互联网文档类资源-CSDN下载

<!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
<script src="js/eruda.js?"></script>
<script>eruda.init();</script>

调试效果如图，左边是eruda返回的，右边是浏览器返回的，是一样的，这样我们就可以很容的在真机上看打印值了

三、spy-debugger

spy-debugger和其他两个不太一样，这个是一个配合抓包的工具

安装：npm install spy-debugger -g

启动并指定端口号：spy-debugger -p 端口号（默认是9888）

手机安装证书，手机必须连上代理，

浏览器访问地址 http://spydebugger.com/cert

手机访问要调试的页面（h5、app里嵌套的h5、小程序里嵌套的h5都可以）

浏览器访问的页面地址链接就会显示在这

访问app里的h5页面链接上带的一些参数也可以看见

在浏览器选中页面的元素，真机上可以及时的显示

在浏览器上改变页面样式内容,app里的页面跟着一起变化

也可以直接抓包

h5/wap端调试、移动端调试 / vconsole、eruda、spy-debugger相关推荐

Vue CLI + VUE +vConsole/eruda 在移动端进行调试
Vue CLI + VUE +vConsole/eruda 在移动端进行调试 Vue CLI + VUE +vConsole/eruda 在移动端进行调试 eruda vConsole Vue CLI ...
html 移动端（手机）调试 vconsole
html 移动端(手机)调试视频 https://www.bilibili.com/video/BV1eE411h74L?from=search&seid=12589203754688673 ...
适用于Android端调试必备神器：vConsole插件
总览一.代码块二.效果图三.拓展四.其他使用场景: 1)在我们开发app时,pc端开发时候好好的,到手机端却不起作用: 2)手机端APP不能调试,那该怎么办?于是就需要手机端调试工具: 3) ...
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明（Eruda、vConsole）
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vConsole) 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vCons ...
微信公众h5页面如何在pc端调试
方法一:使用微信开发者工具方法二: 1.正常访问会提示请在微信上打开 2.我们可以用一些抓包工具(Charles等),抓微信端(移动端微信/pc端微信都可以)访问该页面时携带的cookie信息 3. ...
使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 传送门转载于:https://www.cnblogs.com/momozjm/p/9389912.html
【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )
文章目录一.移动端浏览器二.移动端屏幕分辨率三.移动端网页调试方法一.移动端浏览器移动端浏览器比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 ...
java毕业设计摄影服务管理系统服务端mybatis+源码+调试部署+系统+数据库+lw
java毕业设计摄影服务管理系统服务端mybatis+源码+调试部署+系统+数据库+lw java毕业设计摄影服务管理系统服务端mybatis+源码+调试部署+系统+数据库+lw 本源码技术栈: 项目 ...
移动端html网页真机调试,Mac端调试iphone移动端网页
0.前言今天写好了一个页面,在mac上跑的好好的,结果手机打开直接白屏了.打开chrome的移动端模拟,但是模拟上也是好的,所以就只能开启真机调试了. 1.配置在iOS设备上打开允许调试:设置→S ...
使用Android模拟机开发调试移动端页面
使用真机调试可以还原bug场景,但由于真机上不方便输出调试信息,不容易进行代码调试.这里可以通过在电脑上安装一个Android模拟器,然后结合Chrome的devices远程设备功能,进行移动端页面的 ...