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

目录
	背景
	功能愿景
    方案一(已有服务容器,立马调试)
	方案二(基于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


功能愿景

  1. 在手机控制台输出你的log
  2. 在手机上运行你的网页
  3. 通过日志的打印确保你当前页面不是来自缓存的
  4. 直接审查你的网页源码校验是否存在问题
  5. 直接显示当前js是否存在错误
  6. 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容器启用服务实现。

手机调试效果图

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

如何在手机浏览器使用调试工具_第1张图片

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

安装Git

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

安装Nodejs

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

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

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

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

如何在手机浏览器使用调试工具_第2张图片

进行手机调试

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

你可能感兴趣的:(如何在手机浏览器使用调试工具)