关键词：
如题 本文主要将 Safari + iPhone 前端开发调试 之 正确查看网络请求的 姿势
惯例 说下问题场景：
早知道safari（Mac） + iPhone 调试的方便 能解决很多日常调试问题，但有次帮人调试问题 发现是接口报错 但不知道接口数据 和传参数 在哪里查看 强行装b失败。
场景介绍完毕
作为一个尽量做到不 不求甚解的软件从业者 我是不会就此退缩呢。（其实是因为装B失败 要扳回一城）故有本文的由来
其实本文的东西也很简单。
下面简单说下：
首先那 一般调试的教程 网上搜了一通 答案也很多，而且苹果官方也给出一些说明，链接如下：
https://support.apple.com/kb/PH21414?viewlocale=zh_CN&locale=en_PH 苹果官方说明
然后再来一篇比较详细的介绍 借前人的地址用一些：
https://chon.io/blog/safari-ios-iphone-itouch-web-dev-inspector/ 前人分享
那下面开始说我本次要说的点
直接上图，各位看官莫嫌弃。
如上面几个图所示：具体步骤如下：
选择 时间线 栏目-》选中网络请求-》鼠标移到具体请求 后面的 右键头上面 停几秒
嗯 完成上述步骤后 你会发现 你想要的都出来了。
get请求 参数会直接在url里面显示
post请求 要点击具体网络请求 然后会有 请求 和 响应 两个选项
这样就能满足日常 不通过抓包工具 完成基本的请求参数 和请求应答数据的查看了。
是不是很方便
谁说Safari不好用的 其实挺方便的 嗯 是吧？
下回见～
使用pc端浏览器开发者工具对移动端真机环境web页面进行远程调试
...面Mac/Windows浏览器开发者工具远程调试iPhone/Android页面在移动端Web开发中，有时候只通过模拟器进行调试是不够的，需要在真机环境下进行调试才能发现并解决一些问题。而移动端真机环境浏览器没有开发者工具，在这种情况下... 查看详情
移动端真机调试方法
最近要分析web页面，在安卓和ios上的性能差异，除了操作系统本身不同之外，应该还多地方要探究的，第一步就是要在真机上分析。所以总结一下几个方法。1.Mac++iPhone+ Lightning+Safari浏览器步骤：1）用：Lighting线将mac与iphone相... 查看详情
iphone页面的常用调试方法
在iPhone中调试，大体上与上文 安卓中的移动页面调试 类似，区别主要是iOS系统中的一些限制，导致某些工具无法使用。本文基于此，简要介绍在iPhone中如何调试页面。最终可以实现在Mac平台使用Safari（或结合ios_webki... 查看详情
safari导航栏(代码片段)
...正常的特性，以下称为默认隐藏。这是一个纯显示页面，移动端访问如下：默认隐藏通过查找资料和对比其它平台的页面，主要的思考方向是页面结构和CSS样式。首先想到在项目里面常会引入一个重置样式的库normalize.css，看下... 查看详情
调试移动端页面
调试移动端页面分为两种开发时，移动设备连接上PC起的服务调试移动设备上的页面手机连接PC的本地服务在开发移动设备页面时，常用CHROME自带的模拟移动设备外，还需要有真机去测试一下，而不是布到测试服务上去之后，再... 查看详情
通过chrome在windows中调试运行在iphone-safari上的页面
...c/MacBook中打开Safari进入调试模式，即可对运行在手机中的页面进行调试。详情见：UsingWebInspectortoDebugMobil 查看详情
移动端交互优化
1、移动web页面上click事件响应有300ms延迟原因：移动设备访问的web页面都是PC上的页面。在默认viewport（980px）的页面往往需要“双击”或“捏开”放大页面。而正是为了确认用户是“双击”还是“单击”。safari需要300ms的延迟来... 查看详情
混合开发之h5在移动端如何调试界面
...界面，虽然不及在Chrome中直接进行调试，但是还是能解决移动端调试的问题的 查看详情
移动端手机调试的几种方法
参考技术A很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为... 查看详情
如何在移动设备上调试网页
这篇文章所讲到的方法已经过时，请移步《移动端真机调试终极利器-BrowserSync》，欢迎分享更多工具。手机端页面，大多运行在webkit内核的浏览器上，但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和And... 查看详情
移动端页面手机调试debug
参考技术A1.安装：npminstall--save-deveruda2.页面引入eruda：importerudafrom'eruda'3.初始化eruda：github地址：https://github.com/liriliri/eruda如果不是基于Vue项目的而是一个简单的活动页面。只需在页面添加如下<script></script>标签就... 查看详情
移动端事件简介
pc端事件在移动端的问题?移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟键盘。所以以前的pc端事件在移动端使用起来就没有以前那么爽了，虽然部分仍然可以使用。click事件的300ms延迟问题。?2007年... 查看详情
sms: 和 mailto: iPhone Safari 移动浏览器失败
】sms:和mailto:iPhoneSafari移动浏览器失败【英文标题】：sms:andmailto:failureoniPhoneSafariMobileBrowser【发布时间】：2020-03-0203:59:12【问题描述】：问题：带有sms:和mailto:链接的网页在ios移动safari浏览器上失败。单击链接会将您重定向到：Sa... 查看详情
一篇真正教会你开发移动端页面的文章
一篇真正教会你开发移动端页面的文章(二)psd图：现在移动端的设计图一般以iphone5（640px）和iphone6（750px）为准，ps左下角放大到100%，看宽度是多少，就是以多少为准。本篇以iphone6（750px为准），其它尺寸道理一样。psd原稿按照... 查看详情
在 iPhone Safari HTML 页面上打开带有图像的 Youtube 视频
...问题描述】：有人可以帮我弄清楚如何使用占位符图像在移动设备上打开youtube视频，这样如果用户在iphone上的safari中单击html页面上的图像，视频会自动全屏播放（注意：在在这种情况下，iphon 查看详情
移动端调试神器vconsole
多页面应用，在每个页面添加<scriptsrc="path/to/vconsole.min.js"></script><script> varvConsole=newVConsole() console.log(‘HellovConsole‘)</script> 单页面应用npminstallvconsole importVC 查看详情
试说移动端是如何调试的？
移动端调试;（1）模拟手机调试；（2）真机调试之android手机+Chrome；（3）真机调试之iphone+safai；（4）UC浏览器；（5）微信内置浏览器调试；（6）调试工具debuggap；（7）抓包;细节参考：https://segmentfault.com/a/1190000005964730 查看详情
为啥 iphone Simulator 不能正确呈现 HTML5 页面？
】为啥iphoneSimulator不能正确呈现HTML5页面？【英文标题】：WhyisiphoneSimulatornotrenderingHTML5pagecorrectly?为什么iphoneSimulator不能正确呈现HTML5页面？【发布时间】：2010-06-1122:44:43【问题描述】：我有一个在.net中使用HTML5开发的页面，用... 查看详情