利用http-server进行手机页面调试

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/grapelove01/article/details/80529338

1. 将手机连接到PC的同一个网络

命令行 http-server -c-1 开启本地网页服务器，如下：

同wifi下，用手机访问网址 192的网址，即可进入网页页面

2. 进行调试

手机上不能像在网页上一样直接使用console.log进行调试，可以寻找替代方案

2.1 alert()调试

先利用alert()确定出错代码区域，然后利用alert()结合onerror进行错误调试

window.onerror = function(message,file,row) {
    alert(message)
    alert(file)
    alert(row)
}

也可以是其他script.onerror

2.2 自己造一个console

由于手机页面没有console.log，我们可以自己定义一个console.log

<div id="consoleOutput" style="position:fixed;width:100%;left:0;bottom:0;height:100px;border:1px solid black;background:red;overflow: auto;">
</div>
<script>
    window.console = {
        log(x) {
            let p = document.createElement('p')
            p.innerText = x
            consoleOutput.appendChild(p)
        }
    }
</script>

这样手机上也有调试窗口了，可以像pc上一样使用console.log进行调试了
结合window.onerror效果奇佳

window.onerror = function(message,file,row) {
    console.log(message)
    console.log(file)
    console.log(row)
}

2.3 现成的方案——腾讯的vConsole

https://github.com/Tencent/vConsole
按照使用说明做
npm安装

npm install vconsole

引入即可，这样我们也可以得到一个模拟控制台

<script src="你的路径/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>