专栏首页正则Safari/Chrome调试WebView
原创

Safari/Chrome调试WebView

WebView

大多数App会选择H5去实现某些弱交互但是却需要热更新界面,这时候WebView就派上用场了,那么如何对WebView进行调试呢?

Safari

开启开发菜单

Safari -> 偏好设置

勾选“在菜单栏显示开发菜单”

设备的Safari调试

设置 -> Safari -> 高级 - > 开启Web检查器

选择要调试的网页

在App内打开对应的Webview

状态栏点击开发 -> 选择设备 -> 选择网页

然后,就可以通过safari调试这个网页了

对于iOS原生开发来说,用的做多的还是终端,比如你要测试一个WKWebView的JSBridge

window.webkit.messageHandlers.bridgeName.postMessage({//data..})

或者测试一个scheme

window.location.herf="xxxxx"

建议iOS开发者学习一些JS的基本知识,这会对调试WebView大有帮助。

Chrome调试

Chrome调试比较适合写H5的同学,因为在这里可以使用类似React/Redux等插件来提高效率。

准备工作:

开启iOS设备中Safari设置的WebContent检查器

确保手机被系统信任

安装:ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

安装:remotedebug-ios-webkit-adapte

npm install remotedebug-ios-webkit-adapter -g

运行adapter:

remotedebug_ios_webkit_adapter --port=9000

接着,在App中打开包含WebView的应用,然后chrome打开如下地址

chrome://inspect/#devices

点击config

添加localhost:9000

然后,就能够看到刚刚应用中的WebView了

点击inspect,就可以用Chrome进行调试了:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5 App调试方法参考H5调试常见方法chrome developer tools模拟器GapDebugweinrespy-debugger代理总结

    相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。 主要分为以下几点:

    一个会写诗的程序员
  • 基于移动端真机调试的图文教程(分享)

    最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。

    砸漏
  • 移动端真机调试方法总结

    最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。

    winty
  • 移动端网页调试方案

    移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试...

    IMWeb前端团队
  • 移动web真机调试方案

    对于前端开发来说,在pc端使用chrome等浏览器的开发者工具简直是好用到爆,Chrome手机模拟器可以帮助开发调试移动端web页面,然而在真机内调试起移动端w...

    CS逍遥剑仙
  • Hybrid App 应用开发中 9 个必备知识点复习

    UIWebView 是苹果继承于 UIView 封装的一个加载 web 内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新...

    前端迷
  • Hybrid App 应用 开发中 9 个必备知识点复习(WebView / 调试 等)

    我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。

    pingan8787
  • iPhone页面的常用调试方法

    某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

    书童小二
  • 移动web真机调试方案

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    csxiaoyao
  • 移动端网页调试方案

    由于移动端网页开发不能直接打开developer tools,导致我们调试起来稍微麻烦。好在我们有解决方案: Remote Devices 谷歌为我们提供的...

    从今若
  • Hybrid App 应用开发中 9 个必备知识点复习

    我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。

    ConardLi
  • 【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

    我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。

    pingan8787
  • 前端调试的那些手段

    在不同的平台,不同的环境下的调试方法也不尽相同,这个系列文章将探索常见的一些前端调试场景,较为系统地整理出一些调试方法。

    书童小二
  • 解决浏览器差异导致从子页面回到父页面,父页面不刷新的问题

      在做H5混合开发的时候总是会遇到浏览器差异、不兼容导致同样的代码,IOS和Andoird其中之一出现不可预见的问题。   我的问题也是如此,我的需求是从父...

    饮水思源为名
  • iOS 真机调试微信小程序

    平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。

    三水清
  • ES6私有变量与babel的爱情碰撞

    JS原生不支持私有变量,这让前端开发很头痛,如何实现私有变量对于程序的健壮十分重要。下面就讲下私有变量的几种实现,以及对应的babel插件。

    用户2845596
  • 移动端调试痛点?送你五款前端开发利器!

    之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机...

    用户4962466
  • 【Web技术】 275- 理解 WebView

    我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览...

    pingan8787
  • 一文读懂H5移动开发调试技巧

    内容来源:作者 | Jartto,http://jartto.wang/2018/11/01/mobile-debug/

    IT大咖说

扫码关注云+社区

领取腾讯云代金券