iOS Web开发调试工具MIHTool作者访谈

最新推荐文章于 2021-12-03 23:59:07 发布
最新推荐文章于 2021-12-03 23:59:07 发布
阅读量263 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cpongo9/article/details/89012754
版权

MIHTool是一款在国外非常出名的移动设备Web开发调试工具。大家可能想不到的是这款工具是不折不扣的国人作品。InfoQ联系到它的作者，做了一次简单采访。不管你是否了解此应用，是否关心移动开发与调试，这后面的故事都值得一读。

\u0026#xD;\n

以下是采访内容：

\u0026#xD;\n

InfoQ：请先做个自我介绍吧。

\u0026#xD;\n
\u0026#xD;\n

听奏：我是MIHTool的作者，也是一个前端开发者，目前就职于网易，专注于移动前端。关于MIHTool大家可以Twitter @unbug 或者微博 @听奏。这是我的个人主页 iunbug.com。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：能否讲讲决定做MIHTool这款产品的起因？

\u0026#xD;\n
\u0026#xD;\n

听奏：开发MIHTool最初是因为移动前端的项目一直受到性能不佳，CSS3动画不流畅，闪动等的问题的困扰。但如果调试移动端页面的时候能像PC端的Chrome一样查看到页面合成渲染层边框元素的重绘渲染数，那么可以大大减少上述问题的出现。后来作者在Zynga工作室CTO(也是jQuery UI的原作者)Paul Bakaus指导下，MIHTool不断迭代，通过Twitter，邮件，MIHTool Google Group作者收集到不少网友的建议(或需求)，MIHTool才有今天这么多丰富实用的开发者功能。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：MIHTool解决了什么问题？

\u0026#xD;\n
\u0026#xD;\n

听奏：详细的内容可以在MIHTool的主页看到。当中比较突出的功能用Paul Bakaus专门为MIHTool写的介绍博文《MIHTool, the iOS web debugger》中总结的四点可以说明:

\u0026#xD;\n
  1. \u0026#xD;\n

    Inline Web inspector 这个是iPad独占的功能。没错，通过MIHTool不仅可以远程调试页面，如果你有一台iPad你可以完全用iPad来完成调试，特别是你身边没有一台PC的时候。当Paul Bakaus看到这个功能时他在Twitter上是这么评价的\"This will be game changing. Nothing like it existed before in iOS. I'm blogging about it.\"。

    \u0026#xD;\n \u0026#xD;\n
  2. \u0026#xD;\n

    进阶性能分析功能显示页面合成渲染层边框和显示元素的重绘渲染数 Webkit内核的浏览器提供这两个网页高级性能分析标记。在chrome中很容易开启，但在mobile safari不通过XCode的instruments是无法查看到的。而通过这两个标记，前端开发者能够更加有依据的也解决性能问题。MIHTool直接提供了这两个功能，作者希望从事移动前端的开发者通过MIHTool都能找出自己作品中的性能瓶颈原因进而做出更加优异的作品。

    \u0026#xD;\n \u0026#xD;\n
  3. \u0026#xD;\n

    完全远程控制 通过MIHTool HTTP Server你可以完全方便的通过简单的命令控制MIHTool，这对开发者有什么好处呢？比如你有10台iOS设备罢在你面前，你想写一个脚本让他们自动打开你的测试页面(自动化测试)，那么通过MIHTool的远程打开URL命令你的脚本是可以实现的。

    \u0026#xD;\n \u0026#xD;\n
  4. \u0026#xD;\n

    缓存的控制 MIHTool不仅可以很方便的清除缓存(包括manifest)，Cookies，localStorage，你还能(或者远程)禁用缓存或者全部删除上述所有数据。这大大的节约了开发者的时间。

    \u0026#xD;\n \u0026#xD;\n
\u0026#xD;\n

InfoQ：市面上有什么同类产品吗?

\u0026#xD;\n
\u0026#xD;\n

