怎么在web下调试设备

『壹』 怎么在移动端调试web前端

响应式测试：Chrome DevTools 面板右侧拉伸快速查看效果；Firefox 响应式工具进一步调整；Chrome Emulation 精细测试。
Android 设备测试：使用 Android 虚拟机；优先使用 Weinre 测试，分析用户浏览器使用份额，有针对的进行测试。高版本 Android 测试机，使用 Chrome 连接调试。Android 4.4+ 的 WebView 修改 APP 源代码，也可以用 Chrome 调试。
低版本系统和其他品牌手机以及 WebView：统统可以用 Weinre 来解决。
iOS 设备测试：使用 Xcode 自带 iOS 模拟器，使用 Safari 调试；WebView 也可以被电脑上 Safari 调试；测试机连接电脑，也可以用 Safari 调试；MIHTool 可以在 iOS 设备上使用，提供类似 Weinre 的调试功能。
测试多种设备：BrowserStack 和 Keynote。
使用 BrowserSync 可以创建本地局域网 IP 服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。
当移动端设备无法访问某项资源时，使用 Charles 做代理，通过电脑去访问。

『贰』 如何在移动设备上调试html5开发的网页

1、打开手机web检查器。

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

『叁』 如何 iphone 真机调试web

参考下：1、授权设备：

进入Apple Developer会员中心，点击图中的iOS Provisioning
Portal，进入开发者授权设置系统：

在设置界面中，可以选择点击页面下方的助手来运行向导：

点击左侧导航的Device，进入授权设备的页面，点击右上方的Add Device按钮可以添加一个设备：

添加设备的时候可以指定设备的名字（随便写），以及设备的UDID。每一个Apple的设备都有一个唯一的标识符，获得这个标识符的方法很简单，有两种方式：

（1）将你的设备连接到电脑，然后在iTunes里找到你的设备信息（如下图），点击图中红色方框的位置，设备UDID就会显示出来。右击UDID会提示拷贝，将拷贝的结果复制到框内即可；

（2）打开xcode，window→organizer→devices，在里面可以看到identifier信息2、添加App ID：

点击左侧导航的App IDs按钮可以进入应用程序ID的配置页面，可以点击页面右方的New App
ID按钮添加一个新的应用。这个ID对应的是即将开发和测试的应用程序。如下图，在description里添加一个单一应用的名称（不支持特殊字符），然后在最下面的Bundle
Seed ID里面填入一个含有domain格式的字符串（如com.bo.test）。Bundle Seed
ID是一个集合了开发商与应用程序的信息，格式为(com.[开发商].[应用]），这里可以指定为单一应用，也可以指定为全部应用。如果是单一应用，建议刚才填写的description与Bundle
Seed ID的最后一项相同（如test和com.bo.test），如果是全部应用，可以使用这样的Bundle Seed ID：
com.bo.3、添加证书：

（1）首先在mac电脑上生成开发者证书：

在Applications->Utilities里手动打开Keychain
Access。按照下图操作最终点击“从证书颁发机构请求证书”

正确填写自己的邮箱和姓名即可，选择“存储到磁盘”，点击继续。最终会生成一个名为“CertificateSigningRequest.certSigningRequest”的文件。

这时候返回刚才的iOS Provisioning Portal网页界面，点击左侧的“Certificate”，点击页面右方的Request
Certificate申请一个证书，然后点击页面下方的按钮上传生成的certSigningRequest文件，这样就完成了证书的申请流程。申请成功后，Certificate页面里就有了一条证书，刷新几次页面后证书的状态就变成Issued，点击download按钮可以下载一个cer文件。4、使用开发者授权：

（1）回到iOS Provisioning Portal网页界面，点击左侧的“provisioning”，点击右侧的New
Profile按钮创建一个新的授权文件：

填写profile
Name；在Certificates中选择刚刚创建好的证书（一劳永逸的一步，之后只需勾选该证书即可，不必再手动添加）；APP
ID选择刚刚建的那个；Devices
选择刚刚添加的设备；Submit（绑定设备到应用程序）；刷新页面，会看到刚刚建的那个后边有个Download，点击Download，下载了一个.mobileprovision文件。

（2）打开xcode→window→organizer，将下载的.mobileprovision文件拖到Provisioning中（此步骤绑定设备到应用程序，并生成证书）

（3）项目中的plist 文件，将Bundle Identifier 这一项的内容改成Bundle Seed
ID(格式:com.[开发商].[应用])即可

将run按钮右边的设备选为对应的真机设备，接下来就编译运行看看吧！希望帮助你

『肆』 如何使用微信web开发者工具调试程序

微信web开发者工具使用教程：

1、首先用户需要做的就是先下载安装，并启工具。

即刻下载使用==》微信web开发者工具下载

2、调试微信网页授权，具体操作步骤为：

1）开发者可以在调试器中点击“登录”，使用手机微信扫码登录，从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页，绑定的公众号为“微信 web 开发者工具”。

2）为了保证开发者身份信息的安全，对于希望调试的公众号，我们要求开发者微信号与之建立绑定关系。具体操作为：公众号登录管理后台，启用开发者中心，在开发者工具——web 开发者工具页面，向开发者微信号发送绑定邀请。

3）开发者在手机微信上接受邀请，即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示：

4）完成登录和绑定后，开发者就可以开始调试微信网页授权了，注意只能调试自己绑定过的公众号：

非静默授权的 URL：点击查看

在微信 web 开发者工具中上面的 URL，webview 模拟器显示效果如图：

点击“确认登录”即可带着用户信息跳转到第三方页面，很方便的进行后续的开发和调试。

静默授权的 URL：点击查看

在微信 web 开发者工具中打开该 URL 则会自动跳转到第三方页面。

（注意：如果使用了代理，需代理本身支持https直连，才能调试https页面。）

3、模拟JSSDK权限校验

通过 web 开发者工具，可以模拟 JSSDK 在微信客户端中的请求，并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例：