开发手机js页面，调试小技巧，用nginx做服务器，手机访问电脑端口即可

最新推荐文章于 2025-07-03 09:48:22 发布
原创 最新推荐文章于 2025-07-03 09:48:22 发布 · 945 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在Mac上配置Nginx服务器，实现手机与电脑在同一网络下预览项目。通过设置Nginx端口及内网IP，如192.168.31.10:999，即可在手机浏览器中访问到电脑上的项目，便于进行跨设备调试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在mac上开发，安装配置好 nginx，或者你用自带服务器引擎的开发环境也应该是可以的，

然后 手机，电脑在同一网络下，假如nginx给 项目配的server 端口是 999,内网ip：192.168.31.10，

那么直接在手机 浏览器访问192.168.31.10：999 即可看见效果了。

可能会有mac端的设置问题， 要打开可允许访问吧，以前开发 弄nginx时都弄过了，现在想不起来了，问题不大。

【Nginx学习】8大技巧：用Nginx配置一个静态Web服务器，对客户端请求的特殊处理你真的会了吗？
java专栏
10-30 598
通过error_page指令可以自定义错误页面，提供更好的用户体验。# 虚拟主机设置server {listen 80;# 监听80端口# 服务器名称或域名# 网站根目录# 默认索引文件# 自定义404错误页面internal;# 内部重定向到404错误页面# 自定义500错误页面internal;# 内部重定向到50x错误页面代码注释：自定义404错误页面。：内部重定向到404错误页面。：自定义500、502、503、504错误页面。：内部重定向到50x错误页面。
【Nginx学习】10大技巧：用Nginx配置一个静态Web服务器，你真的了解ngx_http_core_module模块的变量吗？
java专栏
10-30 728
通过本文的详细介绍，相信你对Nginx服务的基本配置和模块提供的变量有了更深刻的理解。Nginx的强大之处在于其灵活的配置能力和高效的性能，掌握这些基础知识将帮助你在日常运维中更加得心应手。如果你有任何疑问或需要进一步的帮助，欢迎随时留言交流！希望这些知识能成为你Nginx之旅的得力助手，祝你一路顺风！
nginx实现手机wap版和电脑pc版网站访问选择
weixin_33874713的博客
12-02 469
需求：手机平板访问网站，跳转到手机WAP页面，电脑访问网站，跳转到电脑PC页面。解决方法有好几种，大致分成两类，一是在服务器上实现，二是通过页面js实现。但能在服务器上实现的，就尽量不要在页面上实现。从网上搜索来几个代码先标注下。方法一：nginx根据http_user_agent判断，在nginx.conf配置：代码一：server { listen...
用Nginx来作为媒介在手机查看电脑的html网页效果
欢迎光临我的博客
10-11 1221
1.下载nginx 2.下载完成后在浏览器中输入localhost查看是否成功下载，若出现以下界面即成功下载 3.下载完成后打开nginx文件夹，找到html文件夹，将自己写好的html文件放入此文件夹并将自己写的html文件名字命名为index.html 4.确保电脑和手机共同连接在同一个wifi下5.打开cmd，在命令行内输入ipconfig查看连接地址 6.在手机浏览器输入上面的地
局域网内手机访问电脑网站注意几点
weixin_30786617的博客
02-02 331
一台Android手机和一台PC电脑，在同一个WiFi局域网内。PC上部署了IIS，可是Android手机无法访问PC上虚拟目录内的网页，如http://192.168.1.100/localhost/index.html（之前可以访问）。这可能是哪出了问题呢？ 可能有以下几种可能： 第一步，先用另一台PC，测一下，网页能不能正常访问，...
Mac自带的本地服务器的使用 以及 手机访问
Loong专栏
11-24 2003
1. 打开终端，开启Apache: //开启apache: sudo apachectl start //重启apache: sudo apachectl restart //关闭apache: sudo apachectl stop 2. 点击Finder,然后Command+Shift+G,前往如下路径(mac下Apache服务器的文件路径) /Library/WebServer/Documents 在步骤1中 输入一个http://127.0.0.1其实默认打开的是index.
【亲测免费】 开源项目推荐：debug.js - 手机端调试利器
gitblog_00034的博客
11-08 472
开源项目推荐：debug.js - 手机端调试利器 项目基础介绍及编程语言 debug.js 是一款专为提升手机端应用调试效率而设计的开源工具，由CoffeeScript编写，并具有HTML接口以便于交互。这款轻量级的库旨在简化开发者在移动设备上查看和追踪调试信息的过程，极大地便利了移动端开发者的日常调试工作。 核心功能 多级别日志打印：提供包括success、error、log以及更具体的如w...
阿里云Ubuntu系统使用Nginx搭建静态网页实战
轻口味的专栏
04-28 983
上面我们创建了一个配置文件，然后nginx就可以自动识别到，下面我们看看配置的具体介绍和说明。下面是一个完整的server {listen 80;# Vue构建产物目录# 静态资源缓存配置# SPA路由适配# 禁止访问隐藏文件!deny all;# 错误页面配置internal;# 访问日志与错误日志路径逐项配置解析server块• 作用：定义一个虚拟主机，处理特定域名或IP的请求。• 关键指令：•listen 80;
浅谈SpringBoot项目如何让前端开发提高效率(小技巧)
08-26
例如，配置一个Nginx服务器监听80端口，将所有非静态资源请求转发到后端服务，静态资源则指向本地的静态文件目录。这样，即使后端部署在远程环境，前端也可以在本地高效地调试和预览页面，同时解决了跨域问题。 除...
终结Nginx 404/502各种报错噩梦：多年血泪经验分享
牛奶夹心巧克力
07-03 927
Nginx错误排查是一个系统性过程，需要结合日志分析、配置检查、网络诊断和性能监控等多方面技能。
移动端调试神器——vconsole.js
08-07
我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log； (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。 如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。 作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？ 答案是肯定的。 vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。 你值得拥有~
两大js移动端调试神器 / 调试工具分享
在知识的海洋里遨游
11-03 700
两大js移动端调试神器 / 调试工具分享
关于在手机上调试JS代码
qq_42944545的博客
09-01 817
6：在电脑chrome上看到这个页面，点击inspect或者 fallback inspect即可！2：提示打开“开发者模式”之后，在设置中搜索“开发者”选项卡，然后找到“USB调试模式”4：在Chrome中输入chrome://inspect/，然后开到设备窗口。1：先打开USB调试模式：在手机上打开关于，点击版本号7-8次（华为）3：关闭所有Chrome窗口，然后重新打开。5：在设备上点击到你需要调试的页面。
js移动端调试控制台_移动端js调试工具：eruda
weixin_39939665的博客
12-20 916
通常写前端页面都在Chrome浏览器的开发模式下进行调试，但是写放在移动端的H5页面时，有时候会遇到在Chrome上调试没有问题，但是在手机的浏览器上有问题的情况；或者有些功能只能在特定的容器中才能其作用，这个时候如果发现在手机上有问题，只能够通过alert一步一步地定位问题。同事推荐了一个好用的可以在手机浏览器上直接定位问题的插件：eruda.js，记录一下使用方法。使用方法：1.在html中引...
使用电脑远程调试安卓手机上浏览器的JS
不断成长的我
08-25 4331
有时候要开发在手机浏览器上运行的网页，这样就涉及到要调试JS，在电脑上怎么模拟，跟使用真机还是有区别，这里介绍几种用电脑远程调试JS的方法。 1.使用google浏览器，因为安卓本来就是谷歌的，因此它本身对此有支持，开发了相关的插件  1）首先，电脑上要有谷歌浏览器（Chrome)，最好是最新版的（Chrome 31以上）；   2）安装了安卓的SDK；  3）
浏览器调试之js调试
qq_25956141的博客
01-28 1万+
现在的浏览器一般都给了我们调试js的功能，个人比较推荐使用google浏览器，他的调试结构清晰且强大，下面就来介绍一下google浏览器的调试功能 调试器界面 按下F12，你会发现弹出来一个窗口，并附着在当前页面，这就是google浏览器的调试器，在该窗口中，你能找到有Elements\Console\Sources\Network….，前4个是常用的功能，如果你不习惯这个窗口的位置，你也可以调
如何在手机浏览器使用调试工具
热门推荐
罗_星星的博客
06-06 5万+
手机端网页的调试致谢：这个使用的工具来自eruda，在此感谢我的舍友超哥告诉我这个强大的工具 gtihub地址： https://github.com/liriliri/eruda 效果预览 http://liriliri.github.io/eruda/近期遇到的问题是电脑端的select指定size，在电脑端正常使用，在手机端不支持size属性，所以想着在手机端添加调试工具，主要目的是打
移动端调试插件vconsole.js的使用
从零出发
03-17 2506
移动端调试插件vconsole.js的使用 1. 使用场景 在移动端开发的时候，如果仅仅是手机网页，调试的时候我们直接使用浏览器自带的调试工具就可以了。但是如果是微信公众号或者企业微信，需要在微信的环境正才可以访问的页面，这个时候调试就不方便了。此时，推荐使用vconsole.js进行调试，而不是使用alert方法。 2. vue开发微信公众号调试 安装 npm install vconso...
移动端web开发调试工具——Vorlon.JS上手教程
雨巷的博客
04-19 7508
问题提出： 在移动端页面的日常开发中常常会碰到这样一个问题，页面在Chrome的Device模式下显示正常，但在移动端浏览器或者内嵌到APP里就会出现样式问题或者Js代码问题，但是移动端上没有类似Chrome的开发者调试工具，只能通过尝试修改，重复发布版本来检查问题，或者写一大堆alert弹窗来调试。这种方法不但繁琐，而且收效甚微。 解决方案： Vorlon.js可以帮助开发者加载、检查...
js怎么做本地服务器
最新发布
08-07
<think>我们参考上面的引用资料，总结出使用Node.js搭建本地HTTP服务器的步骤： 1. 安装Node.js环境 2. 创建项目文件夹并初始化（生成package.json） 3. 安装必要的模块（如express, body-parser等，根据需求） 4. 编写服务器代码（创建js文件，如index.js） 5. 启动服务器 6. 测试服务器 根据引用[3]和[4]，我们可以有两种方式：一种是使用Node.js原生的http模块，另一种是使用Express框架。 下面我们分别介绍两种方法： 方法一：使用Node.js原生http模块（简单示例） 步骤： 1. 确保已安装Node.js。 2. 创建一个新的项目文件夹，进入该文件夹。 3. 创建一个js文件（如server.js），编写代码。 4. 运行该js文件。 示例代码（server.js）： ```javascript var http = require('http'); // 创建服务器 http.createServer(function (request, response) { // 设置响应头 response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据 response.end('Hello World\n'); }).listen(8001); // 监听8001端口 console.log('Server running at http://127.0.0.1:8001/'); ``` 然后，在命令行中执行： ``` node server.js ``` 方法二：使用Express框架（更常用，功能更强大） 步骤： 1. 确保已安装Node.js。 2. 创建项目文件夹，进入该文件夹。 3. 初始化项目（生成package.json）： ``` npm init -y ``` 4. 安装Express框架： ``` npm install express --save ``` （如果需要处理POST请求，可以安装body-parser，但Express现在内置了中间件，可以用express.json()代替） 5. 创建入口文件（如index.js），编写代码。 6. 运行入口文件。 示例代码（index.js）： ```javascript const express = require('express'); const app = express(); const port = 3000; // 使用内置中间件解析JSON请求体（替代body-parser） app.use(express.json()); // 处理根路径的GET请求 app.get('/', (req, res) => { res.send('Hello World!'); }); // 处理POST请求 app.post('/', (req, res) => { console.log(req.body); res.json(req.body); }); // 监听端口 app.listen(port, () => { console.log(`Server running at http://127.0.0.1:${port}`); }); ``` 启动服务器： ``` node index.js ``` 为了方便开发，可以使用nodemon（它会监测文件变化自动重启）： 安装nodemon（全局安装）： ``` npm install -g nodemon ``` 然后使用nodemon启动： ``` nodemon index.js ``` 测试： 打开浏览器访问 http://127.0.0.1:3000 （对于方法二）或 http://127.0.0.1:8001 （对于方法一），应该能看到"Hello World!"。 对于POST请求，可以使用Postman等工具发送POST请求到http://127.0.0.1:3000，查看服务器响应。 注意：在开发微信小程序时，如果需要使用本地服务器进行测试，需要在微信开发者工具中关闭域名校验（详情 -> 本地设置 -> 不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书）[^5]。 以上两种方法，第一种更基础，第二种更常用且功能更强大，推荐使用Express框架。 相关问题： 1. 如何让Node.js服务器支持HTTPS？ 2. 如何使用Node.js处理文件上传？ 3. Node.js服务器如何连接数据库？ 4. 如何部署Node.js服务器到生产环境？</think>### 使用Node.js搭建本地HTTP服务器的方法 #### 方法一：使用原生http模块（基础版） ```javascript // 1. 创建 server.js 文件 const http = require('http'); // 2. 创建服务器实例 const server = http.createServer((req, res) => { // 3. 设置响应头 res.writeHead(200, {'Content-Type': 'text/html'}); // 4. 发送响应内容 res.end('<h1>Hello Node.js Server!</h1>'); }); // 5. 监听端口 server.listen(3000, () => { console.log('服务器运行在 http://localhost:3000'); }); ``` **操作步骤：** 1. 安装[Node.js](https://nodejs.org/) 2. 创建项目文件夹：`mkdir my-server && cd my-server` 3. 创建上述`server.js`文件 4. 启动服务器：`node server.js` 5. 浏览器访问 http://localhost:3000 --- #### 方法二：使用Express框架（推荐） ```javascript // 1. 初始化项目 npm init -y // 2. 安装Express npm install express // 3. 创建 app.js 文件 const express = require('express'); const app = express(); const port = 3000; // 4. 设置路由 app.get('/', (req, res) => { res.send('Express服务器已运行！'); }); // 5. 处理POST请求（需安装body-parser） app.use(express.json()); app.post('/api', (req, res) => { console.log('收到数据:', req.body); res.json({ status: 'success' }); }); // 6. 启动服务器 app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`); }); ``` **增强功能：** 1. 实时重载：`npm install nodemon -g`，使用`nodemon app.js`启动 2. 静态文件服务：添加`app.use(express.static('public'))`可托管public目录下的文件 3. HTTPS支持：使用`https`模块配合SSL证书 --- #### 开发调试技巧 1. **解决跨域问题**：添加CORS头部 ```javascript app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); }); ``` 2. **小程序本地测试**：在微信开发者工具中勾选【不校验合法域名】[^5] 3. **端口冲突处理**： ```javascript const port = process.env.PORT || 3000; // 支持环境变量配置 ``` 4. **请求日志**：使用`morgan`中间件 ```bash npm install morgan ``` ```javascript const morgan = require('morgan'); app.use(morgan('dev')); // 显示请求日志 ``` --- ### 测试验证 1. GET请求测试：浏览器访问 http://localhost:3000 2. POST请求测试（使用curl）： ```bash curl -X POST -H "Content-Type: application/json" -d '{"name":"test"}' http://localhost:3000/api ``` --- ### 常见问题解决 | 问题现象 | 解决方案 | |---------|----------| | `Error: listen EADDRINUSE` | 更换端口或终止占用进程 `kill -9 $(lsof -t -i:3000)` | | 请求返回404 | 检查路由路径是否匹配 | | POST请求获取不到body | 确保已添加`app.use(express.json())` | | 文件修改需手动重启 | 使用`nodemon`自动热重载 | > 提示：生产环境部署需配置Nginx反向代理和PM2进程管理[^1]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值