目录背景功能愿景方案一（已有服务容器，立马调试）方案二（基于node容器，需要搭建）
手机调试效果图
方案二详细步骤：基于node容器发布和调试手机页面

基于eruda的手机端网页的调试

gtihub地址：
https://github.com/liriliri/eruda
本篇源码地址：san-js-demo/customselect/index.html
https://gitee.com/lufei222/san-js-demo.git

背景

select组建在电脑端运行正常，手机端运行不正常。
于是想手机端直接有工具调试。
我遇到的场景还原：
在电脑端网页和手机端网页显示完全不一致（size属性手机端不支持导致）
http://www.w3school.com.cn/tiy/t.asp?f=html_select_size
在本人的 https://gitee.com/lufei222/san-js-demo.git 做了一些测试select的页面，最终改成自定义伪select

功能愿景

在手机控制台输出你的log
在手机上运行你的网页
通过日志的打印确保你当前页面不是来自缓存的
直接审查你的网页源码校验是否存在问题
直接显示当前js是否存在错误
eruda的其他功能探索

方案一（已有服务容器，立马调试）

前端页面需要依赖于web容器，比如tomcat、apache、node、nginx等

如果代码已经在容器中使用，则直接在页面中头部嵌入这一句即可调试，无需往下继续方案二

<head>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</head>

方案二（基于node容器，需要搭建）

如果单独的页面，则根据自身情况选择nginx、node、tomcat等。一下操作代码依赖node容器启用服务实现。

手机调试效果图

在页面中点击虚拟键即可进入调试页面查看日志信息。

方案二：基于node容器发布和调试手机页面

安装Git

并且安装上gitbash，允许桌面鼠标右键出现gitbash选项，如已配好则无需再配置。
克隆我的git项目
git clone https://github.com/lufei222/sanVariousProject
对于select的测试放在了customselect下面

安装Nodejs

安装成功后cmd，在控制台输入node，若没提示错误则安装成功，

基于业务代码搭建Nodejs服务器环境

目的是为了能在手机端打开页面，idea的默认63342端口在手机上是打不开的，必须把项目放在类似tomcat的容器里面，所以在这里我选择nodejs，

打开sanVariousProject 项目，将项目下面的http.js和mine.js两个文件复制到sanVariousProject 的上一级目录，
把http.js里面的配置项目名称改为sanVariousProject （当前项目已经配置好可以直接跳过第五步，两个nodejs脚本适用于其他项目）
在sanVariousProject 的上级目录右键打开gitbash，或者在控制台进入sanVariousProject 的上级目录，允许node http.js。端口3000默认启动成功
在浏览器输入http://192.168.3.115:3000/customselect/index.html（192.168.3.115是你自己的ip地址，查看自己ip地址方式：进入cmd 接着输入ipconfig即可看到）
如果浏览器页面打不开，那么说明的你防火墙把它限制了，这时关闭防火墙（win+R进入允许端口，输入control进入控制面板，接着搜索防火墙，进入防火墙后上下两处均选择关闭防火墙。）
直到输入http://192.168.3.115:3000/customselect/index.html（用你的ip替换192.168.3.115）成功显示页面

进行手机调试

电脑浏览器成功显示后即可直接在手机端浏览器打开链接，开始你的手机页面调试。

如何在手机浏览器使用调试工具相关推荐

【调试】前端调试，在电脑上调试手机浏览器
前端调试,在电脑上调试手机浏览器参照教程:http://www.tuicool.com/articles/mAzmq2 1.按教程说的装好 weinire 之后,复制下面代码到需要调试的html上: ...
js判断手机浏览器屏幕方向
/* js判断手机浏览器屏幕方向*/var direction = {__getOrientation: function () {if (window.orientation == 0 || win ...
手机 html5评测,三款主流手机浏览器HTML5性能横向评测
到目前为止带给大家更多的是一种神秘感,我们并未看到很多以HTML5为主的网站在我们生活中出现,正是因为这份神秘感让我们想对HTML5进行一次深入的探秘,去了解一下什么是HTML5,并且HTML5究竟应 ...
js关闭手机浏览器_Unity 之 WebGL打开手机摄像头
有个同学问了一个问题,希望用Unity编译出的WebGL打开摄像头,显示3D模型在手机浏览器里面运行. 第一反应就是建议他用three.js 之类的JS 库.但是他说Unity相对熟悉点.正好自己之 ...
java打开网页横屏_巅峰之战！三款最热java手机浏览器横屏
对于非智能机用户来说,有一款出色的Java手机浏览器是尽享手机冲浪乐趣的关键.目前,中国java手机浏览器市场,用户最热衷的莫过于OperaMini.UC浏览器7.7.手机QQ浏览器2.0.那么,这三 ...
IOS和Andriod手机浏览器内核
手机浏览器是基于什么内核? 如果细分的话,目前全球仅有四个独立的浏览器内核: 1. 微软IE的Trident 2. 网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko 3. KDE的开 ...
十分简洁的手机浏览器 lydiabox
没有地址栏,没有工具栏.web app无需下载.无需安装.无需更新,加入即用:再也不用记住网址.更不用输入网址--一款这样极简极方便的浏览器,你想要吗? 我们做了一个十分简洁的手机浏览器,这个浏览器也 ...
判断手机浏览器还是微信浏览器(PHP)
//判断是否微信浏览器 function isWeixin1() {if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== fal ...
【Android工具】Yandex！可以安装PCchrome插件的手机浏览器！更新网页剪辑插件测试情况...
公众号关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 最近在手机上看(你懂的)神坛,看到各种不错的文章,当然想收藏下来,毕竟神坛有清理帖子 ...

如何在手机浏览器使用调试工具