h5远程调试

H5开发远程调试篇

       由于部分同学对远程调试不太了解，了解远程调试后，可以直接避免打alert来看数据的变化，直接在chrome浏览器内打断点，然后查看每一步数据的变化，可提高开发效率，定位问题快等优点，H5发布生产后也可通过debug调试来定位问题，快快来看看我们在各个平台是如何debug，加入我们吧！

以下调试方式包括：微信内安卓、浏览器android和IOS的4种调试

1、微信----安卓远程调试

1、TBS studio调试（第二代）推荐使用

1.移动调试链接：404

2、微信调试的链接（具体可查看以下两个链接） （第一代）

1.微信移动调试链接一  404

2.微信移动调试链接二 概述 | 微信开放文档 内第4项 移动调试

3、第一代调试步骤

步骤一：准备工作：安卓手机+微信app+数据线+电脑1台

步骤二：判断是否支持调试 X5 Blink 内核的网页，安装web开发者工具，工具里面：移动调试-x5 Blink内核调试，1.验证移动设备是否支持移动调试 2.移动设备扫码，勾选  ---信息--勾上inspector调试功能（无效）

步骤三：下载并安装一个TBS的apk包，下载地址：tbs_blink_MainActivity.apk

步骤四：下载并安装附件中的TBS demo，打开Demo后，自动进行TBS内核的安装，之后提示重启。重启之后，确认TBS内核已经正常加载。

步骤五：在App中调起Demo中的TBS内核 (1) 之后打开App，等待一分钟左右，再重启App。(2)在App中打开网页，并确认App使用了TBS demo中一样的X5内核。

步骤六：启动Inspector调试 (1) 打开URL(http://debugx5.qq.com)进入TBS调试界面 -－ 信息 －－ TBSsettings。(2)找到启用Inspector功能，勾选成功后，重启App再打开网页。如下图

步骤七：在微信打开一个H5页面，用电脑的Chrome浏览器打开网址chrome://inspect

步骤八：点击inspect后，这就与chrome浏览器debug调试一样，可断点调试。在微信里面打开任意H5页面、或者公众号里面的页面，都可在电脑的chrome浏览器debug，查看页面的代码（如果不明白，可查看微信调试的链接）

问题：

1、如果点击inspect一直空白，说明需要翻墙，翻墙后可打开。

2、Inspector调试微信时，请关闭手Q，QQ浏览器，和其它使用了X5内核的应用。以避免发生端口冲突。
3、基于同样的原因，如果一个App里启动多个进程来使用WebView，那么同时也只能有一个进程可以调试，哪个进程先启动哪个可以调试。

2、浏览器----安卓远程调试 (在手机上的大部分浏览器对于远程调试都受到限制)

步骤一：准备1个安卓手机+电脑的chrome浏览器+手机的chrome浏览器+数据线

步骤二：用电脑的Chrome浏览器打开网址chrome://inspect

步骤三：手机与电脑链接后，用安卓手机chrome浏览器打开任意H5网页，都可调试

步骤四：点击inspect后，与chrome浏览器debug调试一样

 问题：如果点击inspect一直空白，说明需要翻墙，翻墙后可打开

3、浏览器----IOS远程调试

 如果以下不明白可访问以下链接：Safari 前端开发调试 iOS 完美解决方案 - iPhone手机开发技术文章 - 红黑联盟

步骤一：准备1个ios手机+1根ios数据线++1台mac电脑

步骤二：在设置中开启功能

　　【iOS 终端】：设置 → Safari → 高级 → Web 检查器 → 开。（如图）

　　【OS X】：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。（如图）

步骤三：在ios手机用Safari浏览器打开任意H5页面

步骤四：手机用数据线与电脑连接，在mac电脑的Safari浏览器内打开debug模式，可进入断点调试(前提条件是步骤一的专用测试包)

4、手机端调试，可在手机上直接看到日志

github地址：https://github.com/Tencent/vConsole