前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >【工具】移动端web调式工具分享

【工具】移动端web调式工具分享

作者头像
前端修罗场
发布2023-10-07 16:33:02
发布2023-10-07 16:33:02
3580
举报
文章被收录于专栏:Web 技术Web 技术

唉,最近公司在研发分布式高性能的云计算平台,其中涉及到了 AI 方面的处理。所以我也在自学 Python,发现没啥门槛😂。不过在 AI 方面的知识却是需要花功夫花时间学习的。在学习的过程中我发现了一个不错的学习教程,推荐给大伙😋,我个人觉得这个教程讲解的通俗易懂,帮我省去了自己苦苦专研的时间,能够得到快速的进步。下一阶段,我也会在这里和大家分享我的学习笔记。

移动端web调式工具分享

前提:

你是不是有时会因为在 Chrome 或是 Firebug 上调式 web 的时候都能遇到什么 bug,然后放到真机上跑一下 bug 成堆冒出来,然后调式又发现不了问题,于是疑惑不解。现在福利来啦,在真机上也能调式!今天我们就介绍一下关于移动端的调式工具。

远程调试工具weinre使用教程

一:关于weinre weinre就是一款依赖于nodejs的远程调试工具

二:weinre的安装 步骤一:安装nodejs以及npm(因为weinre是运行在nodejs上的,这一步就不展开了,安装nodejs也是很容易的) 步骤二:npm -g install weinre安装weinre

三:weinre的使用例子 步骤一:打开命令行,输入:weinre --boundHost [IP_address] --httpPort [port] (IP_address 是pc的ip地址, 不能是127.0.0.1,port可以输入一个随便的端口) 假设我的pc的ip地址为192.168.1.131,然后我就可以输入这样的命令:weinre --boundHost 192.168.1.131 --httpPort 1234 步骤二:在浏览器上打开网址192.168.1.131:1234

IOS端调式之MIHTool

在开始调式之前,你需要到AppStore下载MIHTool。

MIHTool 是针对 IOS 的 Web 调式工具。你可以访问 MIHTool 的官方网站(http://www.mihtool.com/)一看究竟。

OK,现在我们来看看怎么使用这个“很黄很暴力”的工具吧!

1)首先,你需要让自己电脑的网络与手机的网络处于同一个wifi下; (这对于用台式机的孩子伤不起呀T_T…)

2)打开MIHTool这个App,你会看到这么一个提示: 这时,你需要记住的是提示框中的url,如图所示:

然后,我们点击OK,在MIHToll提供的地址栏输入你所要调式的Web的url。

(3)在电脑上打开谷歌浏览器chrome,在地址栏输入前面你记录下来的url,如果出现这样的画面,表示你和Iphone上的MIHTool连接成功啦~

如图所示:

(4)接下来,我们在这个页面上点击"Web Inspector",选择第1个“ Web Inspector Remote(远程审查)”的方式,这也是MIHTool推荐的方式。

点击后,如果网络情况好的话,你会看到这个页面,然后点击Targets下面的链接。 点击前,链接是蓝色的:

如图:

点击后,链接变成绿色,则表示可以进入调式状态。

如图:

然后我们在该页面的Tab导航栏选择第二项,进入调式功能:

如图:

我们选择 body 这个标签,这时去看你手机上的MIHTool页面,会相应的给出选择的区域。

如图:

怎么样?是不是热血沸腾了呢~

不过,你需要注意的是在调式之前一定要让你的 Iphone/Ipad与PC 处于同一个网段下。

好吧,关于在IOS上的Web调式就这样。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 移动端web调式工具分享
    • 前提:
    • 远程调试工具weinre使用教程
    • IOS端调式之MIHTool
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档