如何用手机进行本地前端调试(示例代码)

最新推荐文章于 2024-09-02 17:13:44 发布
最新推荐文章于 2024-09-02 17:13:44 发布
阅读量4.2k 收藏 14
点赞数 2
文章标签： chrome 前端
原文链接：https://www.136.la/html/show-889.html
版权

在做前端开发时需要进行真机测试和调试，除了进行远程调试，我们能不能在本地就实现手机调试呢？

一般我们会用chrome来模拟移动设备显示效果，但还是有很多情况到了移动设备上才会出现。所以在进行响应式开发时，最好应该先进行移动设备真机调试。

先说明一下我的环境：Win 10 + Android手机 + chrome(desktop&app)

第一步：连接电脑与手机

1. 手机打开“开发者选项”

安卓手机进入“设置”—>“关于手机”—> 在“版本号”上点7次（或其他的版本号位置，一个个试肯定有……）

然后“开发者选项”就出现在“设置”里面了。

2. 手机打开“USB调试”

进入“开发者选项”—>打开“USB调试”（如果想手机长亮还要打开“不锁定屏幕”）

3. 连接并允许调试

用USB数据线将手机与电脑连接—>手机上出现“允许该电脑调试”时点“允许”（可能会晚点出现，先去第二步）

第二步：用电脑启动手机浏览

1. 打开chrome的inspect

在电脑chrome地址栏中输入chrome://inspect—>勾选“Discover USB devices”

如无意外在Devices中会出现手机型号。

如果没有，再确认下：开发者选项、USB调试、允许该计算机调试

2. 手机打开chrome app

在手机中打开chrome，这时电脑的chrome inspect中会出现输网址的地方。

3. 测试手机浏览的控制

在电脑chrome inspect输入框中随便输个在线网址，点Open，手机chrome就会打开该页面。用电脑chrome可以控制刷新、关闭，但是用来调试的inspect点开是空白，应该是被墙了。

第三步：用手机测试本地页面

1. 开启本地服务器

对的，很遗憾手机chrome不能进行静态页面的调试。

所以必须开本地服务器，所幸现在有gulp+webserver，用法这里不讲了。

总之，完成这一点后，你应该在电脑上用 http://localhost 来浏览网页了。

2. 电脑chrome开启端口转发

在chrome inspect中点“Port forwarding...”—>把端口和localhost链接输进去（比如8000和localhost:8000）—>勾选“Enable port forwarding”—>Done

3. 打开手机浏览localhost

如：输入http://localhost:8000 点Open

这样手机就能打开页面了。

第四步：恢复inspect功能进行调试

还能怎么办，FQ呗。

