赞
踩
之前经常用这种方法在手机上进行调试,打印错误日志。这次记录一下。
使用 vconsole.min.js,代码如下:
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加载中</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> // 在这里进行引入调试组件 <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> </head> <body> <div id="product"> </div> </body> <!-- 引入组件库 --> <script> // 初始化 引入的调试组件 var vConsole = new VConsole(); console.log('Hello world'); </script> </html>
调试画面:
或者直接安装
以vue项目为例
1、使用 npm 安装:
npm install vconsole
2.在main.js中引入一个js文件,并且实例化
import VConsole from 'vconsole/dist/vconsole.min.js'
let vConsole = new VConsole() // 初始化
vconsole调试工具,官方出的,但是只能解决安卓手机调试问题,在ios手机上我们只能在log里面看到代码里面console.log()的东西,但是去network看调用的接口,却看不到。
eruda 一个很好的移动端调试神器,没有ios相关的问题。
使用方式(vue项目):
let script = document.createElement('script')
// script.src = "//cdn.jsdelivr.net/npm/eruda"
script.src = "//cdn.bootcss.com/eruda/1.3.2/eruda.min.js"
document.getElementsByTagName('head')[0].appendChild(script)
script.onload = function(){
eruda.init()
}
我们可以使用的cdn链接(列举了两个):
https://cdn.jsdelivr.net/npm/eruda (不稳定)
https//cdn.bootcss.com/eruda/1.3.2/eruda.min.js (稳定但加载慢)
效果如下:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。