听奏：目前同类产品比较知名的是Adobe edge inspect(原名Adobe shadow)，已经发布有一年了专注于web inspector和多平台及云服务。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：和Adobe edge inspec相比，MIHTool有什么优势？

\u0026#xD;\n
\u0026#xD;\n

听奏：Adobe edge inspect属adobe edge系列的成员，主要功能是web inspect。MIHTool专注于给开发者丰富的开发者调试工具，web inspect只是其中的一个功能，两者都是用的apache开源的weinre，MIHTool对weinre做了一些修改，如适配触屏(Inline web inspector)，离线存储脚本，支持外连脚本/样式的查看等。MIHTool的开发者工具非常的丰富，其他功能有:多达30的UA可以切换，显示合成渲染层边框和元素重绘率，查看HAR，HTML编辑器查看和编辑源码，缓存控制，完全化的远程控制等都是Adobe edge inspect没有的。并且MIHTool只用安装到iOS设备上即可以使用，而adobe edge inspect 要不仅要安装iOS客户端，同时还要安装chrome插件和MAC(PC)客户端，当然，adobe edge inspect支持多平台也是MIHTool不及的。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：这款工具的名字是怎么得来的？

\u0026#xD;\n
\u0026#xD;\n

听奏：MIH = Make It Happen。这是作者给自己的一个承诺，承诺无论如何都要将MIHTool开发出来坚持下去。作者知道无论做任何事情开头难坚持也难，如果不给自己一个承诺那么即使开始兴趣盎然最终也会不了了之。作者为了这个承诺在不到三个月时间就将MIHTool打造得如此实用，着实让作者本人也大吃一惊。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：在创作这款产品的时候，有没有遇到什么困难，是如何解决的？（语言学习、视觉设计、产品规划、推广工作）

\u0026#xD;\n
\u0026#xD;\n

听奏：因为作者曾是J2EE开发者，学习其他编程语言心理上没有什么压力，学习objective-c时也没有过多拘泥，都是MIHTool要用什么特性才通过搜索引擎和youtobe视频学习的，显然很不专业，其实MIHTool本来是开源的，在github上还有早期的版本，但作者把MIHTool的objective-c代码写得实在不堪入目，不再好意思更新上去。

\u0026#xD;\n

MIHTool里唯一上眼的应用图标不是作者设计的，是Mortensen的图形与交互设计师Rude设计的，Rude先是在Twitter上抱怨原来的图标，后来干脆动手帮作者做了一个，也就是现在MIHTool的图标，非常的细腻和精致。

\u0026#xD;\n

因为MIHTool迭代非常的快，规划的功能基本上都即想即加的，直到5.0才算基本完善了。但很遗憾的是作者一直想给MIHTool加FPS查看器和网络环境模拟及类似fiddler的本地脚本替换线上脚本等功能因为作者iOS开发能力有限没能实现，如果读者知道如何实现欢迎不吝赐教。

\u0026#xD;\n

MIHTool在国外较多开发者知晓，Twitter上几乎每天都有的关于MIHTool的新twitter，但MIHTool的推广作者其实没有什么功劳，都是Zynga工作室CTOPaul Bakaus在Twitter上的推广的，他专门为MIHTool写了一篇Blog。同时在Twitter，G+，facebook上推广MIHTool的还有Google的工程师Paul Irish和Addy Osmani及Smashing Magazine的编辑。作者的朋友同事也帮MIHTool在微博上推广过，但可能由于国内移动前端不太活跃的原因国内的安装量很少而且大多都是友情支持，目前安装量较多的几个国家是美国，英国，德国，和意大利。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：那么国外的开发者对MIHTool都有着什么样的评价？

\u0026#xD;\n
\u0026#xD;\n

听奏：在Twitter，一些业界比较有名望的人士对MIHTool做出过如下的评价:

