Chrome开发工具 在安卓设备上使用 Chrome 远程调试功能

在截屏上使用。例如，要检查元素，点击 Inspect Element 然后在截屏内点击就可以查看网页源码中对应部分。要模拟一个缩放手势，拖动鼠标的时候按住 Shift。要在页面上滚动，使用你的触控板或者鼠标滚轮，也可以拖动鼠标指针。端口转发你的手机不一定所有时候都能直接连接到你开发用的服务器。他们可能处于不同的网络环境下，此外，你也可能在一个受限的企业网络下进行开发。Chrome for Android 上的端口转发使得在移动设备上测试你所开发的站点变得轻松很多。其工作原理是在你的移动设备上创建一个监听 TCP 端口，该端口映射到你的开发机器上的一个指定 TCP 端口。这些端口之间的流量通过 USB 来传输，因此该连接不需要依赖于你的网络环境。要启用端口转发：在你开发用的机器上打开 chrome://inspect。点击 Port Forwarding。下面是端口转发的设置页面。在 Device port 后面输入你的安卓设备希望监听的端口号（默认是8080）。在 Host 后面输入你的 web 应用运行环境的 IP 地址（或者主机名称）以及端口号。检查 Enable port forwarding 是否已经勾选。点击 Done 来完成设置。端口转发设置当端口转发开启成功时，chrome://inspect 页面的端口状态将会显示为绿色。使用端口转发来在你的安卓设备上查看本地网页现在你可以打开一个新的 Chrome for Android 选项卡并且在你的设备上查看本地服务器的内容。虚拟主机映射当你在 localhost 域名上进行开发的时候，端口转发非常有效。但是有些情况下你可能需要是哟高自定义的本地域名。例如，假设你正在使用的第三方 JavaScript SDk 只有在白名单上的域名中才能运行。所以你需要在你的端口文件中加入一个进入点，比如 127.0.0.1 production.com。又或者你需要在你的 web 服务器上通过虚拟主机来设置特定的域名。如果你想让你的手机能够访问到你自定域名上的内容，你可以结合端口转发和代理服务器技术。代理会把来自设备上的请求映射到主机上的相应位置。在代理上使用端口转发虚拟主机映射要求你在主机上开启一个代理服务器。所有来自你的安卓设备的请求都会发送到这个代理上。要在代理上使用端口转发：在主机上安装代理软件，比如 Charles Proxy 或者 Squid。运行代理服务器，要记住该服务器使用的端口号。 注意：代理服务器和你开发用的服务器必须在不同的端口上运行.在 Chrome 浏览器中，进入 chrome://inspect。点击 Port forwarding。下面是端口转发设置页面。 在 Device port 后面输入你的安卓设备希望监听的端口号。使用安卓允许的端口，比如 9000.在 Host 处输入 localhost:XXXX，其中 XXXX 是你的代理服务器占用的端口号。检查 Enable port forwarding 是否已经勾选。点击 Done 来完成设置。代理服务器的端口转发在你的设备上设置代理你的安卓设备需要和主机上的代理服务器交互。要在你的设备上设置代理：选择 设置 > WiFi。长按你当前连接的网络。注意：代理设置适用于所有网络.点击修改网络。选择高级设置。代理设置页面如下： 点击代理菜单并选择手动。在代理主机名处输入 localhost。在代理端口号处输入 9000。点击保存。通过这些设定，你的设备会将它所有的请求都发给代理服务器。该代理代表你的设备发出新的请求，故而对你本地特定域名的请求会被合理地解析。现在你就可以像在主机上那样在 Chrome for Android 上加载本地域名了。使用虚拟主机映射技术来在安卓设备上访问特定的本地域名提示：要恢复正常的浏览模式，在断开连接后将设备上的代理设置还原就可以了。常见问题我在 chrome://inspect 页面无法看到我的设备如果你在 Windows 下进行开发，请确认你是否安装好了你的设备所对应的驱动。安卓开发者网站上的 OEM USB Drivers 可供参考。确认你的设备是否直接或者通过集线器连接到了你的主机上。确认设备上 USB 调试模式 有没有打开。记得在提示是否允许 USB 调试的时候选择是。在电脑上打开 chrome://inspect 并确认 Discover USB devices 有没有勾选。远程调试要求你电脑上的 Chrome 版本高于安卓设备的。尽量使用 Chrome Canary（Mac/Windows）或者 Dev channel 发行版（Linux）。如果你仍然无法看到你的设备，请断开设备与主机的连接。然后在你的设备上，打开 设置 > 开发者选项。选择撤销 USB 调试授权。然后重新尝试设置设备以及在 Chrome 中查找设备。在 chrome://inspect 页面中我无法看到我的浏览器选项卡在你的设备中，打开 Chrome 浏览器并进入到你想调试的页面。然后刷新 chrome://inspect 页面。我无法在 chrome://inspect 页面中看到我的 WebView确认WebView 调试模式在你的应用中已经启用。在你的设备上，启动应用并打开你想调试的 WebView。然后，刷新 chrome://inspect 页面。在我的安卓设备上我无法访问 web 服务器如果是网络限制条件导致你的设备无法连接到开发用的服务器，请尝试端口转发或者虚拟主机映射。最后，如果远程调试仍然无法工作，你可以使用 Android SDK 中的 adb 二进制包将你的工作流恢复到最近的状态。更多信息远程调试和 ADB在远程调试浏览器选项卡以及 WebView 的时候你不要设置 ADB 或者 ADB 插件。Android 上的远程调试现在是标准 Chrome DevTools 的一部分。在所有的操作系统上它都可以使用：Windows，Mac，Linux 以及 Chrome OS。如果你在使用远程调试的时候遇到了问题，你可以尝试通过 Android SDK 提供的 adb 二进制包来使用传统工作流。注意：你的安卓设备和 Chrome 之间的连接可能会中断 adb 连接。在建立 adb 连接前，取消 chrome://inspect 上对 Discover USB devices 的勾选。