前言在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。谷歌浏览器手机模式调试优点：方便，常用确定：无法完全模拟真机，无法发现真机上的一些问题调试方法与我们正常的网页调试几乎一模一样，但是你需要打开调试窗口左上角的移动端模式，另外在页面的上方可以选择对应的机型，通过不同大小的机型来测试网页布局等是否合理。另外在移动端的设计稿中长宽经常是375、667也就是我们的i
vConsole是框架无关的，可以在Vue、React或其他任何框架中使用，今天通过本文给大家介绍移动端调试神器vConsole使用，感兴趣的朋友一起看看吧介绍平时在web应用开发过程中，我们可以console.log去输出一些信息或者看接口返回的信息及接口性能等情况，但是在移动端，也就是在手机上，我们是看不到的。这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。那么，如果将console.log应用到移动端呢？需要借助第三方插件：vConsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole
一、介绍：在项目的开发过程中，pc端可以通过F12查看打印日志，但是在移动端，我们是看不到的，当然也可以通过alert来弹出，但这种方法很不便利，于是Vconsole便应运而生。Vconsole是专门为移动端前端设计的调试面板，当然pc端也可以使用；Vconsole的使用和我们在pc端使用F12一样方便。二、应用场景：移动端项目企业微信等无法使用F12的平台三、使用方法：1.安装Vconsole工具npminstallvconsole2.在main.js中引入并使用importVconsolefrom'vconsole';constvConsole=newVconsole()Vue.use(v
在日常业务中我相信大家多多少少都有移动端的项目，移动端的项目需要真机调试的很多东西看不到调试起来也比较麻烦，今天给大家分享一个我认为比较好用的调试第三方库VConsole，有了这个库咱们就在手机上看控制台了，VConsole有两种引用方式，使用方法也很简单方法一：在public目录下index.html文件中引入vconsole.min.jsscriptsrc="https://unpkg.com/vconsole@latest/dist/vconsole.min.js">script>再到需要查看控制台的页面的created中使用new vConsole实例created(){varvCon
这个微信小程序太奇怪了，做了一点小改动要上线，在本地连接真机调试好好的，上到体验环境手机打开就不行了。而且奇怪，体验版打开调试后又正常了，加载页面的时候报了一个错"(inpromise)MiniProgramError\nInvalidattempttospreadnon-iterableinstance.\nInordertobeiterable,non-arrayobjectsmusthavea[Symbol.iterator]()method.\nTypeError:Invalidattempttospreadnon-iterableinstance.\nInordertobeitera
大家好，我是程序视点的小二哥!今天小二哥碰到一新来的实习生在使用alert调试H5页面，仿佛看到小二哥年少时羞涩的样子...趁这个机会，就给大家分享一个针对手机网页的前端开发者调试面板工具：vConsole简介vConsole是框架无关的，可以在Vue、React或其他任何框架中使用。现在vConsole是微信小程序的官方调试工具。功能特性查看日志(Logs)：console.log|info|error|...查看网络请求(Network)：请求、响应的详情查看节点结构(Element)：HTML节点树管理存储(Storage)：添加、编辑、删除、复制Cookies/LocalStorage
需求背景使用uni-app开发h5应用有时需要排查线上发生的问题。npm安装好vconsole后：npminstallvconsole会在H5页面上一直显示VConsole的开关，关闭需要注掉代码后重新打包发布，比较繁琐且不够灵活。解决方案方法比较简单，就是增加一个参数例如debug来控制调试面板的初始化，接收并在本地缓存参数动态控制调试模式的启停用，缺省时默认不开启。App.vue文件中增加引用：importvconsolefrom'vconsole';程序启动回调函数onLaunch中增加判断：onLaunch:function(e){ if(e.query.debug){ if(e.q
需求背景使用uni-app开发h5应用有时需要排查线上发生的问题。npm安装好vconsole后：npminstallvconsole会在H5页面上一直显示VConsole的开关，关闭需要注掉代码后重新打包发布，比较繁琐且不够灵活。解决方案方法比较简单，就是增加一个参数例如debug来控制调试面板的初始化，接收并在本地缓存参数动态控制调试模式的启停用，缺省时默认不开启。App.vue文件中增加引用：importvconsolefrom'vconsole';程序启动回调函数onLaunch中增加判断：onLaunch:function(e){ if(e.query.debug){ if(e.q