\u0026#xD;\n
  • Zynga工作室CTO @pbakaus : MIHTool is a brilliant tool that helps you debug websites on iOS.\u0026#xD;\n
  • Google工程师 ‏@paul_irish : MIHTool: a smart \u0026amp; powerful debug tool for iOS WebView.\u0026#xD;\n
  • Google工程师 @addyosmani : MIHTool will change your life: A complete inline Web Inspector on iOS with performance profiling\u0026#xD;\n
  • Smashing Magazine ‏@smashingmag : MIHTool: a good tool for debugging websites on iPad and iPhone.\u0026#xD;\n
\u0026#xD;\n

InfoQ：此款产品在AppStore上有一个收费版和一个免费版，能否对此讲讲你的想法？

\u0026#xD;\n
\u0026#xD;\n

听奏：收费版是4。0才开始上架的，作者对外发布一直没用过收费版的连接，因为收费版是作者给那些想捐助支持MIHTool的用户准备的，他们的捐助会帮助作者支付MIHTool的服务器开销，作者承诺只要是作者管理的，MIHTool收费版和免费版就不会有任何区别。

\u0026#xD;\n

作者收到一些MIHTool用户的感谢邮件，希望能通过PayPal或Google Checkout的方式捐款，作者在此深表感激。

\u0026#xD;\n
\u0026#xD;\n

InfoQ：对这款工具，有怎样后续的计划？

\u0026#xD;\n
\u0026#xD;\n

听奏：MIHTool到5.0时基本已经完善，目前这段时间作者比较轻松，只修修BUG和添加网友新的需求，后续会将MIHTool的HTML编辑器(iPad版)做成一个更加实用的源码编辑器。

\u0026#xD;\n
\u0026#xD;\n

（采访内容完）

