|设为首页 |加入收藏|

sb沙巴体育

搜索: 您的位置主页 > 最新公告 > 阅读资讯:Chrome浏览器如何调试移动端网页信息

Chrome浏览器如何调试移动端网页信息

2020-07-07 09:25:18 来源:原创 【 评论: 条
摘要: 在开发移动端项目的时候,会利用WebView或者是UIWebView加载一个页面,有时候会遇到一些问题或者想追踪页面中一个按钮的点击事件。这个可能就需要调试这个页面了。而关于WebView调试

  在开发移动端项目的时候,会利用WebView或者是UIWebView加载一个页面,有时候会遇到一些问题或者想追踪页面中一个按钮的点击事件。这个可能就需要调试这个页面了。而关于WebView调试页面,我觉得有点麻烦,所以这里直接利用PC端的Chrome浏览器进行调试即可。因为Chrome浏览器可以支持预览手机页面。比如这里我们需要调试的页面地址为:https://ds.alipay.com

  640?wx_fmt=png&wxfrom=5&wx_lazy=1

  下面就来开始直接进行调试功能,首先我们在PC端用Chrome打开这个链接:

  640?wx_fmt=png&wxfrom=5&wx_lazy=1

  我们会看到这个页面并不是我们在Android端看到的页面,所以这里应该是这个页面做了适配,对于移动端和PC端展示不同的页面,而这个可以根据网页请求的UA信息进行判断的,我们可以用Fiddler抓包看看:

  这个是PC端请求的,看到User-Agent信息携带了PC端的操作系统信息。再看看移动端:

  这个可以看到User-Agent中携带了android操作系统,设备机型等信息。

  所以下面想要在Chrome调试移动端信息,这时候就利用Chrome的一个模拟移动端信息功能。我们在这个页面按下F12进行预览页面信息:

  我们这里选择N5机型,然后开始调试,首先我们定位到我们想要调试的按钮元素点击事件。点击左上角的箭头按钮:

  然后选中页面,按钮元素,查看右边栏的事件信息,这里我们关心的是点击事件,所以看到是一个a.open样式,这里想到他后面会用CSS的选择器功能找到,这个标签然后添加点击事件,我们这时候全局搜索open字符串即可。在下边栏使用Ctrl+Shirt+F全局搜索open字符串信息:

  然后我们可以逐个点击去进行观察,这里需要注意的是,在点进去之后的每个文件,为了防止搜索信息遗漏,可以在文件中使用Ctrl+F快捷键搜索:

  我们逐个分析之后,定位到这里,看到这个是我们想要的信息,这里用到了CSS的选择器功能,给a.open添加点击事件。在这里下个断点即可。直接点击边栏行数处即可下断点。这时候我们刷新页面,然后再去点击按钮,触发断点:

  在右边栏中,查看断点信息,我们可以单步跳出和单步跳入。一步一步往下走,当运行到一处会发现js信息非格式化的时候,可以选择文件的左下角方括号按钮进行js文件格式化即可:


顶一下
(0)
0%
踩一下
(0)
0%
Tags:
责任编辑:admin
  • 上一篇:马克·杰克逊
  • 下一篇:没有了
  • 关于我们 | 网站声明 | 广告服务 | 招聘英才 | 联系我们 | 在线留言 | 网站地图 | RSS订阅 | 返回顶部