移动端环境搭建--Chrome篇

来源：互联网发布：绵阳编程培训学校编辑：程序博客网时间：2024/05/01 16:18

这一部分，由于知识有限，各种网上搜索，本机试验，搭建的环境，望大家多多指导

chome中的inspect调试功能的前提，必须翻墙，在这里提供了两种翻墙方法，一种是通过翻墙软件，另外一种是通过修改hosts文件，翻墙成功后，我们就可以连接我们的移动设备，进行页面调试了。

注：这里仅限于Android系统

一、工具及移动设备

Fiddler

小米手机android4.4.2+数据线

Lantern

二、.搭建步骤

1.翻墙

（1）下载Lantern代理软件，并安装，安装完Lantern代理后，页面自动打开代理服务器【127.0.0.1:16823】页面，此时翻墙成功

官方下载地址：https://getlantern.org/

网盘下载地址：http://pan.baidu.com/s/1eQGtoWi http://pan.baidu.com/s/1ntF0DuD

（2）修改hosts文件

打开本地hosts（一般存在于 C:\Windows\System32\drivers\etc目录中）文件，添加203.208.46.178 chrome-devtools-frontend.appspot.com即可

2.移动设备的数据线连接电脑，并在移动设备上开启【USB调试】模式

3.电脑端的chrome中，输入url【chrome：//inspect】，即可看到设备信息【HM NOTE 1LTE】如下图所示：

4. 打开移动设备中的chrome浏览器，访问【www.baidu.com】，即可在电脑端的chrome中看到访问的页面url，如下图所示：
5.此时就可以开始调试我们的【百度页面】啦，点击【inspect】,弹出【开发者工具】页面，此时我们就可以在【开发者工具】中对我们的代码进行调试了

6.注意，现在我们调试的是线上的代码，在chrome中调试本地代码的时候，需要配置fiddler，具体配置信息，参考【移动端环境搭建--Fiddler篇】

0 0