ana_9717
关注
前端调试手机app
uncle_Huang的博客
11-29 1363
有时候应用在电脑网页端显示是正常的，但是一安装到手机上或者在手机浏览器上打开，就会显示各种问题问题。 在网上找了很长时间，最方便的就是利用在电脑上利用谷歌浏览器进行调试，输入网址chrome://inspect/#devices，进行调试，如下图所示。 打开网址，电脑连上手机后，如果在手机上点开你需要调试的app，在红框内会出现相应的应用信息，然后点击inspect；如果发现根本没有出现你想要调试应用的信息，这时候可以用 ...
uniapp - 详细实现移动端公众号 H5 网页授权登录流程及示例代码，申请测试公众号全流程及本地调试无需部署上线服务器就能直接调起微信登陆授权页面，手机移动端h5公众号页面利用微登录拿到用户数据！
王佳斌
08-01 3957
uni-app，微信公众号，h5网页，uniapp网页端，手机端H5公众号页面，微信网页登陆，uniApp详细实现公众号的登录，微信授权第三方网站登录，流程及逻辑详细教程，OAuth2.0，公众号网页授权，微信网页授权通过code换取网页授权，redirect_url，参数错误，解决，报错，无法调起，如何申请测试公众号，微信公众平台测试号的申请与使用，获取用户openid手机号昵称头像，利用测试号实现本地调试微信登录授权，本地无法调试怎么办，测试公众号，在开发环境下怎么测试，用项目本地ip地址，微信公众号平
vue项目如何在手机上面做测试
weixin_43617604的博客
08-27 858
vue项目如何在手机上面做测试 做好了vue项目，然后想在手上跑一遍 1 在项目的config/index.js中修改host为自己电脑的ip地址 2 如果不知道自己电脑的ip地址的话，可进入cmd命令，输入ipconfig便可看到自己的ip地址： 3 然后就重新运行一下vue项目，便可以通过http://ip地址:8080/来访问。例如你的ip地址为192.176.56.87，你就...
移动端前端开发调试
weixin_34209851的博客
01-01 344
通过移动端使用 Web 服务的比率越来越大，例如淘宝今年双十一，移动端交易份额就达到42.6%。由此可见，掌握移动端的前端开发和测试是非常有必要的。 本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐Mars移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注，不要让它“太监”了。 由于本文还会不断更新、补充、修正，故在此给出原文连接，以便查看最新版本...
前端开发如何在手机上访问预览测试
最新发布
weixin_43617604的博客
09-02 281
1 在项目的config/index.js中修改2 如果不知道自己电脑的ip地址的话，可进入cmd命令便可看到自己的ip地址：3 然后就重新运行一下vue项目，便可以通过来访问。，你就可以在浏览器中输入来访问vue项目了4 如果想在手机上的浏览器访问，。可以通过修改wifi的代理来达到这一效果。
在手机中调试前端项目
Cwhat的博客
05-17 203
这样配置后，当手机和电脑处在同一WiFi下，就可以在手机上通过地址192.168.31.xxx:8080来访问项目。打开cmd，输入ipconfig。找到IPv4 地址。port为项目启动时的端口。
移动端前端开发真机调试攻略
weixin_30852419的博客
07-13 647
移动端前端开发真机调试攻略 有线调试： 一、IOS 移动端 （Safari开发者工具） 手机端：设置 → Safari → 高级 → Web 检查器 → 开。 mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。 在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safar...
前端手机端调试
weixin_34392906的博客
10-20 355
当前端在进行手机端调试的时候，遇到bug，但却不能一眼看出什么问题的时候，手机端又没有控制台，该如何解决呢？ 下面是在手机端进行调试的三个方法 alert方法 window.onerror = function(message,file,row,column){ alert(message) //错误信息 alert(file) //错误所在文件 alert(row) //...
手机端调试
weixin_34128534的博客
03-01 181
法一： charls代理打开 手机电脑连接同一个局域网下 手机wifi手动设置代理（host改成电脑的本机IP,端口8888） 谷歌调试： 打开谷歌浏览器，chrome://inspect/#device 法二: 手机->safari浏览器->高级->Web检查器打开。 用数据线连接电脑，电脑选择信任该手机。 转载于:https://www.cnblogs.c...
如何在手机端上进行代码的调试？
anjignren的博客
04-10 1497
说一下问题： 前几天有个公众号开发的项目，客户在要求修改一定的需求后重新上传之后，客户手机里面的数据一直没有更新，甚至，后面连数据都不见了，只剩下了一片白板（静态数据是有的）。 一开始以为是手机端的兼容问题，因为这边的测试机器都可以显示内容，唯独客户那边的 手机不显示内容（客户是小米9 和华为nova9）,而且还有一个奇怪的现象：客户可以在浏览器中打开显示列表信息，但是在公众号就是空白。 解决： ...
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
此时，可以利用json server来模拟一个REST风格的API接口，以便于前端开发者能够使用虚拟数据进行开发和调试。json server是一个轻量级的Node.js模块，它可以迅速搭建一个基于REST API的服务器。通过在本地创建一个...
vue-cli中vue本地实现跨域调试接口
10-17
跨域问题是指在浏览器中出于安全考虑，限制了前端JavaScript代码对不同源的网络资源进行请求。一个源通常由协议、域名和端口号组成。当这些不一致时，浏览器就认为发生了跨域。以下是关于在vue-cli中实现本地跨域...
前端项目带有可定制菜单示例
01-21
8. 版本控制：使用Git进行版本控制可以帮助团队协作，跟踪代码变更，并方便回滚到之前的状态。 9. 模块化与重构：为了保持代码的可读性和可维护性，代码应模块化，使用ES6的import/export语法或CommonJS模块系统。...
使用 WebStorm 进行现代前端应用的调试
ByteCodN的博客
09-26 451
首先，您需要安装 WebStorm IDE。您可以从 JetBrains 官方网站上下载并安装适用于您的操作系统的版本。安装完成后，打开 WebStorm 并进行初始配置。在 WebStorm 中，您需要创建一个新的项目或打开现有的项目。选择合适的选项来设置您的项目，包括项目类型、名称和存储位置。一旦项目创建或打开完成，您就可以开始进行调试了。
移动端如何调试本地运行的前端项目
weixin_49015558的博客
07-03 542
移动端如何调试本地运行的前端项目
移动端前端调试
weixin_39876634的博客
12-24 1422
通过 Fiddler 等抓包工具，抓包，看数据是否正常 通过 vConsole 这种工具看是否有报错 Android 打开开发者模式，配合 Chrome 调试 iOS 使用 Safari 打开网页，连接手机到 mac，搭配 mac 上的 Safari 调试
手机web前端调试
weixin_34126557的博客
01-15 254
https://www.cnblogs.com/xy-nb/p/web.html 转载于:https://www.cnblogs.com/Frank-f/p/10271068.html
前端手机本地调试小技巧
qq_30916013的博客
06-05 3015
问题：pc调试手机页面经常出现一些问题，所以需要在手机上查看，更便于观察问题。 准备工作：手机（与电脑在同一局域网下），编辑器（我用的Hbuilder，我测试了大多编辑器都有启动本地服务的功能），电脑（我的是windows，mac的请找自己ip的方式） 1.本地的项目，在chrome下查看 2.本地打开效果 3.打开自己的终端输入ipconfig  找到自己
手机调试java代码_IDEA 远程调试Java代码
weixin_35738619的博客
02-27 287
远程服务启动配置远程调试java代码需要在java代码启动的时候配置远程调试的端口。而且启动的参数和jdk的版本不一样而不一样。如果是jdk 8之前的版本java -agentlib:jdwp=transport=dt_socket,address=8081,server=y,suspend=y-jar xxx.jarjdk 8之后 的版本是java -agentlib:jdwp=transpor...
python 前端 和后端登录界面实现调试 代码
04-24
我可以向您提供一些指导，但首先需要明确一点，Python是一种后端编程语言，它通常用于处理服务器端逻辑和与数据库交互等任务。因此，在Python中，前端和后端的界面实现通常需要与其他前端技术（如HTML、CSS和JavaScript）和Web框架（如Flask或Django）结合使用。 有关Python中实现前端和后端登录界面的调试代码，您可以尝试以下步骤： 1. 在后端编写处理用户登录请求的Python代码，您可以使用任何Web框架，例如Flask或Django。您需要实现逻辑以接收用户提交的登录表单数据并将其与存储用户凭据的数据库中的数据进行比较。如果匹配成功，您可以在后端创建并返回一个认证令牌。这个令牌将用于保持用户的身份验证状态，并且将在前端每个请求中发送到后端以获得受保护的资源。 例如，以下是使用Flask框架实现的后端Python代码示例： ``` from flask import Flask, request, jsonify from werkzeug.security import generate_password_hash, check_password_hash app = Flask(__name__) # This is a demo implementation, you should use a more secure way to store users' credentials USERS = { 'admin': generate_password_hash('password'), 'user': generate_password_hash('secret') } @app.route('/login', methods=['POST']) def login(): username = request.json.get('username') password = request.json.get('password') if not username or not password: return jsonify({'message': 'Username or password cannot be empty'}), 401 if username not in USERS or not check_password_hash(USERS[username], password): return jsonify({'message': 'Invalid username or password'}), 401 # Generate an authentication token token = 'your-authentication-token' return jsonify({'token': token}) if __name__ == '__main__': app.run(debug=True) ``` 2. 在前端编写一个登录表单，使用HTML、CSS和JavaScript制作，并将其与后端连接。您可以将表单提交到后端Python代码的URL地址，例如 `http://localhost:5000/login`。 例如，以下是一个简单的HTML登录表单，它使用JavaScript将数据提交到后端Python代码，并将令牌保存到浏览器的Cookie中： ``` <!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <form> <label>Username:</label> <input type="text" id="username" name="username"><br><br> <label>Password:</label> <input type="password" id="password" name="password"><br><br> <input type="button" value="Submit" onclick="login()"> </form> <script> function login() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://localhost:5000/login'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { // Save the token to the browser's cookie document.cookie = 'token=' + JSON.parse(xhr.responseText).token; window.location.href = 'profile.html'; // Redirect to the protected page } else { alert(JSON.parse(xhr.responseText).message); } } }; xhr.send(JSON.stringify({username: username, password: password})); } </script> </body> </html> ``` 3. 在前端运行一个服务器，以在本地主机上托管前端代码。您可以使用任何Web框架，例如Express或http-server。运行前，您需要安装Node.js，并在命令行运行 `npm install express --save`（或其他您选择的Web框架）。 例如，以下是使用Express框架实现的前端JavaScript代码示例： ``` const express = require('express'); const app = express(); app.use(express.static('public')); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); ``` 4. 打开浏览器并导航到前端的本地主机地址，例如 `http://localhost:3000/login.html`。您应该能够看到一个登录表单，您可以使用它进行用户身份验证。如果通过身份验证，则应将重定向到受保护的页面。 请记住，这只是一个简单的示例，您应该根据自己的要求定制它，并实现更安全的认证方式，例如使用JSON Web Tokens（JWTs）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值