admin管理员组文章数量:1558102
目录
背景
功能愿景
方案一(已有服务容器,立马调试)
方案二(基于node容器,需要搭建)
手机调试效果图
方案二详细步骤:基于node容器发布和调试手机页面
基于eruda的手机端网页的调试
gtihub地址:
https://github/liriliri/eruda
本篇源码地址:san-js-demo/customselect/index.html
https://gitee/lufei222/san-js-demo.git
背景
select组建在电脑端运行正常,手机端运行不正常。
于是想手机端直接有工具调试。
我遇到的场景还原:
在电脑端网页和手机端网页显示完全不一致(size属性手机端不支持导致)
http://www.w3school/tiy/t.asp?f=html_select_size
在本人的 https://gitee/lufei222/san-js-demo.git 做了一些测试select的页面,最终改成自定义伪select
功能愿景
- 在手机控制台输出你的log
- 在手机上运行你的网页
- 通过日志的打印确保你当前页面不是来自缓存的
- 直接审查你的网页源码校验是否存在问题
- 直接显示当前js是否存在错误
- eruda的其他功能探索
方案一(已有服务容器,立马调试)
前端页面需要依赖于web容器,比如tomcat、apache、node、nginx等
如果代码已经在容器中使用,则直接在页面中头部嵌入这一句即可调试,无需往下继续方案二
<head>
<script src="//cdn.jsdelivr/npm/eruda"></script>
<script>eruda.init();</script>
</head>
方案二(基于node容器,需要搭建)
如果单独的页面,则根据自身情况选择nginx、node、tomcat等。一下操作代码依赖node容器启用服务实现。
手机调试效果图
在页面中点击虚拟键即可进入调试页面查看日志信息。
方案二:基于node容器发布和调试手机页面
安装Git
并且安装上gitbash,允许桌面鼠标右键出现gitbash选项,如已配好则无需再配置。
克隆我的git项目
git clone https://github/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)成功显示页面
进行手机调试
电脑浏览器成功显示后即可直接在手机端浏览器打开链接,开始你的手机页面调试。
版权声明:本文标题:如何在手机浏览器使用调试工具 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725798676a1043300.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论