saber 酱的抱枕

Fly me to the moon

09/30
2017
软件

前端console 调试面板:vConsole

vConsole(github主页)是由腾讯公司开源的一个前端调试面板,功能和各个浏览器的控制台(console)类似(当然还没那么强大)。

PC上的各大浏览器都自带了控制台,但是手机上的浏览器我还没见过可以显示控制台的。当页面在手机浏览器上有异常时,调试起来很不方便。现在有了vConsole,就比以前好了不少。

要使用vConsole,先在github下载主js文件。(/dist/vconsole.min.js)

之后引入vconsole.min.js:

<script src="vConsole/dist/vconsole.min.js"></script>

最后在 body 标签之后使用:

<script>
var vConsole = new VConsole();
</script>

这样就可以了,网页右下角就会出现vConsole的按钮:

console vConsole 控制台 移动端 调试

(如果网页上这个位置有其他悬浮元素,则可能遮挡住vConsole的按钮)

点击这个按钮就可以显示vConsole的面板,目前版本(3.0.0)的面板如下:
Read More →

前端console 调试面板:vConsole

01/1
2017
软件

使用Chrome浏览器调试Android手机上的网页

调试移动设备上的网页很麻烦,因为手机上基本没什么调试工具。我们最常用的办法应该是在pc上模拟网页在手机里的运行效果,但如果遇到用模拟不能解决的问题,就又要发愁了。

倒闭公司谷人希家的chrome浏览器可以使用USB数据线调试Android手机上的网页,很好用,最近我找了些教程试了试,把步骤记录一下。

首先手机要是Android的,需要打开开发者模式并开启USB调试。

然后用手机上的浏览器(不知是否所有浏览器都可以,推荐用手机版chrome)打开要调试的网页,并使用USB数据线把手机连接到电脑上(如果有模式选择,可以选择传文件模式,不要选择仅充电)。电脑上需要有这个手机的驱动,如果没有驱动得自己去装(现在多数手机插上就会自动装驱动了吧)。

之后在电脑上chrome地址栏里打开chrome://inspect/#devices,会自动扫描通过USB连接的设备。

这个阶段可能在手机上会弹出USB调试的确认框,点同意。这样,chrome中就会显示出手机以及手机上打开的网页了。

使用Chrome浏览器调试Android手机上的网页

要调试某个网页的话,点击它下面的“inspect”就可以了。chrome会打开一个新的窗口来显示这个页面,之后我们就可以用开发者工具来调试了:

使用Chrome浏览器调试Android手机上的网页

如果操作步骤和设备都符合要求却不能显示/调试设备,那么可以尝试翻墙。

相关资料:《移动端Web开发调试之Chrome远程调试》

使用Chrome浏览器调试Android手机上的网页