cpongo9
关注
iOS小技能：iOS无线真机调试
iOS逆向与安全
04-01 6107
引言 问题：Xcode13 新建项目 Products 目录不显示 解决方式： 修改project.pbxproj 文件的productRefGroup配置信息 效果： I 修改project.pbxproj 的product配置信息 1.1 从Xcodeeproj 打开project.pbxproj 1.2 修改productRefGroup 的值 将mainGroup 对应的值复制给productRefGroup 的值，按command+s保存project.pbxproj文件,Xcode将自动刷新
ios webapp调试神器MIHTool
weixin_30401605的博客
07-14 288
android平台有直接用chrome beta就可以调试，具体操作办法可以查看这篇教程《Android 设备 Chrome 远程调试》Mac的高富帅直接可以用safari提供“web检查器”，具体可查看这篇文章《ios6下调试webapp》 那么用pc如何在ios上实时调试我们的移动版主题呢？weinre？麻烦了点儿，本文将为您着重介绍一款国产神器MIHTool，说它是神器，一点都不为过，嗯？...
推荐一款神器，桌面远程调试IOS网站的工具 很好很强大 支持国产！
fengqingxin的专栏
04-04 377
MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手.   首先app Store下载 MIHTOOL。 然后安装后地址栏打开所需要调试的网站，然后会弹出本地使用的ip地址 类似这样的 http://192.168.1.165:1630/devtool/client/#leZV6e   然后，出现如下界面就等于就可以成功开始远程调试 IOS网站了   功能特性 ...
移动web App前端调试 --Weinre&MIHTool
LeuisKen前端屋
09-30 2836
众所周知，移动前端的调试不像PC端的调试那样方便，在PC端不管是chrome还是IE，都有自己的开发者工具，只要安装了既可以方便实时调试。Mobile Web App由于受到网络、硬件设备的限制，调试起来就要麻烦多了。今天就跟大家推荐两个工具Weinre和MIHTool，能通过PC端的浏览器调试，实时看到移动端修改的效果。       一、Weinre Weinre（W
在线html优化工具,页面调试和优化工具 MIHTool
weixin_36245032的博客
05-31 2548
软件介绍MIHTool 是前端工程师在iOS设备上调试和优化页面的得力助手.功能特性：iPad版1.内嵌 Web inspector(类似于 Chrome DevTool 或 FireBug):有 Elements,Resources,Network,Timeline,Console 面板.2.远程打开Web inspector调试:在电脑(window,mac,linux,仅需装有chrome)...
【工具】移动端web调式工具分享
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
12-12 1554
前端修罗场提供全网最专业的前端优质文章与社区服务，为应届生，初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务！内容包含：前端面试辅导，前端面试题，前端交流，前端答疑，前端基础知识，Javascript，CSS，CSS3，HTML，React，Vue，小程序，前端简历，职业交流，远程工作，英文交流，英文提升，外企，互联网，国企，大厂，牛客面试题，掘金面试题，面经，优质前端文章分享...
最新IOS17.0真机调试包
09-21
在iOS开发领域，真机调试是开发者不可或缺的功能，它允许程序员在实际设备上测试应用程序，以确保软件在各种硬件配置和系统版本上运行无误。本文将深入探讨“最新iOS 17.0真机调试包”以及与之相关的Xcode、iOS和Mac...
iOS10.3真机调试包工具
03-28
"iOS10.3真机调试包工具"是针对苹果操作系统iOS 10.3版本的一个特殊调试工具，主要用于帮助开发者在装有iOS 10.3系统的设备上进行Xcode的真机调试工作。 Xcode是Apple官方提供的集成开发环境（IDE），用于编写iOS、...
盘点——iOS应用开发常用工具
syh96123的博客
06-11 2183
针对 iOS 平台的应用开发工作，通常都需要借助 IDE、 SDK 等开发工具以提升开发效率。iOS 平台的应用开发生态环境，正随着更多优秀开发者的加入，而变得越来越完善。那么，对于 iOS 应用开发者来说，该如何选出合适的 IDE 或 SDK 工具呢？ 不论是 iOS 应用开发公司，还是个人开发者，都需要合适的、好用的应用开发工具。在很多情况下，iOS 应用开发工具的表现，已经成为了能否打造一款爆品应用的决定性因素。此外，也有一些混合工具可以同时支持安卓与 iOS 应用的开发，为开发者带来了进一步的便利.
微信开发者工具模拟器、IOS真机调试、Android真机调试中Editor效果不一致问题
Gy97010735的博客
12-03 1万+
问题环境： 1、微信开发者工具1.05.2110290（以下简称“工具”） 2、真机调试1.0版本（不区分IOS与Android） 3、微信的editor component，用于在自己的项目中，作为富文本的输入（包括图片、多种格式文字等） Editor的界面效果如图（两个按钮是后期加的，不是editor自带的） 产生的问题： 在工具的模拟器中，在editor中插入图片，点击提交，数据能够正常的发送到后端。 但每次用Iphone真机模拟，在editor中插入的图片，每次都无法到后端服务器。由于笔者平时不用a
远程调试(Remote Debugging)
03-16 5017
当运行的程序出现问题时，我们通常通过调试来追踪和定位问题。但是，当运行错误的机器上没有调试工具，我们就需要实现远程调试。简单地说，就是要调试的程序和调试器不在一台机器上。 移动端web调试，alert虽然是个土方法，但也是万能的，不过这样会中断程序的执行，效率也比较低下。后来大家开始尝试使用模拟器调试，如chrome自带的设备模拟器，可以帮助我们测试网页在不同设备、不同分辨率的情
七款Debug工具推荐：iOS开发必备的调试利器
The Life with iOS
09-30 1088
在开发应用的时候，我们会碰到各种各样的bug，我们想要更好地了解到底发生了什么。然而不可预期的调试工作，总会浪费我们大量时间。本文介绍了七款诊断调试工具，可以从可以帮助我们对代码、UI界面等进行调试。 历时数周或数月开发出来了应用或游戏，可为什么体验不流畅？怎么能查出其中的纰漏？这些需要调试诊断工具从旁协助。调试是开发过程中必不可少的重要一环。本文会列举几个比较有效的调试诊断工具，可以帮助你
IOS界面调试神器DCIntrospect
weixin_30799995的博客
06-22 88
对于使用代码来写UI的同志，使用DCIntrospect来查看元素信息调整布局，再也不用凭眼睛来估了，先来看看截图 DCIntrospect是github上的开源项目：下载源码 大概介绍下用法： DCIntrospect拖到项目中，添加 QuartzCore framework 在方法didFinishLaunchingWithOptions中添加下面的代码： ...
ios的web调试利器--weinre
我的笔记
12-13 3071
项目 http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html 原理 1 使用nondejs建立一个服务器； 2 使用注入方式插入一个js到被调试web页面中。这个js会尽可能的拦截页面上的实现得到上层的数据，如ajax请求，但是像图片直接加载，之类是无法得到的。同时定时向服务器发心跳码，或是返回命令结果，这个见
H5 App调试方法参考
程序员光剑
04-24 9307
H5调试常见方法 相较于pc端，移动端调试要更加丰富一些，下面对调试的方法进行简单汇总。 主要分为以下几点: chrome developer tools android+chrome inspect iOS+safari GapDebug weinre weinre相关套件 代理 chrome developer tools 除了chrome，Firef...
如何用windows电脑+ios调试手机上打开的网页
热门推荐
马娟的博客
04-08 4万+
一、环境 PC chrome浏览器（版本45、46） IOS safari浏览器（11.2.6） win系统（win7、win10） 一根USB数据线 二、打开iphone上 Safari浏览器的web检查器 设置 --> Safart浏览器 ---> 高级--- > 打开Web检查器 三、windows上安装iTunes 下载地址：iTunes 四、win...
基于yolov3结合卡尔曼滤波匈牙利算法虚拟线圈的车流量检测python源码+项目说明.zip
09-21
本项目专注于视频基的车辆跟踪与流量统计，依托深度学习技术，实时追踪路面车辆动态并精准统计各车道车流量。该项目通过以下核心步骤高效处理输入视频数据： 高精度目标检测：采用YOLOv3模型，凭借其卓越的实时性与准确性，快速识别视频中的车辆目标，为后续追踪奠定坚实基础。 稳定目标追踪：集成SORT（Simple Online and Realtime Tracking）算法，结合卡尔曼滤波器预测车辆未来位置，同时运用匈牙利算法优化目标间的匹配，实现连续、稳定的车辆追踪，有效应对遮挡、交叉等复杂场景。 智能车流量统计：借鉴虚拟线圈概念，巧妙设计算法以监测穿越预设区域的车辆，自动计数并准确统计各车道车流量，为交通管理与分析提供可靠数据支持。 整体而言，本项目通过融合先进的目标检测与追踪技术，结合创新的流量统计方法，构建了一个高效、精准的实时车辆跟踪与流量统计系统，为智慧交通领域的发展贡献力量。
本科毕业设计--基于深度学习的人脸面部表情识别.zip
最新发布
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
雷电模拟器改成真机环境
09-21
在Android系统中，模拟器通常会被识别为非真实的设备，这可能导致某些应用或服务无法正常运行，尤其是那些需要硬件信息或root权限的应用。改真机环境意味着通过技术手段使模拟器的行为更接近真实的Android设备，包括模拟设备硬件信息、IMEI、MAC地址等，以绕过检测并提升兼容性。LSPSED（Linux System Property Setter and Editor）模块是Magisk的一个扩展，专门用于修改Android系统的系统属性。通过LSPSED，我们可以更改设备的各种系统属性，如设备型号、制造商信息等，这些修改对于使模拟器看起来更像真实设备至关重要。在使用过程中，还需要添加几个机型模块，这些模块通常包含了特定设备的系统配置信息，如设备代号、硬件信息等。通过安装这些模块，雷电模拟器可以模仿各种流行的Android设备，进一步提高应用的兼容性和真实性。
iOS模拟器高效调试Web页面技巧
作者推荐使用MacOS下的Xcode，因为iOS模拟器是其内置工具。常规操作是通过Xcode启动模拟器，但这对于只为调试Web页面的用户来说效率不高。实际上，模拟器应用程序位于独立的安装路径：/Applications/Xcode.app/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值