如何在手机上调试本地网页？

目前的框架提供了非常好的工具链，周到而全面。

以React为例，如果使用create-react-app创建react项目，则启动后将显示以下提示：

这台机器可以通过http://localhost:3000访问，并通知您可以在局域网内访问。

Nice.gif!

那如果简单的静态页面如何使用手机查看及调试呢？操作也很简单，可以在vscode上安装一个 live server 的扩展。

Live Server 可以为静态和动态页面，启动一个本地开发服务器，这个服务还可以实时重载。

安装这个扩展之后，用vscode打开静态html项目包，打到项目入口页面如index.html。右键，点击Open with Liver Server，即可启动一个服务，用以访问该网站。

默认的访问地址为：。

此时，手机还无法访问。想要手机能访问，也非常简单，只要把你电脑的在局域网中的地址把 127.0.0.1替换掉就行。

你可以通过 cmd 输入ipconfig /all，查看本机地址。

当然，直接的方式是让Live Server直接生成以本机局域网地址的服务。其步骤为：

1 打开vscode 首选项–>设置，搜索 Live Server，点击编辑 Live Server 的 。

2 在中添加两个配置项：

“liveServer.”:true,

“liveServer.”: “localhost”

参考资料

server – Why can’t I enter the url on my phone’s browser to view my live site? – Stack Overflow