Hybrid----Debugging Web Content on iOS(在iOS设备上调试网页内容)
2013-06-07 17:44
633 查看
在iOS设备上调试网页内容
用iOS 6已上版本的Safari,可以通过Mac调试移动网页内容,你可以直接看到JavaScript的错误,编辑HTML属性,改变CSS属性,甚至可以在mac机上完成开发,这片文章描述了如何使用web inspector调试网页内容。
你应该使用桌面和数个iOS设备测试网页内容,如果不能做到真机测试,可以使用iOS模拟器,因为在iOS系统和OS X系统浏览器是有差异的,你应该份分别在iPhone iPad或其模拟器上测试。当在任意一个平台的Safari测试时,均可使用Web Inspector 调试网页内容。
第一步:在iOS设备上开启Web InspectorWeb Inspector 提供有价值的监测对于可能发生错误的网页内容,并且Web Inspector可以被OS X的Safari访问,你可以使用它去监测之前被载入到Safari或webView中的网页内容。(意思是可以在Mac机上通过Safari的Web Inspector调试iOS设备如iPhone上的safari网页内容,并且内嵌在App中的UIWebView也可以通过这种调试方法)
To enable Web Inspector on iOS
Open the Settings app.
Tap Safari.
Scroll down and select Advanced.
Switch Web Inspector to ON.
从Mac上监测
在开启了iOS设备上的Web Inspector,用USB线连接设备到你的Mac机,在Mac机上的Safari的Develop菜单项会显示,如下图所示,如果你的iOS设备名没有显示在Develop菜单下,可以试着重启Safari或重连USB线。(若Safari中无Develop菜单项,可通过Safari->Preference->Advanced->Show Develop menu in menu bar).
Figure 12-1 Inspecting a web page from the Develop menu
使用JavaScript与设备进行交互
在Web Insepctor debug console面板下,可以通过Mac机发送JavaScript命令至你的设备,通过debug console可以访问被监测页面的变量、函数和DOM树,如下图:
注:简单来说就是在iOS设备中的HTML页面,可以通过console.log("myVariable is "+ myVariable),打印log至mac机的上图窗口,mac机可以在上图窗口中输入JavaScript命令,向页面发送js,如window.alert(); 结果如下图
Figure 12-5 Alert dialog triggered from the debug console相关文章推荐
- Debugging Web Content on iOS(在iOS设备上调试网页内容)
- 【越狱开发】启动iOS设备上的WebInspector功能进行网页调试
- 远程调试Android/IOS设备/微信网页方法汇总
- Unable to start debugging on the web server. Logon failure: unknown user name or bad password(web服务器无法启动调试:未知用户名或密码错误)
- android WebView加载不出网页内容This request has been blocked; the content must be served over HTTPS.
- iOS 基于JavaScriptCore 不等webView加载完毕就交互,网页获取原生内容。 webView的高级用法之JS交互,js与oc的相互调用
- #380 – Frame控件可以显示网页内容(The Frame Control Can Host Web Content)
- android WebView加载不出网页内容This request has been blocked; the content must be served over HTTPS.
- iOS获取webView的内容或修改网页上的内容
- VS2005无法调试报错:Unable to start debugging on the Web server
- \t\tSeparation of form and content(形式与内容的分离)--[xml&xsl在web网页中的应用]
- iOS 设备的网页调试工具-Firebug
- 如何添加真机调试的iOS设备
- 移动端 Web 网页调试技巧
- iOS 获取WKWebView内容高度做H5原生连接
- TRS内容协作平台(TRS Web Content Management,简称:TRS WCM)
- 普通web网页自适应移动设备屏幕
- 定制内容查询Web部件(Customize Content Query WebPart)系列二 :定制常用新闻标题和条目格式外观
- iOS上Web开发之远端调试
- C# WEB网页内容采集